目前大火的 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 概览

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

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

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

JAM 概览

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

与 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 页面(源代码在这里)，你可以试一下，如下图所示。

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

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 端点

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

SpaceX, CC0, via Wikimedia Commons

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

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

我们不仅可以访问开放数据(如上所示) ，编写自己定制的逻辑来处理数据、图像和视频。我们还可以与其他人共享我们开发的 API 端点(自定义函数) 。

Serverless 服务

顾名思义，serverless 服务让开发者在不运行自己的服务器的情况下提供 API 服务。开发者只需要上传一段代码就可以提供服务。公有云一般来说提供两种 serverless 服务。

Database-as-a-service (DaaS) 数据库服务为 Jamstack 应用提供基于云数据库的存储与查询服务。它用来管理应用的状态，比如用户数据的存储。
Function-as-a-service (FaaS) 函数服务提供无状态的计算。它通常支持多种编程语言与框架，与数据库或者云存储服务一起为 Jamstack 应用提供逻辑后端。

细心的读者可能已经发现，在公有云上部署 serverless API 服务并不完全适合 Jamstack 的理念。J 与 M 都已经通过边缘云部署了，为什么 A 不行呢？在边缘云上部署 serverless 函数的需要新一代的轻量级软件容器。这是 CNCF 旗下的 WasmEdge 这种 WebAssembly 沙箱的重要应用场景。

Rust 函数计算服务

WasmEdge 可以部署在边缘云与边缘设备上。它符合 OCI 标准，能被 CRI-O 与 Kubernetes 这样的工具调度与管理。WasmEdge 可以让开发者用 Rust 语言写安全高性能的函数服务，也可以支持为场景定制的 DSL 低代码解决方案。

在这篇文章，我们用 Second State 公司基于 WasmEdge 发布的一个免费 FaaS 服务作为示例，来演示怎么用 Rust 语言开发部署 Jamstack 应用的 serverless API 服务。

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

Second State 提供了跨云的 FaaS 基础设施，可以使用它来创建、部署和调用自己的定制函数。无论你想创建一个全新的 web 应用，迁移你现有的 web 应用，还是仅仅[增强你 web 应用的客户端] (https://medium.com/wasm/an-easy-way-to-boost-your-client-side-javascript-using-webassembly-wasm-de35c53cc2a2)，基于 WasmEdge 的 FaaS 都是很好的选择。甚至不需要用户名和密码。所有的调用都是通过开放的 Web 、通过安全的 HTTP 请求执行的。几分钟内就可以部署一个自己的应用。

这里有许多精彩的预建 demo 和教程，使你能够学习如何创建自己的 FaaS 端点。这些预构建函数(demos)包括:

图像分类 (教程、demo)
面部识别 (教程、 demo)
发送邮件 (教程、demo)
给图片打水印 (教程、demo)
在视频中识别食物 (教程、 demo)
解迷字母异位词

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

你也来试试吧！

这里的要点是，你可以创建自己的代码执行服务，即在不提供任何基础设施的情况下运行自己的自定义代码。Second State 的 FaaS“允许开发者在不管理服务器的情况下在云中上传和执行代码”。

下一步

这篇文章，我们介绍了 Jamstack 的基本概念，以及如何基于 WasmEdge 根据自己的需求快速开发出一个动态的 API。下一篇，我们将介绍如何在目前大火的 Vercel 中使用 WebAssembly Runtime/WasmEdge 在 Jamstack 应用中使用 Rust 函数来编写 API。

夏歌