I’m sure you’ve come across the word JAMstack before but you might not have understood what it really meant. I’ve seen this word before also but didn’t care to check it out until Egwuenu Gift organized JAMstack Lagos. I then realized that I’ve been building JAMstack applications already.

我敢肯定您之前遇到过JAMstack这个词，但是您可能还没有真正理解它的含义。 我以前也见过这个词，但是直到Egwuenu Gift组织了JAMstack Lagos才乐于检验它。 然后，我意识到我已经在构建JAMstack应用程序。

JAMstack is a modern web development architecture. It is not a programming language or any form of tool. It is more of a web development practice aimed towards enforcing better performance, higher security, lower cost of scaling, and better developer experience.

JAMstack是一种现代的Web开发体系结构。 它不是编程语言或任何形式的工具。 它更多地是一种Web开发实践，旨在实现更好的性能，更高的安全性，更低的扩展成本以及更好的开发人员体验。

In this article, I’ll introduce you to what JAMstack means, why you should care, best practices, and how to get started. ?

在本文中，我将向您介绍JAMstack的含义，为什么要关心它，最佳实践以及如何入门。 ？

介绍 (Introduction)

According to the official JAMstack documentation,

根据官方的JAMstack文档 ，

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

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

When we talk about “The Stack,” we no longer talk about operating systems, specific web servers, backend programming languages, or databases.

当我们谈论“堆栈”时，我们不再谈论操作系统，特定的Web服务器，后端编程语言或数据库。

The JAMstack is not about specific technologies. 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与特定技术无关。 这是一种构建网站和应用程序的新方法，可提供更好的性能，更高的安全性，更低的扩展成本以及更好的开发人员体验。

JAMstack is a major trend in web development coined by Mathias Biilman, the CEO and co-founder of Netlify.

NetMify的首席执行官兼联合创始人Mathias Biilman提出了JAMstack是Web开发的主要趋势。

好吧，冷静！ 什么是JAMstack？ (Okay, chill! What is JAMstack?)

You might have come across specific terms like MEAN stack and MERN stack. These are just terms used to classify or group some certain technologies with the aim of achieving a particular goal.

您可能遇到过诸如MEAN堆栈和MERN堆栈之类的特定术语。 这些只是用于对某些特定技术进行分类或分组以实现特定目标的术语。

JAMstack here stands for

JAMstack代表

JavaScript

ĴavaScript

API

一个 PI

Markup

中号 arkup

Stacks generally are just a combination of several technologies used to create a web or mobile application. So JAMstack is the combination of JavaScript, APIs and Markup. Pretty interesting right?

堆栈通常只是用于创建Web或移动应用程序的几种技术的组合。 因此，JAMstack是JavaScript，API和标记的结合。 很有趣吧？

JAMstack projects don’t rely on server-side code — they can be distributed instead of relying on a server. Served directly from a CDN, JAMstack apps unlock speed, performance and better the user experience.

JAMstack项目不依赖服务器端代码-它们可以分布而不是依赖服务器。 JAMstack应用程序直接从CDN提供服务，可释放速度，性能并改善用户体验。

有用条款 (Useful Terms)

I’ll be using these terms in this article frequently and I thought you should know their meanings (if you don’t already):

我会在本文中经常使用这些术语，并且我认为您应该了解它们的含义(如果尚未了解)：

• API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other.

  API是应用程序编程接口(Application Programming Interface)的首字母缩写，它是一种软件中介，允许两个应用程序相互通信。

• CDN (content delivery network) is a system of distributed servers (network) that deliver pages and other Web content to a user, based on the geographic locations of the user, the origin of the webpage and the content delivery server.

  CDN (内容交付网络)是一种分布式服务器(网络)的系统，该系统根据用户的地理位置，网页的来源和内容交付服务器将页面和其他Web内容交付给用户。

• A Server is a computer designed to process requests and deliver data to another computer over the internet or a local network.

  服务器是用于处理请求并将数据通过Internet或本地网络传递到另一台计算机的计算机。

• A Database is a collection of information that is organized so that it can be easily accessed, managed, and updated

  数据库是组织信息的集合，以便可以轻松地访问，管理和更新它

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

Traditional websites or CMS sites (e.g WordPress, Drupal, etc.) rely heavily on servers, plugins and databases. But the JAMstack can load some JavaScript that receives data from an API, serving files from a CDN and markup generated using a static site generator during deploy time.

传统网站或CMS网站(例如WordPress，Drupal等)严重依赖于服务器，插件和数据库。 但是JAMstack可以加载一些JavaScript，这些JavaScript从API接收数据，从CDN提供文件，并在部署期间使用静态站点生成器生成标记。

Sounds cool right?!

听起来不错吧！！

JAMstack很快 (JAMstack is fast)

When it comes to minimizing the time of load, nothing beats pre-built files served over a CDN. JAMstack sites are super fast because the HTML is already generated during deploy time and just served via CDN without any interference or backend delays.

要最大程度地减少加载时间，没有什么比在CDN上提供的预构建文件更胜一筹了。 JAMstack站点非常快，因为HTML已在部署期间生成，并且仅通过CDN提供服务，而没有任何干扰或后端延迟。

