这篇博文将解释所有的新功能以及它们是如何在最新的2.1.9版本中出现的。
我们将从新的Turbo支持开始。
⚡️ Turbo支持
新的Turbo实际上是Turbolinks的延续。 如果你忘记了Turbolinks--它允许你把单页体验带入你的应用程序,而不需要太多麻烦。
Turbo所做的是以更多的概念来跟进Turbolinks的理念。通过Turbolinks,你可以浏览网页,而Turbolinks会对其进行缓存,所以你会觉得一切都像在单页应用中一样流畅。 像这样在浏览器的历史中移动,在当年是革命性的(我相信现在仍然很有趣)。
但它到底是如何工作的呢?页面的部分内容被缓存起来,所以当你导航回到该页面时,你会立即得到一个预览,直到实际的页面请求完成。这就造成了单页应用程序的错觉。现在,这个概念被提取到Turbo Drive中。Turbo的TurboDrive部分是我们所感兴趣的。
但它到底是如何工作的呢?页面是被缓存的,所以当你导航回到页面时,你会立即得到一个预览,直到实际的页面请求完成。 通过显示页面的预览,Turbolinks绘制了一个单页应用程序的假象。现在,这个概念转移到了Turbo Drive。而我们正是对TurboDrive的部分感兴趣。
所有这些神奇的渲染就是render_async出现的地方。由于render_async在页面加载后会发出异步请求,所以我们必须以某种方式来支持它。 当你访问一个启用了Turbo并在Turbo内缓存的页面时,你会首先得到一个页面的预览。在此期间,会有一个请求被发送到后台,以获得该页面的新版本。然后,当新版本到来时,它将用预览版本取代它。
为了处理这些影响并使render_async工作,我们首先建议在render_async调用中加入data-turbolinks-track="reload" 或nowdata-turbo-track="reload" 。这些数据属性会阻止Turbo发挥它的魔力,这不是每个用户都希望的。然后,Mbuckley0的一个聪明的贡献使得拥有Turbo功能并使render_async工作成为可能。
我们的想法是让render_async在turbo:load ,或者简单地说,在Turbo加载页面时工作。但是,我们也需要阻止render_async在预览显示Turbolinks的时候执行。你所需要做的就是像这样设置turbo 的配置。
RenderAsync.configure do |config|
config.turbo = true # Enable this option if you are using Turbo
end
🔮 未来的Turbo工作
是的,render_async正在与Turbo一起工作。但是,我们想让它工作得更好。现在,有一个小小的痒点,一直困扰着其他用户和我。在你获得Turbo预览和页面替换预览后,render_async调用执行并替换了预览值。
这听起来可能有点混乱,所以我将展示一个GIF,它应该能更好地说明问题。
请注意,当我们点击其中一个链接时,我们会得到带有"render_async here :wave:"文字的页面预览。然后,该页面被从后端获取,render_async再次被触发。这时,我们看到 "...Loading /render_async/wave"部分。最后,在波形请求结束后,页面又回到了预览时的状态。
未来的一个改进是,我们可以跳过显示render_async的加载指标。如果能在render_async容器内显示一个预览,直到render_async从请求中获取最新鲜的数据,那就更好了。
如果你有任何想法或愿意做出贡献,请在我们的Discord服务器上告诉我,或在Twitter上与我联系。非常感谢。
🐛 小的错误修复
创业板中的配置选项有一个问题。我们通过一个简单的重命名轻松地解决了这个问题,但奇怪的是它几乎没有被注意到。你现在可以使用各种配置选项了。
对文档也有一些小的更新,但没有什么太激烈的地方--只是一些小的错别字修正。
最后的想法
这个版本的内容就到此为止。谢谢大家,谢谢你们的贡献。考虑加入Discord服务器,这样的话,我们可以使它变得更好。