Jamstack：优点、缺点、历史等

Jamstack 是构建网站和应用程序的现代方式。 因为它提供了比传统网站更好的整体性能。 除了其他优点和成本节约。

目标是首先加载静态 HTM 网站，然后逐步增强网站和用户体验。 这导致超快速加载页面，稍后可以根据需要加载图像和其他动态内容。

Jamstack 是一种实用的 Web 开发方法，可为网站所有者和访问者提供优势。 但是，虽然这是一个了不起的发展，但它仍然不适合所有类型的网站。

这篇文章着眼于 Jamstack 革命的历史和不同的特点，以发现它可以为您和您的企业做些什么。

Jamstack 的小历史

自 1980 年代以来，Web 服务器最初服务于静态页面，直到服务器端脚本变得流行并且动态网站在 2000 年代初成为事实上的联合开发标准。

然而，随着互联网的发展，为了节省成本和吸引更多访问者，优化变得必要。 这导致了网站缓存、内容交付网络和媒体优化的使用。

除此之外，个人电脑变得越来越强大，越来越多的工作负载被转移到前端以执行 JavaScript。 这导致了许多新技术的发展，例如 jQuery的，以及后来的 Angular、React JS、Vue 和其他 JavaScript 库。

Jamstack 的 3 个支柱

Jamstack 的发展归功于三种不同但互补的技术，没有它们是不可能的。 这些技术是 JavaScript、标记和 API。 他们贡献了构成 JAM 在 Jamstack 中； J 对于 JavaScript， A 对于 API，以及 M 标记。

以下是对这些技术中的每一种以及它为 Jamstack 生态系统带来什么的详细介绍。

• JavaScript – JavaScript 是一种客户端解释脚本语言，尽管像 Node.js 这样的框架现在也使引擎可用于服务器端脚本。 作为客户端意味着您为网站编写的任何 JavaScript 代码都将在页面加载到 Web 访问者的浏览器后执行。
  
  作为一种解释性语言意味着代码是在网页上“按原样”提供的，而不是像 C 和 C++ 等语言那样预先编译。 所有流行的浏览器都支持 JavaScript 语言，尽管过去它们的解释有所不同。 这就是导致开发像 jQuery 这样的框架来处理所有这些问题的情况。
  
  如今，许多现代框架使使用 JavaScript 完成令人惊奇的事情变得更加容易，而且您最初需要的时间和麻烦更少。 Next.js 和 Vue 等一些框架包含使使用 JavaScript 进行 UI 开发变得轻而易举的功能。 这极大地促进了 Jamstack 革命。
  
• APIs – API 或应用程序编程接口是 Jamstack 生态系统这 3 个支柱中最新的一个。 它是一种源自互联网的技术发展，旨在让程序员的生活更轻松。
  
  API 让您可以从一系列 Web 资源中查询和获取信息，只需使用该资源的网址或 URL 并遵守其指定的协议。 它最初是一种不使用传统浏览器与网站交互的方式，但它已经发展了。
  
  今天，API 提供各种服务，包括像 Firebase 服务、天气服务、金融服务、预订、犯罪数据、航班数据、文本到语音服务、货币汇率转换等数据银行。
  
  这种 API 开发可以很容易地用可以从 API 源获取信息的解耦系统替换传统的依赖数据库的网站。 Jamstack 站点可以在其静态文件编译运行期间加载 API 数据。 或者它可以加载一个简单的 HTML 站点，并在需要时使用 JavaScript 加载它需要的任何资源。
  
  另外值得注意的是，API 不能是公共的或外部的。 您可以使用您选择的任何服务，也可以创建特定于您网站的服务。 无服务器函数也作为 Jamstack 站点的 API 源而变得流行。 并且有充分的理由，您将在下面看到。
  