JAMstack是高度安全的 (JAMstack is highly secured)

Everything works via an API and hence there are no database or security breaches. With server-side processes abstracted into micro service APIs, surface areas for attacks are reduced and so your site becomes highly secured.

一切都通过API运行，因此没有数据库或安全漏洞。 通过将服务器端进程抽象到微服务API中，可以减少攻击的表面积，从而使您的站点变得高度安全。

JAMstack便宜且易于扩展 (JAMstack is cheaper and easier to scale)

JAMstack sites only contain just a few files with minimal sizes that can be served anywhere. Scaling is a matter of serving those files somewhere else or via CDNs.

JAMstack站点仅包含几个文件，这些文件的大小最小，可以在任何地方使用。 伸缩是在其他位置或通过CDN提供这些文件的问题。

JAMstack最佳实践 (JAMstack Best Practices)

• Use CDN to distribute your files rather than servers使用CDN分发文件而不是服务器
• Installing and contributing to your project should be easy and less complex. Use tools like npm and Git to ensure standard and faster setup.安装并为您的项目做贡献应该很容易，也不需要那么复杂。 使用npm和Git之类的工具来确保标准和更快的设置。
• Use build tools and make your project compatible for all browsers (e.g Babel, Browserify, Webpack, etc.)使用构建工具并使您的项目与所有浏览器(例如Babel，Browserify，Webpack等)兼容。
• Ensure your project is up to web standards and highly accessible确保您的项目符合Web标准并且易于访问
• Ensure your build process is automated to reduce stress.确保您的构建过程是自动化的，以减轻压力。

• Make your deployment process automatic, you can use platforms like Netlify to do this

  使您的部署过程自动进行，您可以使用Netlify等平台来执行此操作

我如何开始？ (How do I Get Started?)

You can use some already built technologies to build JAMstack applications in a few minutes. Here are a few:

您可以在几分钟内使用一些已经构建的技术来构建JAMstack应用程序。 这里有一些：

• Gatsby: Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

  Gatsby ： Gatsby是基于React的免费开源框架，可帮助开发人员构建快速的网站和 应用

• NuxtJS: NuxtJS is the Vue.js Framework for Universal applications, static generated applications, single page applications, progressive web apps and desktop apps

  NuxtJS ： NuxtJS是适用于通用应用程序，静态生成的应用程序，单页应用程序，渐进式Web应用程序和桌面应用程序的Vue.js框架。

• Hugo: Hugo is the world’s fastest framework for building websites. It is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

  雨果 ：雨果是世界上建立网站最快的框架。 它是最受欢迎的开源静态站点生成器之一。 雨果以其惊人的速度和灵活性，使网站建设再次变得有趣。

• Netlify CMS: Netlify CMS is an open source content management for your Git workflow which can be used with any static site generator for a faster and more flexible web project

  Netlify CMS ： Netlify CMS是用于Git工作流程的开源内容管理，可与任何静态站点生成器一起使用，以实现更快，更灵活的Web项目

• Contentful: Contentful is a smarter and seamless content management system which provides editors and developers with a unified content thereby enhancing collaboration and ensuring digital products ship to the market faster.

  内容丰富 ：内容丰富是一个更智能，无缝的内容管理系统，可为编辑人员和开发人员提供统一的内容，从而加强协作并确保数字产品更快地投放市场。

• Svelte: Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

  Svelte ： Svelte是一种用于构建用户界面的全新方法。 像React和Vue这样的传统框架会在浏览器中完成大部分工作，而Svelte会将其转变为在构建应用程序时发生的编译步骤 。

and many more. . .

还有很多。 。 。

有用的资源 (Useful Resources)

• JAMstack WTF

  JAMstack WTF

• How to Build a JAMstack Website

  如何建立一个JAMstack网站

• What is JAMstack and why you should try it

  什么是JAMstack以及为什么要尝试

• A JAMstack-ready CMS

  支援JAMstack的CMS

• JAMstack for Clients: On Benefits & Static Site CMS

  JAMstack for Clients：关于收益和静态站点CMS

• Go static: 5 reasons to try JAMstack on your next project

  静态化：在下一个项目中尝试JAMstack的5个理由

• Static Websites + JAMstack = ❤

  静态网站+ JAMstack =❤

Find more resources here

在这里找到更多资源

结论 (Conclusion)

JAMstack was invented as a way to put a nomenclature to the new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.

JAMstack的发明是为了命名网站和应用程序的新构建方式，从而提供了更好的性能，更高的安全性，更低的扩展成本以及更好的开发人员体验。

JAMstack is not about specific technologies, it is a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

JAMstack与特定技术无关，它是基于客户端JavaScript，可重用API和预建标记的现代Web开发体系结构。

Join the JAMstack community to learn more and get more updates.

加入JAMstack社区以了解更多信息并获取更多更新。

PS: This article was first published on my blog here

PS：本文首次发表在我的博客在这里

翻译自: https://www.freecodecamp.org/news/an-introduction-to-the-jamstack-the-architecture-of-the-modern-web-c4a0d128d9ca/