一文看懂什么是JAMstack

Pedro Duarte是一位伦敦的前端开发者,拥有超过10年的开发经验,他制作了一个介绍JAMstack的网站,让你一文看懂什么是JAMstack,并列出了JAMstack的学习资料和第三方服务。

JAM表示JavaScript, API 和 Markup。JAMstack是一个现代的Web开发架构,基于在客户端使用的JavaScript、可重用的API、预构建的Markup。

JavaScript负责处理动态功能,不限制使用哪个框架或库,运行在客户端上。

API表示服务器端的抽象的、可重用的操作,并通过HTTPS使用JavaScript进行访问,可以是第三方服务或自定义的功能。

Markup是标记语言文件,例如网站的静态HTML文件,可以从Markdown之类的源文件生成。

JAMstack有很多好处:
1、更快的性能,通过CDN提供预先构建的标记文件和Assets。
2、更安全,无需担心服务器或数据库的漏洞。
3、更便宜,托管静态文件很便宜甚至免费。
4、更好的开发体验,前端开发人员可以专注于前端,不必依赖于传统的一体化架构。
5、可扩展性,如果产品在传播时突然拥有许多活跃用户,CDN将无缝补齐所需资源。

JAMstack的最佳做法:
1、使用CDN, 这提供了更好的性能和更轻松的可扩展性。
2、原子部署,每个部署都是站点的完整快照, 可保证全球网站版本的一致。
3、上传新构建的版本后,CDN使缓存无效,可使新版本即时生效。
4、把代码放到Git,可记录每个文件的历史更改,方便协作和追溯。
5、当需要新构建时,webhooks会通知服务器,构建后实时更新CDN和站点。

JAMstack的一个理想的工作流:

其它关于JAMstack的时间线、入门、开发、部署、动态部分、CMS、资源等,可参见jamstack.wtf。

Pedro Duarte的JAMstack网站:
https://jamstack.wtf/

网站jamstack.wtf的源代码:
https://github.com/peduarte/jamstack-wtf

Pedro Duarte的个人网站:
https://ped.ro/

评论

  • 补充一个有用的资源: https://www.staticgen.com/ ,上面列出了大量可用于实践JAMstack方法论的静态网站生成器,帮助你实现从"JS- API-Markup"构建出静态应用的核心逻辑

    还有 https://headlesscms.org/ ,列出了很多无头CMS,可以帮助你找到合适的"JS- API-Markup"中的API实现

登录注册后才能评论。