Jamstack 简介——Web 开发的新前沿

作为一名 Web 开发者，你可能听说过 Jamstack。它是 Web 开发领域的热门词汇。但它到底是什么呢？

Jamstack 是 JavaScript、API 和 Mark-up 的缩写。它是一种架构，承诺提供更快、更便宜、更安全的网站。而且，越来越多的网站正在迁移到 Jamstack。

需要明确的是，JAMstack 并非一项特定的技术，也不受任何单一实体驱动或控制。它是一场由社区主导的运动，是一个包含一系列标准和最佳实践的架构，旨在提供更快、更安全的网站。

但要理解它为何如此具有革命性，我们必须了解什么是堆栈，传统网站使用什么技术，以及为什么它们变得越来越过时。

旧版网站

市面上有很多 Web 开发技术栈：LAMPstack、MEANstack、WAMPstack等等。它们指的是所使用的技术，例如 Linux、MySQL 和 PHP。虽然它们各自拥有不同的技术和应用，但它们的工作原理基本相同：传统网站是在服务器上运行的程序，从数据库查询数据，并在用户每次加载页面时构建每个页面。WordPress 网站就遵循这种架构。

这种方法有其优点 - 它们往往更容易被普通人运行，它们可以高度动态，因为页面仅在加载时构建，并且它们不太依赖第三方提供商的动态功能 - 因为它们在文字服务器上运行！

然而，传统网站往往速度慢（尤其对于网络连接不稳定的网站而言），扩展起来更困难、成本更高，而且安全性也更低。因此，Netlify 首席执行官 Mathias Biilmann 在 2015 年创造了“ JAMstack”一词，该词后来更名为Jamstack，指的是他和联合创始人 Chris Bach 在 Netlify 共同开发的一种新型 Web 架构，其他 Web 开发者也开始探索这种架构。

Jamstack

无需服务器处理请求，内容分发网络 (CDN) 会提供预先构建的 HTML 页面并发送给用户。无需服务器参与。

但是，仅仅因为没有服务器参与网页服务并不意味着整个过程完全没有服务器参与。要理解其中的原因，我们必须深入研究 Jamstack 的三个组成部分：

J 代表JavaScript

JavaScript 于 1995 年由 Netscape 引入，如今已成为 Web 的代名词。它提供了一种将代码逻辑嵌入网站的方式，使网站能够响应用户的操作（例如：复选框、表单提交、行动号召）——每当网站的功能不再仅仅显示静态信息时，这都要感谢 JavaScript！

Jamstack 使用客户端 JavaScript 以及 React 和 Vue 等库来设计和制作感觉和行为像移动应用程序的 Web 应用程序。

您可能已经熟悉流行的 JavaScript UI 库，例如React、Vue和Angular。

A代表API

应用程序编程接口 (API)允许两个或多个程序相互通信。借助 API，加密货币交易机器人等可以在无需人工干预的情况下与加密货币交易所进行通信。

即使我们将网站的前端与后端分离，也并不意味着我们不能使用任何服务器功能。第三方服务可以提供动态功能，例如数据库访问、支付和身份验证。Jamstack 采用微服务方法，这与单体架构方法不同（我将在下文中更详细地介绍这一点）。

无头 CMS 是 API 的另一个示例。普通的内容管理服务(CMS)（例如 WordPress）会同时处理网站内容和前端。Jamstack 将其解耦，这意味着无头 CMS 只处理内容，而将前端留给静态站点生成器。

这些服务与实际网站的分离提供了更高的可移植性、更快的速度和更低的攻击风险。

M 代表加价

Jamstack 中的 M 部分可能是最重要的部分。它代表Mark-up（标记）。这意味着向用户提供静态 HTML 文件。

但这不仅包括网站如何向用户提供服务——几乎所有网站都以某种形式包含 JavaScript、API 和标记——M 还包括页面最初是如何制作的。生成静态 HTML 文件通常有两种方法：

1. 手动输入：您可以自己输入 HTML 文件。这更适合小型、简单的网站。
2. 静态网站生成器：这是 Jamstack 网站最流行的方法。SSG 根据原始数据（通常使用 Markdown 等轻量级标记语言编写）和模板生成静态 HTML 文件。我将在另一篇文章中更详细地介绍这一点。

由于动态网站相较于传统静态网站拥有诸多功能和优势，静态网站常常因过于基础而受到诟病。虽然 Jamstack 网站是静态的，因为静态 HTML 文件会提供给最终用户，但API和标记也使 Jamstack 网站具有相当的动态性。

CDN

与传统的网络服务器（通常位于同一位置并提供服务器生成的动态页面）不同，内容分发网络 (CDN) 的地理位置分散，将网站数据存储在遍布全球的多个服务器上，以便从地理位置上距离用户最近的服务器处理请求。CDN 仍然是服务器，但由于它们是分布式的，因此您无法准确定位您的网站托管在哪台物理服务器上。

CDN 本身无法生成网页，但由于 Jamstack 网页是预先构建的，因此可以从 CDN 提供服务。

由于 CDN 托管的是静态网站，因此没有带宽和处理能力的限制，从而降低了网站宕机的风险。此外，CDN 的价格也更便宜——事实上，大多数 CDN 都提供免费托管服务！

无服务器托管提供商的例子有Netlify和Vercel。

微服务与单体架构

简而言之，传统网站是作为一个整体构建的。它们的所有功能——评论、联系表单、身份验证——都是内置的。这些功能仍然可以以插件的形式出现（例如 WordPress），但它们仍然是整体网站结构的一部分，而不是外部的。这种模型被称为单体架构。

Jamstack 采用微服务方法，将网站的各部分功能拆分并通过 API 外包给第三方。例如，可以使用 Square 或 Paypal 等支付服务提供商来处理付款，或使用 Auth0 进行身份验证。

The New Stack提出的一个实用类比是机票预订网站。预订机票的流程包含许多子步骤，在本场景中，这些子步骤包括预订机票、向客户开具账单以及发送机票预订成功的确认邮件。在单体架构中，所有三个流程都构建在一个应用程序中。然而，在微服务架构中，每个阶段都独立运行，可以外包给第三方。网站的核心功能可能是预订机票，但开具账单可以外包给 Stripe 这样的支付公司，而电子邮件发送可以外包给 Mailchimp 这样的电子邮件公司，所有这些都通过 API 实现。

结论

Jamstack 网站通常被称为静态网站，因为它们向用户提供服务的方式不同，但这有时会让人误以为它们不能具有动态功能，而实际上它们可以通过使用 API 和无头 CMS 来实现。

Jamstack 正在席卷整个 Web 开发领域。许多经验丰富的 Web 开发人员正在转向 Jamstack。或许你也该换个平台了，不是吗？

资源

静态网站生成器 - WordPress 的替代方案

Jamstack 到底是什么？

Netlify 博客

信息图 - Jamstack 简介