持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

JavaScript 框架演进史

本文将回顾 JavaScript 框架演进史，从原始html到现在流行的框架，从刀耕火种到现代的自动化构建，将从以下几个重要阶段作为主线：

近年来前端领域的框架层出不穷，对于那些进入该行业的人来说，要了解新库、框架、概念和强烈意见中正在发生的事情是一项挑战。本文借鉴REM的The new wave of Javascript web frameworks。

万维网刚开始流行起来的时候，网页的作用就是展示一个一个静态文档，让世界各地的人可以通过网络远程查看文档。

后来，PHP很好的将HTML和后端连接在一起，可以以编程的方式动态嵌入值，使得HTML也有动态数据。

// HTML 嵌入PHP 动态值
<?php echo userName; ?>

后来随着 JS 的发展，开始在页面上嵌入更多的 JS 代码。

一开始 JS 的作用仅仅是用于管理会话，cookie、表单等内容，后来基于服务器的模板框架出现在现在与数据库对话的语言生态系统中。这些框架使从静态页面开始并扩展到动态页面变得容易。

网络发展迅速，JS 仅仅用于管理会话已经不能够满足于用户需求，这时候 JS 的职责来了第一次空前飞跃，于是 jQuery 横空出世，并力压其他框架，成为很长时间以来的王者。

接下来， Ajax 也出现了，这时 JS 可以做更多的事情，比如通过异步刷新局部页面。

JS 开发人员并没有停下脚步，node出现了，使得后端也能用前端相同的语言开发。

接下来一段时间内，jQuery 被越来越多网页使用，一些基于 jQuery 的 ui 库也诞生了，例如jQuery UI, Dojo, Mootools, ExtJs和YUI等。

但是页面增长速度实在太快了，大量相似的页面等着开发者去处理，导致前端与后端开发者开始疯狂复制模板代码。后来 MVC 、 MVVM 等框架开始出现，开发者们终于意识到前后端分离是大势所趋了。

接下来 Angular 出现，他的双向数据绑定让很多前端开发者大受启发，也让开发者们提高了效率。

前端发展到了一个新高度，但是发展并没有因此放慢脚步，反而是加快了步伐。React 发布第一版已经是9年前的事情了，当时 React 在Facebook 诞生，目的是解决以下两个问题：

Facebook 接着推出 React ，让前端开发者可以以声明式编写前端代码，并且由数据驱动，这样再也不用从页面那个混乱的数据流中整理、编写代码了。

SPA时代不单单是让数据驱动页面，还提到了前端路由、虚拟 DOM 等概念。

随着页面越来越大，越来越重的原因，虚拟 DOM 和真实 DOM 之间发生协调时，页面经常变得无响应，这导致后来 React 的全面重写。

我们将继续绕道而行，以了解如何大规模缓解 React 的一些权衡。这将有助于在新框架中构建模式。

优化运行时成本

在 React 中无法绕过虚拟 DOM 的运行时成本。并发模式是在高度交互的体验中保持响应的答案。

在 JS 中的 CSS 领域，使用了一个名为Stylex的内部库。当呈现数千个组件时，这可以保持符合人体工程学的开发人员体验，而不会产生运行时成本。
优化网络

Facebook 使用Relay避免了顺序网络瀑布问题。

对于给定的入口点，静态分析准确地确定需要加载哪些代码和数据。

这意味着代码和数据都可以在优化的 graphQL 查询中并行加载。

对于初始负载和 SPA 转换，这比顺序网络瀑布要快得多。
优化 Javascript 包

这里的一个基本问题是发布与特定用户无关的 Javascript。

当有针对特定类型和用户群的 A/B 测试、功能标记体验和代码时，这很难。还有语言和区域设置。

当有许多代码分支时，静态依赖图无法看到在实践中针对特定用户群一起使用的模块。

Facebook 使用人工智能驱动的动态捆绑系统。这利用其紧密的客户端-服务器集成来根据运行时的请求计算最佳依赖关系图。

这与基于优先级分阶段加载捆绑包的框架相结合。

VUE
- 当人们评估迁移到 Angular 2 或 React 时，Vue 填补了入门门槛低的空白。
Svelte
- Svelte 开创了预编译方法，消除了我们在运行时看到的复杂性和开销。
- 前几个月 VUE 作者尤大大重点强调了这个可以自行编译的框架，并具有最小的 vanilla JavaScript 的流线型输出框架，在 github 上已有不少的start。
Solid
- Solid 带有一个简单且可预测的反应模型。与 React 一样，它避开了模板以便于函数的可组合性。

最后，让我们一起加油吧！

极简 JavaScript 框架演进史