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

e39f24385f93b86

该JAM栈,常常作为程式化或Jamstack JAMStack,是指使用Ĵ avaScript,蛋白酶抑制剂,和中号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、FirebaseGitHub 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 框架从客户端路由和导航中受益。对于静态网站,您可能希望使用静态网站生成器,如JekyllHugoGatsby,让您将主题与内容分开。

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

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

Jamstack 的受欢迎程度随着过去几年浏览器 API的改进而增长。在TypeScript 等方言的帮助下,JavaScript作为一种语言也显着成熟。这些发展使前端的独家目标成为更多团队的更现实的主张。

使用 Jamstack 方法通常可以简化您的应用程序,促进更快的开发和更大的可扩展性。由于需要保护的服务器端端点更少,您的安全状况会得到改善,并且维护负担也会减少。Jamstack 无法满足所有应用程序的需求,但是当您在前端优先且后端功能相对宽松的系统上工作时,值得考虑。

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

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

未经允许不得转载:表盘吧 » 什么是“JAM 堆栈”?你应该使用它吗?