使用 Rails 进行客户端开发简介
了解 Rails 这一服务器端框架如何通过某些工具在客户端也得到有效使用。
客户端 Rails
每个现代 Web 应用程序都会使用客户端功能，以提升最终用户的体验。尽管 Rails 是一个服务器端框架，但它始终提供了一些工具，使向浏览器交付客户端代码变得更加容易。从 Rails 诞生之初，其简化客户端开发的能力就是一大卖点。
随着时间推移，客户端工具变得越来越强大，这固然很好，但也随之变得更加复杂。不过有一点始终未变：Rails 依然对如何处理客户端工具持有明确的观点。
在本课程中，我们将从一个基础的 Rails 应用开始，逐步添加客户端交互功能。JavaScript 生态系统中有许多工具可以与 Rails 配合使用。我们将聚焦于其中几个与 Rails 兼容良好、支持简单逻辑且我个人偏好的工具。
我们将使用的两个工具是用于构建客户端展示代码的库和框架。
### Stimulus 第一个工具是 [Stimulus](http://stimulusjs.org)，它来自与 Rails 同一团队（Basecamp）的支持者。
Stimulus 的设计目标是作为你已有的 HTML 标记的扩展，非常适合处理不需要管理大量状态的小型交互场景，或者当大部分状态由服务器端应用管理时的情况。
### React
第二个工具是 React。React 使用一种结合了 JavaScript 和 HTML 的自定义语法（称为 JSX）来替代传统的 HTML 标记。当数据发生变化时，React 会自动更新 DOM，适用于更复杂、规模更大的交互场景，尤其适合在客户端存储状态的应用。
此外，我们还将使用两个更基础的工具：TypeScript 和 Webpacker。
### TypeScript 我们将编写的代码采用 [TypeScript](https://www.typescriptlang.org)，这是一种在 JavaScript 基础上扩展的语言，允许我们为任意变量、类属性、函数参数或函数返回值指定类型。我喜欢使用 TypeScript，因为它能帮我发现很多原本在 JavaScript 中容易犯的错误。TypeScript 的语法本质上是 JavaScript 加上一些额外特性。在前几章中，我会根据需要逐步讲解 TypeScript 的语法，之后再深入讨论 TypeScript 的完整概念。
最后，我们将使用 Webpacker 将这些组件整合在一起。Webpacker 是 Rails 提供的一个工具，为 webpack 构建工具提供了合理的默认配置和实用的约定。
webpack 允许我们将编写的所有代码——无论是 JavaScript、TypeScript、CSS 还是静态图片——按照我们希望的结构组织，并最终打包成浏览器易于加载和管理的形式。
我们将首先学习这些工具的基本用法，并在不依赖框架的情况下，使用 TypeScript 添加交互功能。这将帮助我们熟悉 TypeScript，同时也能直观地看到无框架开发的一些局限性。
在本章中，我将演示如何创建初始代码版本，通过添加 TypeScript 代码来设置 Webpacker。到本章结束时，我们将准备好引入一个框架，以自动处理部分重复性的样板代码。