web开发伪静态

Jamstack是一种日益流行的Web开发哲学，旨在加快Web开发过程和网页下载时间。 汲取发展速度和持续集成/连续交付 （ CI / CD ）技术（在许多组织中已成为常态）的影响，Jamstack颠覆了用于构建交互式网页，将加载时间代码执行从Web服务器和浏览器中JavaScript和通过应用程序编程接口 （ API ）访问的外部服务。

[ 同样在InfoWorld上：React，Angular和Vue的15种绝佳替代品 ]

什么是Jamstack？ Jamstack，定义

Jamstack是一个基于三个Struts的Web应用程序模型，以其名称提供了缩写： JavaScript，API和标记。 Jamstack网站的网页包含标准标记语言，因此可以在任何地方构建和测试它们，而无需依赖于应用程序服务器或诸如Node.js之类的服务器端技术。 任何交互功能均由在浏览器中执行的标准JavaScript代码提供，该标准JavaScript代码通过HTTPS调用可重用的API，以访问外部数据或任何其他无法内置于网页本身的功能。

要了解Jamstack哲学为何具有革命性意义，请考虑LAMP堆栈 ，它代表了过去15年中大多数开发人员对Web开发的思考方式。 LAMP代表Linux （为大多数Web服务器提供支持的操作系统）， Apache （在这些Linux机器上运行的服务器软件）， MySQL （存储Web应用程序所需信息的数据库）和PHP / Perl / Python （写入服务器端代码）。 当您将浏览器指向基于LAMP的网站时，Web服务器将执行服务器端代码，以动态生成网页，并根据需要从MySQL数据库中提取数据。

LAMP体系结构允许创建动态和交互式网站，但它也需要功能强大的Web服务器-站点获得的流量越多，服务器端所需的计算能力就越大。 即使使用功能齐全的服务器，动态网页也可能花费很长时间来构建和加载。 在一个注意力不集中，跨手机浏览网络的世界中，这种延迟变得越来越令人无法接受。

Jamstack诞生于“静态网络”运动的一部分，该运动于2010年代中期出现，是对这种传统的网站运作方式的React。 要了解Jamstack，您需要了解静态网站背后的当今技术。

静态站点，静态站点生成器和Jamstack

如果您必须向一个新手解释网络的工作原理，则可能是这样的：在Web服务器的文件系统中的某个位置，存在HTML文件，这些文件可以通过HTTP地址访问，网络浏览器会下载HTML文件，然后将其解释为创建网页。 。 但这是对静态站点的描述：它假定HTML文件在Web浏览器寻找它们时已经存在。 正如我们已经看到的，过去十年中，大多数Web都由动态站点控制，动态站点通常根据通过表单或表单传递给Web服务器的参数，动态响应Web请求生成HTML文件。 URL本身。

在网络的早期，当网页始终是静态的时，许多Web开发人员都是手工编写HTML代码的。 随着网页变得越来越复杂，诸如Macromedia的Dreamweaver之类的工具应运而生，它们可以以编程方式生成那些静态HTML页面。 随着静态网页运动在2010年代中期开始兴起 ，包括Gatsby，Hugo和Jeckyll在内的新一波所谓的静态网站生成器开始出现 。 与Dreamweaver之类的WYSIWYG工具不同，静态站点生成器是命令行驱动的，旨在与CI / CD流程集成。 这些工具通常基于Markdown编写的内容来生成HTML文件，然后自动将其上传到GitHub等版本控制存储库。 由于这些文件被标记为可以投入生产，因此实时网站上的静态页面会自动更新。

要记住的重要一点是，在这种情况下， 静态并不意味着它们是不交互式的简单Web 1.0页面。 请记住，这些页面可以包含在浏览器中执行的高级JavaScript，并可以对数据库，服务器端功能或托管的无服务器功能进行API调用。 但是，由于这些执行都不在Web服务器本身上发生，因此静态站点不需要具有数据库的工业供电Web主机。 许多静态站点已部署到内容交付网络或CDN，其中内容在世界各地的多台服务器上进行镜像，以便快速交付给任何地方的用户。

[ 同样在InfoWorld上：每个开发人员心血来潮的17个聪明的API ]

