目前大火的 Jamstack 到底是什么？

作者：Timothy McCallum、Miley Fu 与 Vivian Hu

Jamstack 是一套用于构建现代互联网应用的技术栈。它在边缘云、serverless 计算、以及大前端有广泛的应用，也在今年受到资本市场的追捧。它到底有什么魔力呢？这篇文章将带你了解 Jamstack 的概念以及开发范式。我们也将讨论 Rust 与 WebAssembly 这样的新兴技术如何让 Jamstack 更快，更安全，更易用。

什么是Jamstack?

Jamstack 是一种构建网站和 web 应用程序的新方法。Jamstack 的 Stack 指的是许多独立，但是可以组合，的技术层。当它们结合在一起时能够提供一个完整的 web 应用。

Jamstack 架构中的 JAM 是指客户端 JavaScript、可重用的后端 API，和用户界面的 Markup，比如 HTML 与 CSS。

Jamstack 的关键特征是前端 Web UI 与基于 API 的后端服务之间的清晰区分。与垂直集成的传统 Web 应用程序不同的是， Jamstack 应用程序是模块化和分散式的：UI 可以通过静态网页服务器、CDN、甚至基于区块链的存储进行分发；后端 API 服务可以部署在云上，也可以由边缘节点就近提供服务。

为什么 Jamstack 超级赞?

从技术栈比较的角度来看，用于开发 Web 应用程序的另一个常见技术栈是 LAMP (Linux, Apache, MySQL, PHP) 以后其后的 MEAN (MongoDB, Express.JS, Angular, Node.JS)。

LAMP 概览

K7.india at English Wikipedia, CC BY 3.0 https://creativecommons.org/licenses/by/3.0, via Wikimedia Commons

从上面的图表可以看出，从应用开发者的角度，当使用 LAMP 技术栈时，有很多的组件可以安装，并且可以同时配置和维护。LAMP 应用的用户界面是由后端服务器动态生成的。绝大部分逻辑与计算都在服务器上。前端的浏览器只负责渲染。

JAM 概览

与 LAMP 技术栈相比，Jamstack 在许多不同之处，这对开发者构建网站或 web 应用的方式有着深远的影响。从部署架构上讲，Jamstack 应用的用户界面是通过“编译”生成的静态网页，从而大大提高了性能，安全性，以及降低了服务端的复杂度与计算负载。

从开发者的角度来看，一些主要的区别包括:

Jamstack 开发者不需要安装或管理操作系统(如 Linux)
Jamstack 开发者不需要管理安全策略(服务器防火墙)
Jamstack 开发者不需要安装或管理应用程序数据库(如 MySQL)
Jamstack 开发者可以在不使用 HTTP (Web)服务器(如 Apache)的情况下部署 Web 站点或 Web 应用

总体而言，选择使用 Jamstack 创建网站和 web 应用有4个主要好处: 成本效益、性能改进、更好的安全性和更好的用户/开发者体验。

JAM 组件

让我们先快速看一下构成 JAM 的 3个组件; Javascript、APIs 和 Markup。然后，我们会重点关注动态可编程的 API 组件。

Javascript

毋庸置疑，JavaScript 是网络上最流行的编程语言之一。Javascript 允许 Web 应用开发者在 HTML 页面中轻松地进行请求后端服务产生的动态内容。这些安全的 HTTP 请求(由客户端发出)可用于调用远程 API 端点并将结果返回给客户端(应用)。

API

API 是以微服务的形式访问动态数据的一种很好的方式。互联网上有许多公开可用的 API 端点，它们可以返回大量很有用的数据。其中一个例子是太阳系开放数据 API，它可以返回所有行星、卫星、矮星、彗星和小行星等各种数据。

这里有一个例子，说明了我们如何通过 API 获得水星的轴向倾斜。

[https://api.le-systeme-solaire.net/rest/bodies/mercury](https://api.le-systeme-solaire.net/rest/bodies/mercury)

这个 API 服务节点返回相当多的数据，如下所示。

{
 "id": "mercure",
 "name": "Mercure",
 "englishName": "Mercury",
 "isPlanet": true,
 "moons": null,
 "semimajorAxis": 57909227,
 "perihelion": 46001200,
 "aphelion": 69816900,
 "eccentricity": 0.20560,
 "inclination": 7.00000,
 "mass": {
  "massValue": 3.30114,
  "massExponent": 23
 },
 "vol": {
  "volValue": 6.08300,
  "volExponent": 10
 },
 "density": 5.42910,
 "gravity": 3.70000,
 "escape": 4250.00000,
 "meanRadius": 2439.40000,
 "equaRadius": 2440.53000,
 "polarRadius": 2439.70000,
 "flattening": 0,
 "dimension": "",
 "sideralOrbit": 87.96900,
 "sideralRotation": 1407.60000,
 "aroundPlanet": null,
 "discoveredBy": "",
 "discoveryDate": "",
 "alternativeName": "",
 "axialTilt": 0.0352
}

正如这里能看到的，到目前为我们无需设置任何服务器基础设施就可以访问动态内容。让我们快速查看如何使用 JAM 管理该项任务，即几行 Javascript 来得到数据，以及一些 markup 来将数据作为有效信息展示。

Markup

Markup 使我们可以非常容易地创建视觉上令人满意的网页。为了演示这一点，我创建了一个简单的 HTML 页面(源代码在这里)，你可以试一下，如下图所示。

NASA/Johns Hopkins University Applied Physics Laboratory/Carnegie Institution of Washington. Edited version of Image:Mercury in color — Prockter07.jpg by Papa Lima Whiskey., Public domain, via Wikimedia Commons

你会注意到，这个 demo 仅使用 GitHub pages托管。当然，你也可以将 HTML 源代码复制到本地的文件夹，并在 PC 本地将它打开。根本不需要运行服务器。使用内容分发网路(CDN)还可以帮助你将客户端的响应时间减到最少。

如果你想生成一个更为花哨的静态站点，有很多软件产品可以帮助你，比如Gatsby 、Hugo、Netlify 、Vercel 等等。

无需服务器，创建和发布你自己的 API 端点

SpaceX, CC0, via Wikimedia Commons

刚刚演示了我们不费吹灰之力地从公开可用的公共端点获取数据。但是……

如果你可以创建和部署自己的 API 端点，但不想要任何额外的服务器，有没有什么办法