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

When it comes to web development, there are different type of development stacks; the LAMP stack, the MEAN stack, the MERN stack etc. With the evolvement of modern web development, there is a new kid in the block, which is the JAMstack. In this article, I'll be covering all you need to know about the JAMstack.

当涉及到Web开发时，有不同类型的开发堆栈。 随着LAMP堆栈，MEAN堆栈，MERN堆栈等的出现。随着现代Web开发的发展，一个新的障碍就是JAMstack。 在本文中，我将介绍您需要了解的有关JAMstack的所有信息。

什么是JAMstack ( What is the JAMstack )

Static websites have not only be been growing in popularity, but also in functionality. Gone are the days when static websites are just some HTML and some bunch of CSS with no interactivity whatsoever. Today, we have static websites that does things like process payments, handle realtime activities etc. To keep calling websites like these “static websites” will be undermining the functionality of such websites. 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; 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 better developer experience.

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

为什么选择JAMstack ( Why the JAMstack )

Having seen what the JAMstack is, you might ask why go the JAMstack route? Below are some reasons you should consider the JAMstack:

看了什么是JAMstack之后，您可能会问为什么要走JAMstack路线？ 以下是您应考虑使用JAMstack的一些原因：

• Faster performance: This is the most obvious benefit of a JAMstack website as it is just pre-built HTML and assets, all which can be served over a CDN.
  更快的性能：这是JAMstack网站最明显的好处，因为它只是预先构建HTML和资产，所有这些都可以通过CDN进行提供。
• Higher security: JAMstack websites are incredibly secure, since you don’t have to worry of servers been hacked or database vulnerabilities.
  更高的安全性： JAMstack网站的安全性令人难以置信，因为您不必担心服务器被黑客入侵或数据库漏洞。
• Less cost: Cost of running a ****JAMstack website is cheaper, since it uses less resources as things like servers and databases are not necessarily needed.
  成本更低：运行**** JAMstack网站的成本更低，因为它不需要使用服务器和数据库之类的资源，因此使用的资源更少。
• Better developer experience: With the JAMstack, there is no tight coupling between backend and frontend, as we can select from an expanding options of CMS and content infrastructures, which removes the need to maintain a separate stack for content and our website. We can even make use of third-party services like Algolia and Netlify Forms.
  更好的开发人员体验：有了JAMstack，后端和前端之间没有紧密的联系，因为我们可以从CMS和内容基础结构的扩展选项中进行选择，从而无需为内容和我们的网站维护单独的堆栈。 我们甚至可以利用Algolia和Netlify Forms等第三方服务。

In addition to the above, there are numerous services to integrate dynamic functionality into JAMstack websites emerging up every day. Such services includes:

除上述内容外，还有许多服务可将动态功能集成到每天涌现的JAMstack网站中。 这些服务包括：

• Manage signups, logins, password recovery, and more with Netlify Identity.
  使用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 )

We have already seen what the JAMstack stands for. So to build a project using the JAMstack, the project must meet the following criteria:

我们已经了解了JAMstack的含义。 因此，要使用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, Hugo etc. for content sites, or a build tool like Webpack, ParcelJS etc. for web apps.
  标记：模板化标记应在部署时预先构建，通常使用内容生成器之类的网站生成器（如GatsbyJS ， Nuxt.js ， Hugo等），或使用Web应用程序之类的构建工具如Webpack ， ParcelJS等。

With those in mind, your project is not built with the JAMstack if:

考虑到这些，如果发生以下情况，您的项目就不会使用JAMstack构建：

• 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, you should consider the following best practices:

使用JAMstack构建项目时，应考虑以下最佳实践：

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

结论 ( Conclusion )

In this article, we saw what the JAMstack is, why we should consider using the JAMstack for our next project. Lastly, we saw what it entails for a project to be built with the JAMstack. For websites and web apps built with the JAMstack, do check out these examples.

在本文中，我们了解了JAMstack是什么，为什么我们应该考虑在下一个项目中使用JAMstack。 最后，我们看到了使用JAMstack构建项目所需要的内容。 对于使用JAMstack构建的网站和Web应用程序，请查看以下示例 。

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

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

翻译自: https://scotch.io/tutorials/jamstack-the-what-the-why-and-the-how