• 标记 – 标记语言是使用标签来定义文档中的元素的任何计算机约定。 最流行的标记语言是运行大部分网络的超文本标记语言或 HTML。
  
  Jamstack 中标记的目标是定义网页或应用程序的布局。这意味着将项目放置在正确的位置，包括框、文本区域、图片、标题等。这种没有脚本的页面称为 静态站点.
  
  但是，您可以直接用 HTML 编写 Jamstack 网站，也可以使用其他语言和平台，例如静态站点生成器。 许多这些静态站点生成器都接受 HTML 和 markdown 语言。

静态与动态网站

网站加载速度对于良好的用户体验很重要，因此已成为 Google的核心网络生命，它们是搜索结果的排名因素。 Jamstack 方法是尽可能快地加载静态站点，然后根据需要添加额外内容，通常使用 JavaScript 和 API。

托管静态站点也意味着您的服务器正在做更少的工作。 而且节省的费用如此之多，以至于像这样的服务 Netlify 提供免费的静态站点托管. 静态站点也比动态站点更容易创建和部署。

但是，动态网站也具有某些优势，例如易于编辑、更多功能以及用户配置文件和帐户等功能。 这使得动态站点通常更适合更复杂的项目。 至少现在。

Jamstack 站点的好处

与传统网站相比，Jamstack 网站提供了许多优势。 这些优势有助于它们越来越受欢迎。 其次，这些优势大多符合现代 Web 开发实践。 这使得 Jamstack 成为开发网站和应用程序的现代方式。

以下是应用 Jamstack 原则的一些好处：

• 加载速度快 – 静态网页的加载速度比动态网站快，因为服务器所要做的就是提供静态文件。 另一方面，动态站点必须首先解析服务器端脚本。 然后执行它，调用数据库以获取记录，并在将最终的 HTML 文件交付给客户端之前检查其他环境变量。
  
• 资源使用率低 – 您可以生成一次静态页面，然后再提供它们。 或者，您可以根据需要每天、每小时或每分钟重新生成页面。 您最终将使用比动态站点更少的资源。 这也意味着更低的成本。
  
• 更好 安全性 – Jamstack 架构为恶意行为者提供了比动态网站更小的攻击面。 如果在编译运行期间进行所有 API 调用，这会更好，因此 Web 访问者不知道正在使用哪些 Web 服务和协议。
  
• 易于扩展 – 静态网站更容易扩展，因为它们使用的资源比动态网站少。 此外，数据库和其他资源管理问题很少或完全不存在。
  
• 易于维护 – 无需维护基础设施、无需数据库管理例程、无需安全补丁等。

• 灵活性 – 您可以轻松添加和删除资源。 您不依赖于特定的数据库或脚本语言，JavaScript 和 HTML 除外。 更改一行，您将连接到不同的 API。

Jamstack 网站的缺点

Jamstack 站点也有问题，这里是最值得注意的。

• 它还不是一项成熟的技术。
• 如果您需要动态功能，您可能会遇到问题。
• API 依赖可能是有问题的，尽管这种情况很少见。

Jamstack 和无服务器功能

尽管 Jamstack 站点使用静态网页，但它们并不是完全静态的。 因为您可以使用 API 和无服务器函数向站点添加动态数据。

谷歌云无服务器函数、Netlify 函数和 Firebase 数据库服务等服务可以轻松地将动态数据添加到任何 Jamstack 站点。

GitHub 存储库和版本控制

您可以将静态页面直接托管在像 Netlify 这样的 Jamstack 主机上。 或者，您可以将开发文件托管在 GitHub 等存储库上，让 Netlify 等主机访问它们并在需要时构建静态页面。

除了为您提供托管代码的地方外，软件存储库还使管理软件的不同版本变得更加容易。 因此，如果您碰巧发现当前版本存在问题，您可以轻松回滚到以前的稳定版本。

GitHub 让您轻松完成这一切。 此外，您可以显式访问您选择的 Jamstack 主机，例如 Netlify，以便在您进行更新时访问和编译您的新数据。

静态网站生成器

静态站点生成器 或 SSG 是很棒的工具，可以让不太懂技术的人将动态网站变成现代 Jamstack 网站。

