Jamstack到底是什么？

　　JAMstack站点现在在当前的Web开发世界中风靡一时。理所当然！但它到底是什么，我们又该如何利用它的好处呢？这个Jamstack是什么？
　　在具体回答这个概念之前，我们先来看几个符合Jamstack风格的网站，用具体的例子来体验一下。
　　第一个网站，impossiblefoods，这个网站是给大家介绍如何用植物制作有肉类口感的食物，从而实现节能减排、绿色环保等目标。
　　抛开内容不谈，这个网站的设计和交互，都是很好的，很现代化的一个网站，例如看下面的时间线交互效果：
　　如果说这个网站的展示型内容还是很多的恶化，那么来看另外一个网站freecodecamp（简称FCC），FreeCodeCamp是一个自由开源的学习编程的社区，致力于帮助人们利用零散时间学习编程。它的使命是Learntocodeandhelpnonprofits（学习编程，去帮助那些非盈利组织）。FCC涵盖HTML5、CSS、React、JavaScript、Database等课程，游戏化程度非常高，学员可以通过线上聊天室和线下社区活动（CoffeeandCode）相互帮助。可以说是类似于我们国内的传智播客。
　　先来看这个网站，内容虽然朴实无华，但是交互性还是很好的：
　　中文版：
　　在展开具体的学习时，里面的内容也非常详尽：
　　而这些内容，居然不是使用我们所熟知的React，Vue。js等技术开发的，而是采用了Jamstack的技术栈，采用Gatsby。js等技术搭建的，如果大家有兴趣，可以去看创始人的介绍视频。
　　视频加载中。。。
　　下面是从视频里截选的FCC网站的三个架构阶段：
　　第一版
　　第二版
　　第三版
　　如果对比传智教育的网站，那么可以说FCC的网站就是非常的轻量级，仅仅使用Gatsby。js以及一些后端API，结果就是，FCC在开发、运维方面具有极低的成本，这也是其竞争优势所在。
　　如果说，FCC还不是很著名的话，那么来看看Google的Web。dev，估计这会是一个Web开发人员喜爱的新项目。该项目的功能是通过可操作的指导和分析，帮助开发人员学习并将Web的现代功能应用到其站点和应用中。
　　项目主体分为两部分：Learn和Measure。
　　在Learn部分中，有不同教程指导开发者探索体系化的Web开发学习路径，了解有关构建现代化Web的相关信息。
　　Measure部分用于监控应用，检查应用性能并获得有关如何改进的详细指导。
　　难以置信的是，这么一个功能复杂的一个网站，居然也是采用Jamstack技术来构建的，具体而言使用的是11ty，而且代码也是开源的（GoogleChromeweb。dev）。
　　看过了上面这些网站，我们可以看出，这些采用Jamstack的网站，整体上跟我们平时所见的用Vue。js等开发的业务类网站，似乎也没什么区别，我们再来看，到底什么是Jamstack。什么是Jamstack
　　首先，Jamstack是一种构建网站和web应用程序的新方法。Jamstack的Stack指的是许多独立，但是可以组合的技术层。当它们结合在一起时能够提供一个完整的web应用。
　　Jamstack架构中的JAM是指客户端JavaScript、可重用的后端API，和用户界面的Markup，比如HTML与CSS。
　　Jamstack的关键特征是前端WebUI与基于API的后端服务之间的清晰区分。与垂直集成的传统Web应用程序不同的是，Jamstack应用程序是模块化和分散式的：UI可以通过静态网页服务器、CDN、甚至基于区块链的存储进行分发；后端API服务可以部署在云上，也可以由边缘节点就近提供服务。
　　作为一个技术栈（Stack）而不是一个具体的技术，从技术栈比较的角度来看，用于开发Web应用程序的另一个常见技术栈是LAMP（Linux，Apache，MySQL，PHP）以后其后的MEAN（MongoDB，Express。JS，Angular，Node。JS）。LAMP概览
　　从上面的图表可以看出，从应用开发者的角度，当使用LAMP技术栈时，有很多的组件可以安装，并且可以同时配置和维护。LAMP应用的用户界面是由后端服务器动态生成的。绝大部分逻辑与计算都在服务器上。前端的浏览器只负责渲染。
　　MEAN概览
　　MEAN堆栈是用于开发web应用程序的基于JavaScript的框架。MEAN以MongoDB、Express、Angular和Node这四种构成堆栈层的关键技术命名。
　　MongoDB文档数据库
　　Express（。js）Node。jsweb框架
　　Angular（。js）客户端JavaScript框架
　　Node（。js）主要的JavaScriptweb服务器
　　MEAN技术栈概览
　　MEAN堆栈有多种变体，如MERN（用React。js替换Angular。js）和MEVN（使用Vue。js）。MEAN堆栈是构建web应用程序最流行的技术概念之一。JAM概览
　　与LAMP、MEAN技术栈相比，Jamstack在许多不同之处，这对开发者构建网站或web应用的方式有着深远的影响。从部署架构上讲，Jamstack应用的用户界面是通过编译生成的静态网页，从而大大提高了性能，安全性，以及降低了服务端的复杂度与计算负载。
　　从开发者的角度来看，一些主要的区别包括：Jamstack开发者不需要安装或管理操作系统（如Linux）Jamstack开发者不需要管理安全策略（服务器防火墙）Jamstack开发者不需要安装或管理应用程序数据库（如MySQL）Jamstack开发者可以在不使用HTTP（Web）服务器（如Apache）的情况下部署Web站点或Web应用
　　总体而言，选择使用Jamstack创建网站和web应用有4个主要好处：成本效益性能改进更好的安全性更好的用户开发者体验Jamstack由什么组成？
　　回到Jamstack：它通常由3个组件组成：Javascript、API和标记。它的历史源于静态站点一词，但是Jamstack后续发展成为更有意义和更有市场价值。虽然最终的产品都是静态站点，但是Jamstack在产生静态网站的每一个步骤都采用了一流的设计和工具，从而产生了独特的价值。
　　虽然您不需要使用任何特定的工具集，或者除了简单的HTML之外根本没有任何工具，但是有很好的示例可以说明堆栈的每个部分是由什么组成的。让我们深入了解每个组件。Javascript
　　为普及JAMstack做最多工作的组件可能是Javascript。我们最喜欢的浏览器语言允许我们提供所有动态和交互位，如果我们在没有它的情况下提供纯HTML，我们可能没有这些位。
　　这是很多时候你会看到像React、Vue这样的UI框架和像Svelte这样的新来者发挥作用的地方。
　　React的简单示例，采用JavaScript
　　他们通过提供组件API和工具编译成一个简单的HTML文件（或一堆），使构建应用程序更简单、更有条理。
　　这些HTML文件包括一组资产，如图像、CSS和最终通过您最喜欢的CDN（内容分发网络）提供给浏览器的实际JS。API
　　利用API的优势是使Jamstack应用程序动态化的核心。无论是身份验证还是搜索，您的应用程序都将使用Javascript向另一个提供商发出HTTP请求，这最终将以一种或另一种形式增强体验。
　　Gatsby创造了内容网格（ContextMesh）这个词，如下图所示，描述了传统的全栈CMS和目前模块化的、无头CMS架构的区别
　　内容网格
　　您不必只联系一个API的主机，但您可以根据需要联系尽可能多的主机（但尽量不要过火）。
　　例如，如果您有一个用于托管博客文章的无头WordpressAPI，一个用于存储专业媒体的Cloudinary帐户，以及一个提供搜索功能的Elasticsearch实例，那么它们将协同工作，为使用它们的用户提供单一体验你的网站。Markup
　　这是关键部分。无论是您手写的HTML还是编译成HTML的代码，它都是您提供给客户的第一部分。这实际上是任何网站的一部分，但您如何提供服务才是最重要的部分。
　　要被视为JAMstack应用程序，HTML需要静态提供，这基本上意味着不能从服务器动态呈现。
　　如果您将一个页面拼凑在一起并使用PHP提供服务，它可能不是JAMstack应用程序。如果您从使用Javascript构建应用程序的存储中上传并提供单个HTML文件，它听起来就像一个JAMstack应用程序。
　　AWSS3上Gatsby的静态输出
　　但这并不意味着我们必须始终在浏览器中构建100的应用程序。像Gatsby和其他静态站点生成器这样的工具允许我们在构建时提取部分或全部API源并将页面呈现为HTML文件。
　　想一想如果您有一个Wordpress博客，我们可以提取所有帖子并最终为每个帖子创建一个新的HTML文件。这意味着我们将能够直接向浏览器提供页面的预编译版本，这通常等同于为您的访问者提供更快的首次绘制和更快的体验。
　　介绍到这里，对于Jamstack的基本概念，已经介绍的差不多了，下面就来看看，如何构建一个具有Jamstack风格的网站。开始尝试Jamstack，我可以使用哪些工具来构建JAMstack站点或应用程序？构建您的应用
　　这是有趣的部分。你打算如何构建你的应用程序？这里有一些流行的开始，但绝不是详尽无遗的。11ty（喜欢Go语言的，可以尝试这个，目前Google力荐）GatsbyHugoNiftScully（如果喜欢Angular的话，不妨尝试这个）Gridsome（Vue。js构建，熟悉Vue。js的可以尝试）
　　后续会专门写几篇文章，介绍如何使用这些Jamstack工具来创建网站