使用 Rails 进行客户端开发简介

客户端 Rails

每个现代 Web 应用程序都会使用客户端功能来提升用户体验。尽管 Rails 是一个服务器端框架，但它始终提供了一些工具，使向浏览器交付客户端代码变得更加容易。Rails 在简化客户端开发方面的能力，从一开始就是其核心优势之一。

在本课程中，我们将从一个基础的 Rails 应用开始，逐步添加客户端交互功能。JavaScript 生态系统包含许多与 Rails 配合使用的工具。为了我们的目标，我们将重点探讨两种与 Rails 高度契合的模式。

1. 第一种模式中，服务器通过发送 HTML 与客户端通信，客户端的主要任务是将这些 HTML 渲染到页面的正确位置，并添加一些仅限客户端的交互行为。

2. 第二种模式中，服务器通过发送数据（通常是 JSON 格式）与客户端通信，客户端负责将这些数据转换为 HTML，并处理所有客户端专属的交互逻辑。

Hotwire

为了演示第一种模式，我们将使用来自 Basecamp 的 Hotwire 工具集，它可视为 Rails 的官方扩展组件。

Turbo

Hotwire 包含 Turbo，这是一个无需编写自定义 JavaScript 即可管理用户导航和与服务器通信的库；以及 Stimulus，用于支持用 JavaScript 编写的客户端交互。

Stimulus

Stimulus 的设计初衷是作为我们已有的 HTML 标记的扩展。它特别适合处理那些状态较少、或主要由服务器管理状态的小型交互场景。

注意： 另一个用于与原生移动设备交互的工具 Strada 目前尚未发布。

React

许多框架支持基于 JSON 的交互模式，并在客户端自行生成标记。我们将使用 React 来代表这类工具。React 使用一种结合了 JavaScript 和 HTML 的自定义语法（称为 JSX），替代原有的 HTML 标记。当数据发生变化时，React 会自动更新 DOM，非常适合需要在客户端维护大量状态的复杂交互场景。

TypeScript

此外，我们还将使用两个更基础的工具。我们将使用 TypeScript 编写代码，这是一种在 JavaScript 基础上扩展的语言，允许我们为任意变量、类属性、函数参数或函数返回值指定类型。

TypeScript 广泛使用的原因在于它能捕获 JavaScript 中常见的许多错误。它的语法与 JavaScript 类似，但增加了一些额外特性。课程前几章将介绍我们在实际开发中所需的 TypeScript 语法，之后将在 TypeScript 与高级 TypeScript 相关课时中深入探讨 TypeScript 的更多内容。

Webpacker 与 webpack

同时，我们将使用 Webpacker 将这些组件整合在一起。Webpacker 是 Rails 提供的一个工具，为 webpack 构建工具提供了合理的默认配置和实用的约定。

最后，webpack 允许我们以任意结构组织代码——无论是 JavaScript、TypeScript、CSS 还是静态图片——并将其打包成浏览器易于加载和管理的形式。

接下来，我们将安装这些工具，并展示 Hotwire 和 Turbo 如何让我们在不编写自定义 JavaScript 的情况下实现强大功能。但在开始编码之前，让我们先讨论一下 Web 应用、Rails 以及 JavaScript 的基本概念。