4、使用Hotwire和Turbo构建无JavaScript前端交互

使用Hotwire和Turbo构建无JavaScript前端交互

在之前的操作中，我们完成了Rails和TypeScript的安装。接下来，我们将借助Hotwire和Turbo，在不编写自定义JavaScript的情况下，为应用添加丰富的动态行为。

Hotwire概述

Hotwire是Basecamp团队开发的客户端工具包，用于支持Hey电子邮件应用。其核心目标是通过向服务器发送常规HTTP请求，接收页面的HTML片段，并将其插入到DOM的正确位置以实现页面更新。这种方式将大部分逻辑移至服务器，用少量通用的客户端操作替代复杂的特定客户端代码，避免了客户端和服务器端逻辑的重复。

Hotwire的主要理念如下：
- 服务器通过发送渲染后的HTML与客户端通信，HTML响应可能包含插入位置的元数据。
- 应用的业务逻辑应放在服务器端。
- 特定的客户端逻辑仅用于服务器无需关注的界面元素。
- 尽可能通过向服务器请求HTML来替换或增强现有页面的部分内容。
- 客户端逻辑也可通过添加和删除CSS类来处理。
- 仅在服务器端HTML或CSS操作无法满足需求时编写自定义JavaScript。

Hotwire团队称约80%的客户端交互可通过“HTML over the wire”方式管理，且至少一半的客户端代码仅用于操作CSS。使用Rails部分视图文件的约定，尤其是ActiveRecord部分文件的命名约定时，Hotwire效果更佳。

Turbo安装与简介

Hotwire目前由Turbo和Stimulus两部分组成。Turbo负责管理对服务器的HTML请求并正确处理响应