课程简介

你想编写一些客户端代码？

“我需要一个网站，”客户说。

“太好了，”你心想。Rails 是一个可靠的选择。对于小团队来说，它依然是让开发效率达到大团队水平的最佳方式。你已经准备好了，开始思考估算、建模数据结构……

“我希望它看起来很酷，有很多动态效果，而且非常互动，”客户补充道。

“唉，”你心里嘀咕。这可引入了 JavaScript，随之而来的是大量决策：用什么语言？不只是原生 JavaScript，还有许多能编译成 JavaScript 的语言：TypeScript、Elm、ClojureScript。用什么框架？选择多到数不清：React、Vue、Ember、Stimulus、Svelte、Preact 等等。如何打包代码和 CSS？该用 Rails 的资产管道还是 Webpacker？Turbolinks 呢？不是刚更新过吗？

突然间，你被新增的复杂性压得喘不过气。

但 Rails 也能帮你应对客户端开发。Ruby on Rails 6.1 提供了工具，帮助你与 JavaScript 生态系统协作，打造出色的前端体验。在这门课程中，我将向你展示如何利用 Rails 生态系统中的前端工具（Stimulus、Turbolinks、Webpacker）以及 JavaScript 生态系统中的工具（webpack、TypeScript、React），来增强标准 Rails 应用的用户体验，构建出优秀的基于 Rails 的应用。

所以，客户想要的那个互动网站？完全没问题。

先决条件

对网页开发有整体了解会有所帮助。但掌握 Rails 的基础知识是学习本课程的必要前提！

基本假设

Rails 是一个具有明确立场的框架，而这门课程也是有明确立场的。对 Rails 来说，“有立场”意味着如果你愿意按照 Rails 核心团队推荐的方式组织程序，某些任务就会变得更容易。而本课程的“有立场”并非要展示 Rails 和 JavaScript 所有可能的组合方式，而是聚焦于最实用的工具。

我们首先确立一个关键观点：我们将使用 JavaScript 来增强 Rails 应用，而不是用 JavaScript 构建一个完全独立的单页应用（SPA），仅将 Rails 当作 API 使用。

我不建议开发 SPA 的基本理由是：Rails 和浏览器的默认行为已经为你处理了大量复杂逻辑。转向 SPA 结构意味着你需要自己重新实现这些功能。虽然前端框架近年来在处理复杂性方面进步显著，但就目前而言，我认为对于大多数应用，Rails 依然更简单。

当然，也有合理的情况适合使用 SPA。如果你的用户体验与常规网页结构差异极大，以至于浏览器和 Rails 提供的现有行为几乎帮不上忙，那么 SPA 就显得更有吸引力。如果后端已经是为移动应用或外部服务提供支持的 API，那么 SPA 也可以作为该 API 的消费者，避免重复编写视图层逻辑。

然而，根据我的经验，大多数情况下，对大多数团队而言，从利用 Rails 的视图功能和浏览器行为出发，才是打造优秀应用的最佳起点。

基于这一前提———后端使用 Rails，前端加入一定交互———仍然存在广泛适用的工具、架构和技术可供选择。我们将探索这个空间，并深入研究不同形式的 Rails 与 JavaScript 协作方式。

我们来创建一个应用

在讨论前端结构之前，我们需要先有一个应用，以便为所有前端结构提供依托。

我创建了一个名为“北北南音乐节”的虚构应用，这是一个有多支乐队在不同场次演出的音乐节。该应用包含所有演出的时间表和场地信息。

这个应用本身并不复杂：我使用 Rails 的生成器快速搭建了一个基础管理界面，但它的核心结构只服务于本课程中我们要管理的两个页面：时间表页面和演出详情页面。

时间表页面展示了整个音乐节的所有演出、表演者和时间安排。我们将在其上添加基本的显示/隐藏功能，以及更复杂的日期筛选和搜索功能。

演出详情页面则为每场演出提供简化的剧场布局图，并允许用户选座，模拟购票流程。我们将在这个页面上实现更复杂的客户端行为，远超简单的表单增强。

应用的数据模型如下：

• 音乐节包含多个演出，每个演出在特定时间举行。
• 每场演出位于一个场地，每个场地有若干排座位，每排有固定数量的座位（我知道这与真实场馆相差甚远，但为了简化问题，我们暂时忽略现实中的复杂情况）。
• 每场演出包含一个或多个节目（gig），每个节目将一支乐队与一场演出关联，并记录其出场顺序和时长。
• 每场演出包含已售出的票券，每张票关联一个具体的座位（行和列）。

以下是数据模型的示意图：

我选择了 Bulma CSS 框架，因为它外观美观，对 HTML 标记添加的类名较少，且通常能从类名直接理解其样式作用。

时间表页面应大致呈现如下效果（你的随机数据会有所不同）：

查看应用的实际运行效果

这是我们在课程初期将要构建的应用。当服务器启动后，请点击“你的应用可在以下地址找到：”旁边的链接查看。