什么是“JAM 堆栈”？你应该使用它吗？

JAM 堆栈，通常风格化为 Jamstack 或 JAMStack，是指使用J avaScript、A PI 和M arkup开发以客户端为中心的网站和应用程序。建立在 Jamstack 上的系统将在客户端运行其所有逻辑，消除服务器端组件。

该术语由Netlify创造，描述了一种提供更高性能、更好的安全性和改进的开发人员体验的 Web 开发方法。Jamstack 网站不会在每次页面加载时产生服务器往返，而是在浏览器中自给自足。

静态站点是否使用 Jamstack？

仅使用 HTML、CSS 和 JavaScript 构建的静态站点本质上是客户端，没有后端编程。通过这种方式，它们符合 Jamstack 的标准。

Jamstack 超越了简单的网站和博客。静态站点仅使用“标记”方面，可能使用一点 JavaScript，但 Jamstack 应用程序可能仍具有后端和持久数据存储。

与传统 Web 应用程序相比的不同之处在于数据如何到达商店。在旧系统中，您可能有一个 HTML 表单，当您提交页面时，它会在 SQL 数据库中创建记录。您需要具有支持基础设施的自定义后端堆栈。
Jamstack 应用程序将通过 API 发送数据来降低服务器端的复杂性。您仍然可以实现自己的后端，但使用第三方托管解决方案（例如 Netlify 或 Google 的 Firebase）也很常见。现在，您需要的唯一基础设施是一个基本的 Web 服务器，用于向用户的浏览器提供 HTML 和 JavaScript。

关键组件

以下是 Jamstack 的三个组成部分的回顾：

• JavaScript – 整个体验由用户浏览器中的 JavaScript 提供支持。你可以使用任何你想要的框架，无论你喜欢
  React、Vue、Angular 还是你自己的 vanilla 解决方案。
• API – 数据通过 API 流入和流出用户的浏览器。如果需要提交表单，其输入值应由 JavaScript
  捕获并发送到您的后端或第三方服务。这通过让您在数据提取发生时显示加载微调器和进度条来增强用户体验。
• 标记- 内容是从 HTML 和 Markdown 等人类可读的标记格式创建的。这些可以按原样提供给浏览器以供 JavaScript
  解析。无需托管复杂的 CMS 即可创建和编辑内容。您可以通过编写Markdown
  文件并将其提交到项目的源代码控制存储库来添加新的博客文章。

整体方法看到标记和 JavaScript 从您的 Web 服务器进入用户的浏览器。然后，JavaScript 在您的用户和后端存储 API 之间进行调解，以促进您需要的任何其他数据交互。

更流畅的开发者体验

利用 Jamstack，您可以专注于提供功能和改善用户体验。您无需花时间配置或维护成本高昂的后端基础架构。相反，您可以使用平台即服务API 来获取和保存应用程序的数据。

Jamstack 与基于 Git 的开发和部署工作流程非常匹配。由于您的堆栈实际上只是一个 Web 服务器，因此您可以将所有内容表示为存储库中的纯文本文件。持续交付管道可帮助您快速发布更新，而无需重新配置服务器。
大多数情况下，您不会自托管任何基础架构组件。Jamstack 系统通常直接部署到静态文件主机，如 Netlify、Firebase、GitHub Pages，甚至是普通的 S3 存储桶。或者，您可以使用 Docker 将您的应用程序容器化并将其启动到Kubernetes 集群中。

无论哪种方式，您都无需手动复制文件或调整服务器设置——您正在编写代码并合并到您的主分支中进行部署。最后一部分通常是像Cloudflare这样的 CDN ，它位于您的 Web 服务器解决方案的前面，缓存内容以进一步提高最终用户的性能。

解耦组件

