JAMstack：什么，为什么以及如何

介绍 (Introduction)

Web development often involves the use of different development stacks, including the LAMP stack, the MEAN stack, the MERN stack, etc. JAMstack is another stack that offers some unique benefits to developers. This article will discuss those benefits and some general definitions and terms in order to provide an introduction to the JAMstack.

Web开发通常涉及使用不同的开发堆栈，包括LAMP堆栈，MEAN堆栈，MERN堆栈等。JAMstack是另一个为开发人员提供一些独特好处的堆栈。 本文将讨论这些好处以及一些常规定义和术语，以便对JAMstack进行介绍。

什么是JAMstack？ (What is the JAMstack?)

Static websites have been growing recently in use and functionality. No longer a collection of HTML and CSS files, static websites do things like process payments, handle realtime activities, and more. To call these sites “static” undermines and under-describes their functionality. Hence, the term JAMstack.

静态网站的使用和功能最近有所增长。 静态网站不再是HTML和CSS文件的集合，它可以执行处理付款，处理实时活动等操作。 将这些站点称为“静态”会破坏和描述其功能。 因此，术语JAMstack 。

JAMstack stands for JavaScript, APIs, and Markup. According to the official website, JAMstack means:

JAMstack代表J avaScript， A PI和M arkup。 根据官方网站 ，JAMstack表示：

Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

基于客户端JavaScript，可重用API和预建标记的现代Web开发体系结构。

The term was coined by Mathias Biilmann, co-founder of Netlify.

这个词是由马蒂亚斯Biilmann，联合创始人创造Netlify 。

With the JAMstack, we no longer talk about specific technologies such as operating systems, web servers, backend programming languages, or databases. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a more streamlined developer experience.

使用JAMstack，我们不再谈论特定技术，例如操作系统，Web服务器，后端编程语言或数据库。 这是一种构建网站和应用程序的新方法，可提供更好的性能，更高的安全性，更低的扩展成本以及更简化的开发人员体验。

为什么选择JAMstack？ (Why the JAMstack?)

When should you consider using the JAMstack? Some reasons you might consider the JAMstack include:

您何时应该考虑使用JAMstack？ 您可能考虑使用JAMstack的一些原因包括：

• Faster performance: Because a JAMstack website is pre-built HTML and assets, it can be served over a CDN.

  更快的性能：由于JAMstack网站是预先构建HTML和资产，因此可以通过CDN进行服务。

• Higher security: JAMstack websites reduce server and database surface area vulnerabilities.

  更高的安全性： JAMstack网站减少了服务器和数据库外围区域的漏洞。

• Lower cost: The cost of running a JAMstack website is generally lower than comparable alternatives since it uses fewer resources.

  更低的成本：运行JAMstack网站的成本通常低于同类网站，因为它使用的资源更少。

• Better developer experience: With the JAMstack, there is no tight coupling between the application backend and frontend. This means that you can select from among different CMS and content infrastructure options, removing the need for separate stacks to maintain and serve content. Using JAMstack also simplifies the process of using third-party services like Algolia and Netlify Forms.

  更好的开发人员体验：使用JAMstack，应用程序后端和前端之间没有紧密的耦合。 这意味着您可以从不同的CMS和内容基础结构选项中进行选择，而无需使用单独的堆栈来维护和提供内容。 使用JAMstack还可以简化使用第三方服务(例如Algolia和Netlify Forms)的过程 。

There are also a growing number of services that integrate dynamic functionality into JAMstack websites, including:

越来越多的将动态功能集成到JAMstack网站中的服务包括：

• Netlify Identity, which enables signup management, logins, password recovery, and more.

  Netlify Identity ，它可以进行注册管理，登录，密码恢复等。

• Full text search with Algolia and Lunr.js.

  使用Algolia和Lunr.js进行全文搜索。

• Form handling with Formspree or Netlify Forms.

  使用Formspree或Netlify表单处理表单 。

如何使用JAMstack进行构建 (How To Build with the JAMstack)

In order to build a project using the JAMstack, it must meet the following criteria:

为了使用JAMstack构建项目，它必须满足以下条件：

• JavaScript: Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. This could be any frontend framework like Vue.js, React, Angular, etc. or even vanilla JavaScript.

  JavaScript：在请求/响应周期中的任何动态编程均由JavaScript处理，并且完全在客户端上运行。 这可能是任何前端框架，例如Vue.js ， React ， Angular等，甚至是原始 JavaScript。

• APIs: All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTP with JavaScript. These can be custom-built or leverage third-party services.

  API：所有服务器端进程或数据库操作都被抽象为可重用的API，可使用JavaScript通过HTTP访问。 这些可以是定制构建的，也可以利用第三方服务。

• Markup: Templated markup should be pre-built at deploy time, usually using a site generator like GatsbyJS, Nuxt.js, or Hugo for content sites, or a build tool like Webpack, or ParcelJS for web apps.

  标记：模板化标记应在部署时预先构建，通常使用内容生成器之类的网站生成器(如GatsbyJS ， Nuxt.js或Hugo) ，或使用Web工具之类的构建工具(如Webpack或ParcelJS) 。

With those in mind, the following projects are not JAMstack projects:

考虑到这些，以下项目不是 JAMstack项目：

• A project built with a server-side CMS like WordPress, Drupal, etc.
  一个使用WordPress，Drupal等服务器端CMS构建的项目。
• A monolithic server-run web app that relies on a backend language like PHP, Node, or any other backend language.
  由服务器运行的整体式Web应用程序，它依赖于后端语言，例如PHP，Node或任何其他后端语言。
• A single page app (SPA) that uses isomorphic rendering to build views on the server at runtime.
  使用同构渲染在运行时在服务器上构建视图的单页应用程序(SPA)。

When building a project with the JAMstack, keep the following best practices in mind:

使用JAMstack构建项目时，请牢记以下最佳实践：

• The entire site should be served on CDN.
  整个网站都应在CDN上提供。
• Employ atomic deploys.
  采用原子部署。
• Use instant caching invalidation.
  使用即时缓存无效。
• Everything should live on Git.
  一切都应该放在Git上。
• Markup builds should be automated.
  标记构建应该是自动化的。

结论 (Conclusion)

In this article, you learned about what the JAMstack is and why you might consider it for your next project. You also learned about project requirements for JAMstack sites. For examples of websites and web apps built with the JAMstack, you can also look at these official examples.

在本文中，您了解了什么是JAMstack以及为什么要在下一个项目中考虑使用它。 您还了解了JAMstack站点的项目要求。 对于使用JAMstack构建的网站和Web应用程序的示例，您还可以查看以下官方示例 。

You can learn more about the JAMstack by going through the official website and the resources section.

您可以通过官方网站和参考资料部分了解有关JAMstack的更多信息。

翻译自: https://www.digitalocean.com/community/tutorials/jamstack-the-what-the-why-and-the-how