20201204.md

JAMStack

什么是JAMStack？

JAM 是三个词的缩写，分别为 JavaScript, API & Markup。

Stack 就是我们常说的技术栈（Tech Stack），即我们在使用 JAM 构建应用的时候具体使用的技术的集合。

所以说，JAMStack是一种问题解决方案，而不是一个具体的实现。

• JavaScript

  动态的功能使用 JavaScript 来处理，并不限定使用特定的框架或者库。

• APIs

  服务器端操作被抽象为可重用的 API，并通过 HTTPS 使用 JavaScript 进行访问。这些可以是第三方服务或您的自定义功能。

• Markup

  网站用作静态 HTML 文件。这些可以使用静态站点生成器从源文件（如 Markdown）生成。

发展过程：

为什么使用 JAMStack ？

• 降低复杂度，更好的性能

  JAMStack 的应用将网站的静态部分和动态部分区分开来了，那些不会频繁发生变化的内容会被提前生成，从而无需使用额外的计算资源来进行服务端渲染。这样用户首次访问某个页面的时候速度会变得很快，而且这些静态的资源还可以被放在 CDN 来进一步提升用户体验。将动态内容和静态内容区分开来还有另外一个好处，就是我们后端接口的职责更加明确了，API 接口的数量会变得更少，性能也会变得更好。同时，JAMStack app 允许我们只使用 CDN，可以跳过服务器，数据库，负载均衡的设置。

• 高性价比以及高可扩展性

  由于我们前端的内容都是一些静态的文件没有服务端渲染的要求，而静态资源服务器对性能的要求并不高，所以我们在购买服务器方面不需要很大的成本，我们甚至还可以使用一些诸如 netlify 和 Gatsby Cloud 等免费资源来托管我们的文件。对于后端来说由于我们已经将前后端彻底分离了，所以后端可以使用一些廉价的 Baas 或者Serverless 服务，例如可以使用 [Auth0](auth0: Identity is Complex. Deal with it.) 作为我们的用户鉴权服务，使用 Firebase 作为我们的接口服务等等。使用这些 Baas 和 Serverless 服务有一个好处就是它们很便宜，而且它们是按照接口使用量来收费的，你的用户量决定了你的支出，如果你的用户很少，甚至可以免费使用。

  AMStack还有很好的扩展性。举个例子，假如你现在的博客网站因为某一篇博客突然火了，访问用户激增。如果你的前端静态文件使用的是 CDN 网络的话，你的网站很容易就可以扩展了，一切都是自动的，无需你做任何东西，而后端如果你使用了 Serverless 和 Baas 的解决方案的话，也会自动扩展，用户的基本不会感到体验的区别。

• 更好的开发体验

  拿 Gatsby 来举例，它就允许我们使用一些现代的前端技术来进行开发，例如 React，Styled-components 和GraphQL等，这些都是我们前端开发者十分熟悉的技术了，没有很大的学习成本所以开发者体验会很好。除此之外，由于 Gatsby 使用了React，所以它间接上接入了 React 的生态系统，这样开发者在开发 Gatsby 应用时就可以使用 React 生态的各种最佳实践和库实现了，这无疑可以大大提高我们的开发效率。

• 安全性更好

  由于JAMStack是一种前后端分离的技术，没有了后端渲染所以可以降低被攻击的风险。

EXAMPLE：

freeCodeCamp.org 在 19 年基于 Gatsby 将网站重构为了 JAMStack React web 应用。

freeCodeCamp 五周年记

使用 Google Lighthouse 测评一下 freeCodeCamp 的性能：

workflow

DEMO：

• 创建一个简单的 JAMStack 网站

  • 创建仓库
  • 网站代码

• 部署 JAMStack 网站

  • 下载 netlify-cli yarn global add netlify-cli
  • 配置 netlify 账号，配置 AUTH_TOKEN netlify-login
  • 初始化 netlify init
  • 发布

JAMStack 的网站不一定都是静态的，一些服务为网站提供动态内容：

• Serverless functions

  可以将一些函数抽象成可复用的 APIs，可以使用 AWS lambda functions or Netlify Functions 。

  

• Custom data

  As you add features to your site, you may want to store user profiles, shopping cart data, game levels, or other dynamic data. Get started for free with FaunaDB Serverless GraphQL

• comments

• forms

• search

使用 Serveless function

使用 netlify

• 创建 function handler
• 配置 netlify.toml 文件
• 运行 netlify dev , 打开 localhost:8888/.netlify/functions/${functionName}

JAMStack 适合什么应用

虽然使用 JAMStack 有很多好处，但 JAMStack 并不适合所有的应用场景。 JAMStack 需要我们将网站的静态内容与动态内容区分开，静态内容在构建的时候生成，而动态的内容会再浏览器进行渲染。基于这个特点，不适合构建以下类型的应用：

• 掘金，知乎： 主要由第三方用户创建的内容。 内容会不断的修改与创建，JAMStack 内容会被频繁的创建。
• 微博，推特： 这类应用除了频繁的更新外，还有大量的动态内容。
• 不需要 SEO 的应用。
• 内容很多的应用，例如静态页面很多，每次构建可能需要花费大量的时间。

适合使用 JAMStack 的应用：

• 项目文档之类的网站，例如 React 的官网等。
• 企业或者组织的官方网站。
• 个人管理的博客网站。
• 中小型规模的CMS平台。
• 中小型的电商平台。
• 既有需要被SEO的静态内容又有动态的不需要SEO的内容的混合应用。例如一些 To B 的平台，里面既有用户的工作台又有一些操作文档相关的静态内容。

参考资料

JAMstack WTF

WordPress终结者：进击的JAMStack

New to JAMstack? Everything You Need to Know to Get Started

Introduction to the JAMStack

前端新鲜事

• State of CSS 2020 调研结果发布 State of CSS 2020

• State of Frontend 2020 State of frontend 2020

• ES2021, will release in June 2021

  • String.prototype.replaceAll

    

  • Private Methods

    

  • Private Accessors

    

  • Promise.any()

    

  • Logical Assignment Operator(&& || ??)

    

    

    

  • WeakRef

    

  • Finalizers