Jamstack 允许您解耦应用程序的各个组件。在传统的 CMS 驱动的网站中，您的代码、内容和样式一起存在于一个系统中。您需要整个 CMS 来提供任何单一功能。
使用 Jamstack 可以完全分离这些组件。您的 Web 服务器提供代码，而外部平台提供商处理您的数据。这为您提供了更大的灵活性，可以在您的需求发生变化时切换堆栈的各个部分。

最终用户也受益于更具弹性的体验。即使数据存储出现故障，您仍然可以提供核心标记和 JavaScript 以显示正确的错误页面。加载时间更快，因为浏览器仅在第一次与您的服务器联系时获取代码，而不是数据。

与服务器渲染方法相比的一个关键区别是 Jamstack 站点始终是预先构建的。您提供的是完全静态的资产，而不是在服务器收到的每个请求上组合代码和数据。您的构建过程将在每次部署时运行一次编译步骤，创建您的 Web 服务器发送到浏览器的标记。这提高了效率和性能。

缺点

Jamstack 最显着的缺点可能是相同的基于代码的更新模型，这通常使它如此吸引人。内容作者和编辑通常更难参与其中，因为他们通常需要学习用 HTML 或 Markdown 编写标记。对于熟悉图形所见即所得体验的非技术作家来说，这可能会令人生畏。

另一个限制是您对第三方平台的固有依赖性。Jamstack 鼓励使用可能在一夜之间消失或改变其产品的外部 API 和托管服务提供商。虽然运行您自己的基础架构会带来维护问题，但它也让您确信您的堆栈将在未来很长一段时间内保持正常运行。
也有可能超出 Jamstack。如果您使用的平台无法满足您的要求，则实施繁重的动态功能可能会导致问题。您最终可能会在产品生命周期的中途使用自己的后端。如果您主要提供文本、图像和一些简单的 API 调用，那么 Jamstack 应该适合您。对于更复杂的场景，找到可以插入 JavaScript 和标记的现成解决方案可能会更棘手。

获取工具

您只需一个文本编辑器和一个终端就可以创建 Jamstack 应用程序。选择一个托管服务提供商，安装它的 CLI，编写一些 HTML 文件，然后运行 ​​deploy 命令来实时推送您的站点。

在实践中，大多数人选择使用某种脚手架来使其更容易上手。如果您正在构建 Web 应用程序，则可以使用 JavaScript 框架从客户端路由和导航中受益。对于静态网站，您可能希望使用Jekyll、Hugo或Gatsby等静态网站生成器，让您的主题与内容分开。

通过集成第三方 API、托管您自己的微服务或依赖使用公共云平台创建的无服务器功能来添加动态功能。基于 JavaScript 的解决方案可以轻松实现表单、搜索、电子商务和其他复杂功能，而无需自己编写一行后端代码。您可以在 GitHub 上找到可以集成的理想服务的公共列表。

结论

Jamstack 是一种 Web 应用程序开发方法，它倾向于将尽可能多的代码放入客户端。JavaScript 和标记被发送到浏览器；然后数据通过 API 交互到达您的后端服务。

随着过去几年浏览器 API的改进， Jamstack 越来越受欢迎。在TypeScript 等方言的帮助下，JavaScript作为一种语言也已显着成熟。这些发展使得对前端的独家定位成为更多团队更现实的提议。
使用 Jamstack 方法通常可以简化您的应用程序，促进更快的开发和更大的可扩展性。通过减少要保护的服务器端端点，您的安全状况会得到改善，并且您的维护负担也会减轻。Jamstack 不能满足所有应用程序，但是当您在具有相对宽松的后端功能的前端优先系统上工作时，值得考虑。

最后，不要强调 100% 以“Jamstack 方式”做事——这种方法可以解释。这个概念实际上是通过利用 JavaScript 和 API 的力量将前端放在首位。这并不意味着您不能运行自己的基础架构或编写自己的后端。

专注于解耦堆栈中的组件，加快客户端加载时间，并在浏览器需要时通过 API 异步获取数据。这些技术有助于创建具有更好用户体验的更具弹性的应用程序，充分利用现代网络的功能。