Snipcart的营销主管Mathieu Dionne 在一篇博客文章中描述了静态网站这个新世界的早期 ，并提到在2015年左右，“ Netlify创始人...刚想出'Jamstack'这个词来解决这个问题换句话说，在本节中，我们一直在描述Jamstack的过程。 但是现在我们需要简要讨论Netlify及其在生态系统中的作用。

什么是Netlify？

Netlify是一家云计算和网络托管公司。 Netlify联合创始人Mathias Biilmann 创造了术语Jamstack ，而Netlify的服务是为希望基于Jamstack哲学建立站点的客户量身定制的。

Netlify声称已解决了阻止静态站点的特定问题，即缓存无效。 数据库驱动的动态网站可能会占用大量服务器资源，但是可以肯定的是，它们将为访问过的任何访客提供最新版本的网站。 由于Jamstack网站通常托管在CDN的多个分布式服务器上，因此更新不太直接。 每个CDN服务器可能要花费几分钟到几小时的时间才能弄清楚其缓存版本的站点不再有效。 Netfliy的CDN为HTML文件提供即时缓存无效 ，以解决此问题。

但是Netlify并非Jamstack领域中唯一的托管服务提供商，并且对该期限没有任何商标或专有控制。 有许多Jamstack托管和部署解决方案可用 ，并且大多数大型云提供商都在采取行动，包括AWS ， Google Firebase和Microsoft Azure 。

Jamstack CMS

如果您是每天都要处理网站的人，那么您就会知道建立和托管网站只是开始。 您还需要一种创建新内容并将其添加到您的网站的方法。 因为要这样做的人通常不会是程序员，所以他们需要一个用户友好的工具-即内容管理系统或CMS。 像WordPress这样的传统CMS提供了一个后端UI，您可以在其中输入网站内容，管理存储该内容的数据库以及构建动态网页以响应浏览器请求来显示该内容。

Jamstack站点的CMS的工作方式不同，通常称为无头 CMS 。 无头CMS提供用于输入和管理内容的UI以及数据库或其他存储内容的方法，但它本身不会生成供浏览器解析HTML代码。 相反，网站的静态HTML页面使用JavaScript来调用CMS的API，并且CMS以JavaScript可以转换为网页的格式返回内容。

该系统将内容与表示完全分开，这当然是编程的长期理想。 由于CMS具有可访问的API，因此多个网页都可以轻松访问它。 例如，如果您为网站构建了单独的移动，桌面和智能手表版本，则所有这些版本都可以访问CMS中存储的相同内容。

如您所料，Netlify在此领域有自己的产品，称为NetlifyCMS，但还有许多其他产品可用。 开发人员Nebojsa Radakovic 在一篇博客文章中为您分解了它们 。 该列表上有很多新人，还有一个非常熟悉的名字。 虽然我们使用WordPress作为传统CMS的示例，但WordPress也可以作为无头CMS运行，以为Jamstack网站提供动力。

Jamstack会议

Netlify还致力于创建Jamstack社区并赞助Jamstack会议。 该公司于2019年在纽约，伦敦和旧金山举行了活动 ，并于2020年5月举办了虚拟活动 。 截至撰写本文时，您可以报名预定于2020年10月6日至7日举行的旧金山活动 ，尽管冠状病毒大流行仍使秋季会议计划悬而未决。

如果您想更新，可以在Twitter上关注会议 。 您也可以在Jamstack Conf YouTube频道上查看过去的演讲 。

[ 同样在InfoWorld上：最好的6种JavaScript IDE | 十大最佳JavaScript编辑器 ]

Jamstack教程

想要更深入？ 查看这些Jamstack教程，这些教程将为您提供一些构建Jamstack网站的实践经验：

• 开发人员David Neal提供了一个很好的入门教程，内容涉及如何构建Jamstack网站 ， 该过程非常简单，然后变得越来越复杂。
• 在LogRocket博客上，软件工程师Ogundipe Samuel 提供了有关按Jamstack原理构建电子商务网站的深入分步指南。
• Netlify提供了三个小时的视频教程 ，涵盖了从基础到更高级主题的许多基础。

掌握了此处概述的基本概念后，您就可以开始在职业生涯中开始进行Jamstack开发了。 学习愉快！

翻译自: https://www.infoworld.com/article/3563829/jamstack-the-static-website-revolution-upending-web-development.html

web开发伪静态