介绍
Web 开发经常涉及到不同开发栈的使用,包括 LAMP 栈、MEAN 栈、MERN 栈等。 JAMstack 是另一个为开发人员提供一些独特优势的堆栈。 本文将讨论这些好处以及一些通用定义和术语,以便介绍 JAMstack。
什么是 JAMstack?
静态网站最近在使用和功能方面一直在增长。 不再是 HTML 和 CSS 文件的集合,静态网站可以处理付款、处理实时活动等。 将这些站点称为“静态”会破坏和低估它们的功能。 因此,术语 JAMstack。
JAMstack 代表 JavaScript、API 和 Markup。 根据官方网站,JAMstack的意思是:
基于客户端 JavaScript、可重用 API 和预构建标记的现代 Web 开发架构。
该术语是由 Netlify 的联合创始人 Mathias Biilmann 创造的。
在 JAMstack 中,我们不再讨论操作系统、Web 服务器、后端编程语言或数据库等特定技术。 这是一种构建网站和应用程序的新方法,可提供更好的性能、更高的安全性、更低的扩展成本和更简化的开发人员体验。
为什么是 JAMstack?
什么时候应该考虑使用 JAMstack? 您可能会考虑使用 JAMstack 的一些原因包括:
- 更快的性能: 因为 JAMstack 网站是预先构建的 HTML 和资产,所以可以通过 CDN 提供服务。
- 更高的安全性: JAMstack 网站减少了服务器和数据库表面区域的漏洞。
- 更低的成本: 运行 JAMstack 网站的成本通常低于同类替代方案,因为它使用的资源更少。
- 更好的开发者体验: 使用 JAMstack,应用程序后端和前端之间没有紧密耦合。 这意味着您可以从不同的 CMS 和内容基础架构选项中进行选择,无需使用单独的堆栈来维护和提供内容。 使用 JAMstack 还简化了使用第三方服务的过程,例如 Algolia 和 Netlify Forms。
还有越来越多的服务将动态功能集成到 JAMstack 网站中,包括:
- Netlify Identity,支持注册管理、登录、密码恢复等。
- 使用 Algolia 和 Lunr.js 进行全文搜索。
- 使用 Formspree 或 Netlify Forms 处理表单。
如何使用 JAMstack 构建
为了使用 JAMstack 构建项目,它必须满足以下条件:
- JavaScript: 请求/响应周期中的任何动态编程都由 JavaScript 处理,完全在客户端上运行。 这可以是任何前端框架,如 Vue.js、React、Angular 等。 甚至是原生 JavaScript。
- API: 所有服务器端进程或数据库操作都被抽象为可重用的 API,通过 HTTP 和 JavaScript 访问。 这些可以定制或利用第三方服务。
- 标记: 模板标记应在部署时预先构建,通常使用站点生成器,如 GatsbyJS、Nuxt.js 或 Hugo[X156X ] 用于内容站点,或构建工具,如 Webpack 或 ParcelJS 用于 Web 应用程序。
考虑到这些,以下项目是 而非 JAMstack 项目:
- 使用 WordPress、Drupal 等服务器端 CMS 构建的项目。
- 一个单片服务器运行的 Web 应用程序,它依赖于 PHP、Node 或任何其他后端语言等后端语言。
- 使用同构渲染在运行时在服务器上构建视图的单页应用程序 (SPA)。
使用 JAMstack 构建项目时,请牢记以下最佳实践:
- 整个站点应该在 CDN 上提供。
- 采用原子部署。
- 使用即时缓存失效。
- 一切都应该存在于 Git 上。
- 标记构建应该是自动化的。
结论
在本文中,您了解了 JAMstack 是什么以及为什么您可能会在下一个项目中考虑使用它。 您还了解了 JAMstack 站点的项目要求。 对于使用 JAMstack 构建的网站和 Web 应用程序的示例,您还可以查看这些 官方示例 。