JAMstack是指使用JavaScript、API和Markup构建的技术堆栈,JAM是JavaScript、API和Markup的简称,前面第一个字母缩写,JAMstack一种基于客户端JavaScript,可重用API和预构建Markup的现代Web开发架构,需要符合下面三个标准:
- JavaScript:请求/响应周期中的任何动态编程都由JavaScript处理,完全在客户端上运行。这可以是任何前端框架,库,甚至是轻量JavaScript。
- API:所有服务器端进程或数据库操作都被抽象为可重用的API,使用JavaScript通过HTTPS访问。这些可以是定制的或利用第三方服务。
- Markup:模板化标记应该在部署时预先构建,通常使用内容站点的站点生成器或Web应用程序的构建工具。
当我们谈论“堆栈”时,我们不再谈论操作系统,特定Web服务器,后端编程语言或数据库。JAMstack与特定技术无关。这是一种构建网站和应用程序的新方法,可提供更好的性能,更高的安全性,更低的扩展成本以及更好的开发人员体验。
依赖于客户端和服务器之间紧密耦合的任何项目都不是使用JAMstack构建的。包括:
- 使用服务器端CMS构建的站点,如WordPress,Drupal,Joomla或Squarespace。
- 一个单片服务器运行的Web应用程序,它依赖于Ruby,Node或其他后端语言。
- 单页应用程序,使用同构呈现在运行时在服务器上构建视图。
-
更好的性能:为什么要在部署时生成页面时等待页面动态构建?当谈到最小化第一个字节的时间时,没有什么能比通过CDN提供的预构建文件更好。
-
快速的部署:可以轻松部署JAMstack网站,而无需经历配置数据库,保护.htaccess等麻烦,只需处理静态文件,因此可以快速在CDN上部署运行。
-
安全性更高:将服务器端进程抽象为微服务API,可以减少攻击的表面区域。您还可以利用专业第三方服务的专业知识。
-
更便宜,更容易扩展:当您的部署相当于可以在任何地方提供服务的一堆文件时,扩展就是在更多地方提供这些文件的问题。CDN是完美的,通常包括扩展他们的所有计划。
-
更好的开发者体验:松散耦合和控制分离允许更有针对性的开发和调试,并且为站点生成器扩展选择CMS选项消除了为内容和营销维护单独堆栈的需要。
在构建JAMstack项目时,如果您坚持一些最佳实践,您可以真正获得最大的收益。
因为JAMstack项目不依赖于服务器端代码,所以可以分发它们而不是保存在单个服务器上。直接从CDN服务可以解锁无法超越的速度和性能。您可以推送到边缘的应用程序越多,用户体验就越好。
使用JAMstack项目,任何人都应该能够使用git clone标准过程(如npm install)安装任何所需的依赖项,并准备好在本地运行整个项目。没有要克隆的数据库,没有复杂的安装。这减少了贡献者的摩擦,并且还简化了分段和测试工作流程。
充分利用现代构建工具的世界。它可以成为一个面向丛林的丛林,它是一个快速移动的空间,但你希望今天能够使用明天的网络标准,而无需等待明天的浏览器。目前这意味着Babel,PostCSS,Webpack是朋友。
由于JAMstack标记是预先构建的,因此在运行其他构建之前,内容更改不会生效。自动化此过程将为您节省很多挫折感。您可以使用webhook自行完成此操作,也可以使用自动包含该服务的发布平台。
随着JAMstack项目变得非常庞大,新的更改可能需要重新部署数百个文件。一次上载这些一个可能会在进程完成时导致不一致的状态。您可以使用允许您执行“原子部署”的系统来避免这种情况,在上传所有已更改的文件之前,不会进行任何更改。
当构建到部署周期变得经常发生时,您需要知道当部署上线时,它真的会上线。通过确保您的CDN可以处理即时缓存清除来消除任何疑问。
使用成熟可靠的静态站点生成器可以在几分钟内构建JAMstack网站和应用,推荐以下几款流行的,新美文使用过,且模板选择较多。
-
Jekyll:一个最早、简单、可扩展的静态站点生成器,得到Github全面支持,可方便免费部署在Github。
-
Hexo:是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
-
Hugo:使用go语言开发,最受欢迎的开源静态站点生成器之一,凭借其惊人的速度和灵活性,使用Hugo制作网站变得轻松和灵活。
-
Gatsby:一个基于React的免费开源框架,可以帮助开发人员构建超快速的网站和应用程序,用过之后会对浏览速度发出惊叹。
-
Gridsome:一个Vue.js驱动的现代站点生成器。