本文共 14673 字，大约阅读时间需要 48 分钟。
JAMstack sites are all the rage right now in the web dev world. And rightfully so! But what exactly is it and how can we all take advantage of its benefits?
JAMstack网站现在在Web开发世界中风靡一时。 当然是这样！ 但是它到底是什么？我们所有人如何利用它的好处？
To start, is a software architecture and philosophy that adheres to the following components: Javascript, APIs, and Markup.
首先， 是一种软件体系结构和哲学，它遵循以下组件：Javascript，API和标记。
If this sounds familiar, it's because it is! That React app that you compile down with and ultimately serve from ? Yup, that’s a JAMstack app. That simple HTML file that has no JavaScript and literally doesn’t do anything dynamic? Yup, that’s also a JAMstack app.
如果听起来很熟悉，那是因为！ 您使用编译并最终从服务的React应用程序？ 是的，这是一个JAMstack应用程序。 没有JavaScript的简单HTML文件实际上没有进行任何动态处理？ 是的，这也是一个JAMstack应用程序。
If you’re coming more from the cloud side of things (think , , ), you might be inclined to think of and JAMstack as the same thing. Granted they have similarities in the philosophy of how resources are managed, such as hosting a site on S3. But a JAMstack app is not always going to be a serverless app.
如果您从云方面(例如 ， ， )获得更多收益，则可能倾向于将和JAMstack视为同一件事。 当然，他们在资源管理方式上有相似之处，例如在S3上托管站点。 但是，JAMstack应用程序并不总是会成为无服务器应用程序。
Consider an app hosted in static storage on the cloud provider of your choice. Yes, you might be serving the app in a serverless way, but you might be dealing with an API that utilizes Wordpress or Rails, both of which are certainly not serverless.
考虑在您选择的云提供商的静态存储中托管的应用程序。 是的，您可能以无服务器的方式提供应用程序，但是您可能正在使用利用Wordpress或Rails的API，这两者当然都不是无服务器的。
Combining these philosophies can go a long way, but they shouldn’t be confused as the same.
将这些理念组合在一起可以走很长的路要走，但不要将它们混淆为一谈。
Back to the JAMstack: it's typically comprised of 3 components: Javascript, APIs, and Markup. Its from growing the term "static site" into something more meaningful (and marketable). So while ultimately a static site is the end result, it's blown up to include first class tooling for every step of the way.
回到JAMstack：它通常由3个组件组成：Javascript，API和标记。 它的将“静态网站”一词发展成为更有意义(更可销售)的东西。 因此，尽管最终最终还是要建立一个静态站点，但它却被炸毁，在其每一步都包含了一流的工具。
While there aren't any specific set of tools that you need to use, or any tools at all beyond simple HTML, there are great examples of what can make up each part of the stack. Let's dive in a little bit to each component.
尽管您不需要使用任何特定的工具集，也不需要使用任何简单HTML之外的工具，但是有一些很好的示例说明了组成堆栈各个部分的内容。 让我们深入研究每个组件。
The component that’s probably done the most work to popularize the JAMstack is Javascript. Our favorite browser language allows us to provide all of the dynamic and interactive bits that we might not have if we’re serving plain HTML without it.
Javascript可能是完成JAMstack推广工作最多的组件。 我们最喜欢的浏览器语言使我们能够提供如果不提供纯HTML便无法提供的所有动态和交互位。
This is where a lot of times you’ll see UI frameworks like , , and newcomers like come into play.
在很多时候，您会看到UI框架(如 ， )和新手(如开始发挥作用。
They make building apps simpler and more organized by providing component APIs and tooling that compile down to a simple HTML file (or a bunch of them).
通过提供可向下编译为简单HTML文件(或其中的一堆文件)的组件API和工具，它们使构建应用程序更加简单和井井有条。
Those HTML files include a group of assets like images, CSS, and the actual JS that ultimately get served to a browser via your favorite CDN (content delivery network).
这些HTML文件包括一组资产，例如图像，CSS和实际的JS，这些资产最终通过您喜欢的CDN(内容交付网络)提供给浏览器。
Utilizing the strengths of APIs is core to how you make a JAMstack app dynamic. Whether it’s authentication or search, your application will use Javascript to make an HTTP request to another provider which will ultimately enhance the experience in one form or another.
利用API的优势是使JAMstack应用程序动态化的核心。 无论是身份验证还是搜索，您的应用程序都将使用Javascript向另一个提供程序发出HTTP请求，从而最终以一种或另一种形式增强体验。
coined the phrase "" that does a pretty good job at describing the possibilities here.
创造了“ ”一词，在描述这里的可能性方面做得很好。
You don’t necessarily have to reach out to only one host for an API, but you can reach out to as many as you need (but try not to go overboard).
您不必一定要仅接触一个API主机，但是您可以根据需要延伸任意数量的主机(但不要太过分)。
For instance, if you have a headless API where you host your blog posts, a account where you store your specialized media, and an instance that provides your search functionality, they all work together to provide a single experience to the people using your site.
例如，如果您拥有一个无头的 API(用于托管博客文章)，一个帐户(用于存储您的专业媒体)以及一个提供搜索功能的实例，则它们可以共同为使用该工具的用户提供单一的体验您的网站。
This is the critical piece. Whether it’s your hand written HTML or the code that compiles down to the HTML, it's the first part you’re serving to the client. This is kind of a de facto piece of any website, but how you serve it is the most important piece.
这是关键。 无论是您手写HTML还是编译成HTML的代码，这都是您服务于客户的第一部分。 这实际上是任何网站的一部分，但是如何服务是最重要的部分。
To be considered a JAMstack app, the HTML needs to be served statically, which basically means not being dynamically rendered from a server.
要被视为JAMstack应用程序，需要静态提供HTML，这基本上意味着不能从服务器动态呈现HTML。
If you’re piecing a page together and serving it with PHP, it’s probably not a JAMstack app. If you upload and serve a single HTML file from storage that constructs an app with Javascript, it sounds like a JAMstack app.
如果将页面粘贴在一起并使用PHP进行服务，则可能不是JAMstack应用程序。 如果您从存储库上传并提供一个HTML文件，该文件使用Javascript构建了一个应用程序，则听起来像是JAMstack应用程序。
But that doesn’t mean we have to always build 100% of the app within the browser. Tools like Gatsby and other allow us to pull in some or all of our API sources at build time and render the pages out as HTML files.
但这并不意味着我们必须始终在浏览器中构建100％的应用程序。 Gatsby等工具和其他等工具使我们可以在构建时引入部分或全部API源，并将页面呈现为HTML文件。
Think if you have a Wordpress blog, we can pull in all of the posts and ultimately create a new HTML file for each post. That means we’re going to be able to serve a precompiled version of the page directly to the browser which usually equates to a quicker and faster experience for your visitor.
考虑一下您是否拥有Wordpress博客，我们可以提取所有帖子，并最终为每个帖子创建一个新HTML文件。 这意味着我们将能够直接向浏览器提供页面的预编译版本，这通常意味着您的访问者可以更快地进行并获得更快的体验。
Using the term hosting here can be misleading if you’re new to the concept. Yeah, your site is technically getting hosted somewhere, but it’s not in the traditional sense. You don’t have a server that you’re maintaining where you upload your files to with an client like .
如果您不熟悉此概念，则在此处使用“托管”一词可能会误导您。 是的，从技术上讲，您的网站已托管在某个地方，但这不是传统意义上的。 您没有要维护的服务器，无法使用这样的客户端将文件上传到该服务器。
Instead, whether your doing it yourself with S3 or piping it into Netlify (which is actually ), your HTML and static assets are getting served from object storage. On the tail end of that you typically have a CDN like which caches those files at locations all over the world making your pages load faster for the people visiting your site.
相反，无论您是自己使用S3还是将其管道传输到Netlify(实际上是 )，HTML和静态资产都可以从对象存储中获得。 最后，您通常会拥有一个像这样的CDN，该CDN将这些文件缓存在世界各地，从而使访问您网站的人更快地加载页面。
JAMstack apps inherently satisfy most if not all of the . These are core concepts that AWS considers to deliver fast, secure, high-performing, resilient, and efficient infrastructure.
JAMstack应用程序固有地满足的大部分(如果不是全部)。 这些是AWS认为可提供快速，安全，高性能，弹性和高效基础架构的核心概念。
Let’s see how…
让我们看看如何...
The fact that you’re serving JAMstack apps as static files directly from a CDN (usually) makes it likely your app is going to load super fast. Gone are the days where the server has to spend time building the page before responding; now you serve the page as just plain HTML "as is" or with some type of client side hydration like you’d see with .
通常，您直接从CDN将JAMstack应用作为静态文件提供，这一事实使您的应用加载速度可能非常快。 服务器在响应之前必须花时间构建页面的日子已经一去不复返了。 现在，您可以按原样使用纯HTML来提供页面，也可以像使用一样使用某种类型的客户端连接来提供页面。
More often than not, JAMstack sites are going to run cheaper than their server side counterparts. Hosting static assets is cheap and now your page is being served at the same rate.
通常，JAMstack站点的运行成本要比服务器端站点低。 托管静态资产很便宜，现在您的页面以相同的速度提供。
Since you’re serving your files off of static hosting, likely a CDN, that pretty much automatically gives you infinite scalability. Most providers will make this claim, meaning you’ll have no trouble letting any influx of people hitting your site in through the front door.
由于您是通过静态主机(可能是CDN)提供文件的，因此几乎可以自动为您提供无限的可扩展性。 大多数提供商都会提出这一要求，这意味着您将不会有任何人从前门进入您的站点的麻烦。
The foundation of your static site isn’t a server, meaning you don't need to maintain it. Whether it’s Netlify, S3, or any other provider, your static HTML, CSS, and JS are maintained for you headache-free.
静态站点的基础不是服务器，这意味着您不需要维护它。 无论是Netlify，S3还是其他任何提供程序，都可以为您轻松维护静态HTML，CSS和JS。
Doubling down on the lack of server that you have to personally maintain, you don’t really need to worry as much about locking down ways for people to intrude.
将您必须亲自维护的服务器数量减少一倍，您实际上不必担心锁定人们侵入的方式。
Instead, you'll need to focus mostly on permissions to lock down private content and assure your users that their personal information isn't publicly available.
相反，您将需要主要关注权限以锁定私人内容，并向您的用户保证其个人信息不会公开。
As much as these points strike true for the static aspects of your site, keep in mind you still might depend on some type of API for your client-side experience.
尽管这些要点对于您网站的静态方面确实适用，但是请记住，您仍然可能需要某种类型的API来提供客户端体验。
Try to take advantage of these requests at compile time when you can, such as with a static site generator. Otherwise you’ll need to weigh the amount of hits you’re making to a dynamic endpoint and how it impacts all of the points above for your overall experience.
尝试在编译时利用这些请求，例如使用静态站点生成器。 否则，您将需要权衡对动态端点的点击量及其对以上所有方面的影响，以提供整体体验。
We already talked about the 3 components (Javascript, APIs, Markup), but what we didn’t talk about is the fact that you don’t necessarily have to use all 3 of them in order to consider your site worthy of the JAM label.
我们已经讨论过这3个组件(Javascript，API，标记)，但是我们没有谈论的事实是，您不必为了使用值得JAM标签使用的网站而必须全部使用这3个组件。
Really it all boils down to the Markup and how you serve it. Instead of your Rails app rendering your HTML for you, you might host a precompiled React app on S3 that reaches out to Rails via a set of APIs.
确实，这全都归结为标记以及您的服务方式。 您可以在S3上托管一个预编译的React应用，而不是通过Rails应用为您呈现HTML，它可以通过一组API到达Rails。
But you don’t even need to have APIs. You don’t even need to have Javascript! As long as you’re serving an HTML file without it having to be compiled on a server at request time (aka pre-rendering it), you’ve got yourself a JAMstack site.
但是，您甚至不需要API。 您甚至不需要Java语言！ 只要您提供HTML文件而不必在请求时在服务器上编译该文件(也称为预呈现)，您就可以拥有自己的JAMstack网站。
Yes! freecodecamp.org and its learning portal built on Gatsby. Even with the complexities of providing an app to take code courses with, freeCodeCamp is able to pull together the power of a static site generator and powerful APIs to bring people around the world the power of learning code.
是! freecodecamp.org及其学习门户基于Gatsby 。 即使提供应用程序进行代码课程的复杂性，freeCodeCamp仍能够将静态站点生成器的功能与强大的API整合在一起，从而带给世界各地的人们学习代码的能力。
You can see Quincy from freeCodeCamp talk more about this at the 2018 JAMstack_conf:
您可以从freeCodeCamp看到Quincy在2018 JAMstack_conf上进一步讨论此问题： : v e5H7CI3yqPY
Note: the News and Forum portals are not currently JAMstack sites.
注意：新闻和论坛门户当前不是JAMstack网站。
The main website for is no other than a Gatsby site! Everything from their recipes to their location finder are all compiled through our favorite "blazing fast" static site generator.
的主要网站就是Gatsby网站！ 从配方到位置查找器的所有内容均通过我们最喜欢的“快速创新”静态站点生成器进行编译。
Google’s resource center is built out using the growing . You can even find the code made open source at:
Google的资源中心是使用不断增长的 。 您甚至可以在以下位置找到开源的代码： ：
The good news with all of this buzz is there are a ton of tools currently available and a ton more on the way. They might still be a little rough around the edges, but that’s because this is a brave new world of tooling and that takes some smoothing out to get just right.
所有这些嗡嗡声的好消息是，目前有大量工具可供使用，而且还有更多工具正在使用中。 它们的边缘可能仍然有些粗糙，但这是因为这是一个勇敢的新工具世界，需要进行一些平滑才能使其正确。
This is the fun part. How are you going to build your app? With , you can pretty much pick your favorite flavor of UI framework and get off the ground running. Here’s a few popular ones to get started, but by no means is it exhaustive.
这是有趣的部分。 您将如何构建您的应用程序？ 随着 ，你几乎可以挑选自己喜欢的UI框架的风味和下车地运行。 这里有一些流行的入门指南，但这绝不是穷举。
(for you Angular fans)
(适合您Angular粉丝)
Need me to pick one? Start with Gatsby and .
需要我选一个吗？ 从Gatsby开始，并 。
I like to think of this as the easy part depending on your setup. Tools like Netlify and Zeit make this a breeze to configure by hooking into your Github repo and building anytime a new commit gets pushed, but of course you have options like AWS if you want more control.
我喜欢根据您的设置将其视为简单的部分。 像Netlify和Zeit这样的工具通过挂接到您的Github存储库并在每次推送新提交时都进行构建而使配置过程变得轻而易举，但是当然，如果需要更多控制，则可以选择AWS之类的选项。
Need me to pick one? Start with Netlify and that Gatsby site.
需要我选一个吗？ 从Netlify开始， 该Gatsby站点。
Really this can be anything that can be used as an API making requests from the browser. I’m not going to list a bunch of examples per type, but here are a few tools and places you can find some resources.
确实，这可以用作可以从浏览器发出请求的API的任何东西。 我不会列出每种类型的大量示例，但是这里有一些工具和可以找到一些资源的地方。
- Authentication
身份验证
- Media management
媒体管理
- Web traffic analytics
网络流量分析
- Endless list of headless CMSs
无头CMS的无尽列表
- CMS
- DIY, easy to deploy serverless resources
-DIY，易于部署无服务器资源
- Ecommerce
电子商务
- Payment management
-付款管理
You can find a lot of resources to get up and running quickly in the JAMstack world.
在JAMstack世界中，您可以找到很多资源来快速启动和运行。
from me on freeCodeCamp
在freeCodeCamp上托管
from Netlify
from filament group
filament group的
from freeCodeCamp
-freeCodeCamp的
from SnipCart
从SnipCart
from freeCodeCamp
Similar to its serverless counterpart, the days of JAMstack are young. As time goes on, we’ll be seeing the tooling mature and expand providing new exciting ways for us to quickly build fast sites that anyone can use.
类似于其无服务器版本，JAMstack的时代还很年轻。 随着时间的流逝，我们将看到工具的成熟和扩展，这为我们提供了令人振奋的新方法，以便我们快速构建任何人都可以使用的快速站点。
Join in the conversation on Twitter and what your favorite part of building a JAMstack site is!
加入Twitter上的对话， 您最喜欢构建JAMstack网站的部分是什么！
Missing your favorite JAMstack tool or an awesome example? !
缺少您喜欢的JAMstack工具或出色的示例？ ！
翻译自:
转载地址：http://thgwd.baihongyu.com/