像 Eleventy 或 11ty 这样的一些 SSG 是为极简主义者设计的，而像 Gatsby 这样的其他 SSG 则配备了您所希望的所有花里胡哨。 它们可以提供图像处理、适合移动设备的站点布局、菜单生成器、自动分页等功能。

流行的 Jamstack 站点生成器包括：

1. Next.js
2. 盖茨比
3. 11ty
4. 纽斯特
5. 斯卡利
6. 雨果
7. 杰奇
8. 网格状
9. 维普莱斯

以 UI 为中心的 JavaScript 框架

以 UI 为中心的 JavaScript 框架的演变极大地影响了 Jamstack 的演变。 当然，您始终可以在静态网站上使用原生 JavaScript，但使用框架会使事情变得更好、更容易。

最流行的以 UI 为中心的 JavaScript 框架包括：

1. 应对
2. 角度方向
3. Vue公司
4. 斯维尔特

Netlify 和 Jamstack 托管

所有 Jamstack 站点都需要托管和类似的服务 Netlify 免费提供。 Netlify 长期以来一直参与 Jamstack 运动，并提供免费增值定价模式。

但与传统托管方案不同的是，免费的 Jamstack 托管服务提供了巨大的价值和性能。例如，Netlify 的免费计划包括无限的站点、丰富的仪表板、 CMS, 无服务器功能，并自动捕获提交的表单数据。

其他免费的 Jamstack 托管服务包括：

1. 威赛尔
2. Digital Ocean
3. Azure 静态 Web 应用

无头内容管理系统

无头内容管理系统或 CMS 概念可能会让 Jamstack 生态系统的新手感到困惑。 但是无头仅仅意味着该软件没有附加到任何平台。

例如，WordPress 和 Drupal 等平台带有与平台密不可分的内容管理系统。 也就是说，您只能使用他们的编辑器在它所属的平台上发布。

无头系统不连接到任何平台。 相反，它们通过 API 连接到多个平台，使它们成为高度灵活的工具。

Jamstack 站点管理员使用的最流行的无头 CMS 软件包括：

1. 斯特拉皮
2. NetlifyCMS
3. 鬼
4. 图形内容管理系统
5. Contentful
6. 林业

如何建立一个 Jamstack 站点

手动构建 Jamstack 站点非常简单。 这是您的操作方法：

• 步骤1 – 使用 HTML 和 CSS 设计您的网站布局。
• 步骤2 – 使用 JavaScript 添加额外的功能。
• 步骤3 – 添加 API 函数和请求。
• 步骤4 – 将您的文件上传到您的 HTML 服务器。

但上述步骤可能只对极客来说是令人兴奋的。 因此，不同的开发人员提出了不同的工具来帮助非编码人员在不成为高级编码人员的情况下参与行动。

以下是其他更简单的方法：

1. 静态网站生成器 – 这些工具例如 Gatsby，可以轻松地将现有动态网站转变为 Jamstack 静态网站。它们具有不同的功能，有些还包括特殊功能 插件 对于某些平台，例如 WordPress。

2. 设计工具 – 这些是 Stackbit 和 Builder.io 等设计应用程序，无需知道如何编码即可轻松设计现代 Jamstack 网站。 简单地设计和部署。

何时构建 Jamstack 站点

虽然 Jamstack 架构可能不适合某些类型的网站，但您可以成功地将其用于以下类型的网站：

• 个人网站 - 告诉世界你是谁的基本网站。
• 公司网站 – 包括地址、产品、服务等的公司网站。
• 着陆页 – 专门用于从网络访问者那里获取信息。
• 电子商务商店 – 不同类型的在线销售商品的网站。
• 博文s – 定期更新的内容网站。 SSG 甚至会自动转换您的 WordPress 网站。

总结

我们已经到了 Jamstack 上这篇文章的结尾，以及您需要了解的所有内容。 而且您现在应该意识到，网络的未来与 Jamstack 运动交织在一起。

如果您是 Web 开发新手，那么您应该立即接受 Jamstack。 如果您是一位经验丰富的老派 Web 开发人员，那么问问自己是否想落后。