在 Rails 应用中实现 Hotwire 和 Turbo 的终极指南

这是一篇关于在 Ruby on Rails 中实现 Hotwire 和 Turbo 的综合指南,主要内容如下:

  • 定义:Hotwire 是一组无需大量编写 JavaScript 即可构建现代 Web 应用的技术,包括 Turbo、Stimulus 和 Strada,重点在于服务器渲染 HTML;Turbo 是 Hotwire 的一部分,通过 JavaScript 只获取和更新页面更改的部分来加速页面加载和表单提交,提供单页应用的感觉并支持服务器渲染 HTML。
  • Turbo Drive:拦截常规浏览器导航和状态突变,注入处理层,基于浏览器的 fetch 方法和 History API 工作。包括 Application Visits(通过链接点击或 Turbo.visit()触发,页面缓存,浏览器 URL 改变)、Restoration Visits(使用浏览器“后退”和“前进”按钮,尝试使用缓存)、处理表单提交(与导航类似,后端响应有特定要求)、Turbo Drive 事件(如 turbo:load、turbo:before-fetch-request 等)、Visit Confirmations(添加 data-turbo-confirm 属性要求用户确认导航)、禁用 Turbo 特定请求(添加 data-turbo="false")、浏览器原生视图转换(添加 meta 标签启用)、预加载和预取以提升性能(preload 和 prefetch 机制)、持久化元素(添加 data-turbo-permanent 属性)。
  • Turbo Frames:将 DOM 分解为可管理的部分,提供与 Turbo Drive 类似的机制但作用于 <turbo-frame> 元素。可以异步加载单个 DOM 部分(eager 和 lazy 加载),目标任意 Turbo Frame(通过 data-turbo-frame 属性),促进新的视图组成思维,还可指定帧导航的动作(如 advance),并发出相应事件(如 turbo:frame-load 等)。
  • Turbo Streams:通过在服务器上指定 DOM 操作并以特殊格式传递到客户端来执行 DOM 操作,有多种发送方式(表单提交、Websockets 等)。包含 Turbo Stream 消息(指定动作和目标的 <turbo-stream> 元素)和 Turbo Stream 交付机制(表单提交后和 Websockets 接收时插入 DOM 并执行),且不同发送方式的作用范围不同。
  • Turbo Morphing:利用 idiomorph 库实现形态变化,在 Turbo 中作为方法指定在动作上(如 replace with method="morph"),还可发送 refresh 动作让客户端重新请求并形态变化,可通过添加 data-turbo-permanent 属性保留元素。
  • 用例与限制:在 HTML 主要服务器渲染且依赖 HTTP 标准的 Rails 应用中表现出色,适用于有限交互性的标准 CRUD 应用;但在高度交互应用中可能表现不佳,可能需要使用全栈 SPA 或混合方法。
  • 示例应用:以使用 LLM 聊天的示例应用为例,构建了包含 Conversation 和 Message 模型的应用,通过 Turbo 实现了创建新对话、添加消息、响应提示、总结对话等功能,并解决了相关问题(如表单提交在模态框中的处理、视图过渡的优化等)。
  • 结论:深入探讨了 Hotwire 和 Turbo 在 Rails 应用中的实现细节,包括各种技术的原理和用法,展示了其创建动态响应式用户界面的能力,但也指出了一些挑战和局限性,强调要理解其优势和局限性并合理使用,以创建快速响应的应用。
阅读 89
0 条评论