本文已参与「新人创作礼」活动， 一起开启掘金创作之路。
前景
1995年，JavaScript被捆入网景浏览器，横空出世，我也在这年，来到了这个世界。虽然从小我认为将来我一定能成为一名优秀的航天员，最终也不得已不面对现实，成为了一名光荣的前端开发者。
从最开始的蹭Java热度的表单验证脚本，到2015年的 ES5，JavaScript已经成为了互联网世界的重要一环。同时，在TC39和全世界前端开发者的努力下，如今也已是来到了ES13。
尽管JavaScript不是世界上最好的语言，但是毋庸置疑的是JavaScript绝对是世界上最成功的编程语言之一。无数个挑战者，败倒在了它的脚下。并且它还在不断的进化、扩张。
2005年，Gmail借助于JavaScript和Ajax技术，一举成为最受欢迎的邮箱。也让人们首次看到，JavaScript也能构建大型网页应用，也让大家发现了JavaScript这门语言无法想象的潜力，开放、和包容也让这门语言的迅速崛起变得不可阻挡。
紧随其后，诞生了prototypejs、jQuery等类库工具，让互联网百花齐放。prototypejs将脚本语言的灵活性、jQuery将函数式编程运用到了极致。如今他们的api部分已纳入JavaScript标准之内。
即使当时JavaScript还是一门非常不完善、且处处充满妥协的语言。但是它简短的语法，吸引了一大批开发者和团队，Jeff Atwood 在07年提出了著名的 Atwood 定律, 即: 任何能够用JavaScript实现的应用系统，最终都必将用JavaScript实现（Any application that can be written in JavaScript, will eventually be written in JavaScript）.
紧随其后，Google主导开发的V8引擎, 让JavaScript程序运行速度能媲美二进制编译，同时也给了这门语言更多可能，09年Ryan Dahl基于V8引擎，推出了Nodejs，JavaScript run anyway 成为了一种可能，这也标志着前端刀耕火种时代落幕，一个崭新的时代即将来临。
工程化
Nodejs 通过 commonjs规范，实现了代码模块化，从此js代码不再需要写成一个单文本文件，这也让代码复用、多人协作成为了现实。同时，它也具有与系统底层交互、IO操作的能力。借助于JavaScript庞大的开发者力量，很快用JavaScript编写的服务端程序、命令行程序、桌面应用，遍布于全世界的每一台电脑上。此刻，我们真的看到了Jeff Atwood的定律在慢慢变成现实。
群雄并起
同时也诞生一系列的Nodejs现代化工具，Babel可将今天最新的ES语法转换成低级语法、Webpack可将多文件工程进行打包构建成面向浏览器的静态资源，基于ESM规范进行tree-shaking等。自此现代化的前端工程体系的建立条件已基本具备。
09年谷歌的Java工程师使用MVC架构创立了Angularjs，CoffeeScript的作者Jeremy Ashkenas首次将微软的MVVM架构搬入到前端生态中创立了Backbone框架。
但是Backbone本质上还是一款事件驱动型的框架，它没有VirtialDOM机制，只能通过采用事件来将数据与真实DOM进行绑定，并且由于Router功能较弱、没有实现完备的事件卸载机制。在运行较久后会生成不少存在绑定关系但数据永远不会变化僵尸视图，从而导致内存溢出。
而Angularjs照搬Java的那套MVC，移动端不友好（09年还没有进入移动端的时代，angularjs代码量过大，移动端当时性能较差，难以支撑此框架运行）、学习成本过高、路线陡峭、同时也有MVC架构在客户端的天生缺陷，如：Controller过度依赖于View层（前端面向用户，View层是一等公民，Controller依赖于View层来创建），并且过于倚重于Controller层，它需要同时响应事件且处理业务逻辑，这违背了单一职责原则。
虽然这些框架已经将要消失在我们的视野中，但他们也成为前端现代框架的基石。后继者通过更先进数据驱动的MVVM模式，单向数据流、VirtualDOM、diff算法，成功的在前端界留下一席之地。
Angular/React/Vue 三分天下
更Mordern的现代前端框架：
- 数据驱动的
MVVM模式(model、view、view-model),model通过单向数据流驱动view-model更新，view-model通过检测机制来算出需更新部分，并patch到对应的view层，view层再通过事件来通知model层。 也就是model层响应事件、生产数据，view-model是对视图的描述和与model层绑定关系的描述，view层为最终展示给用户的界面，通常这部分由框架实现。 - 组件化支持程度高，前端组件是最小开发单元。
- 跨端支持。
typescript支持。
Angular
谷歌在之后的时间里也发现了MVC架构在前端行不通，12年推翻了Angularjs发布了Angular2，也就是现在的Angular。
Angular, 通过模板、指令、装饰器语法来实现视图层与数据的绑定，通过Dirty Checking机制，来对作用域内数据进行检测，与视图进行比对，然后更新视图。但是Dirty Checking机制检测机制会导致性能开销较大。
Angular的核心优势在于TypeScript，他相比同期的React、Vue（当时React、Vue所采用的是Flowjs）, 有强类型的支持，开发大型应用，能很大程度上保证项目的稳定性。但是很快Vue、React向TypeScript上迁移，它唯一的优势也不存在了。
React
随后Facebook发布的React，使用了JSX语法来描述VirtualDOM，通过显示调用setState来进行修改单向数据流数据。并通过fiber算法，来对新的view-model和旧的view-model进行对比，并将差异部分更新到对应的视图，相比angular的脏检测机制，性能更优。
前端面向用户，view是一等公民。而且面向用户的view几乎不会有继承关系的存在。在前端组合永远大于继承。既然在前端没有继承关系存在，那么Class也没有存在的必要了。在React@16.8中，发布hook的特性，自此也就可以通过hook来编写有状态的函数组件来进行组件组合了。
Vue
集百家之所长，弃百家之所短。Vue就是这样一种框架。既拥有Angular的指令、管道、双向绑定，也拥有React的VirtualDOM、Diff算法。同时，Vue通过js的元编程能力来对数据的操作进行劫持，通过发布订阅模式来对数据的变更操作同步到视图。Vue的数据更新相对React更精准，颗粒度更精细。
Vue采用双端diff算法来对新旧virtualDOM进行比对，双端diff算法优点能更方便的进行dom复用。
同时Vue3采用了更复杂的方式来进行，vue3基于template语法描述组件，其中有些部分能在编译期就能确定结构，这样双端算法能更快。
后起之秀
随着时间Angular的市场地位仍在不断被其他框架所挤兑，前端三驾马车齐驱并进的局面在未来迟早会被打破。随着时间向前，框架功能、体积也在梯度上升。轻运行时、性能更好的框架也在蓄势待发。
Preact
Preact是一款非常轻量化（3KB）的React的实现，甚至它还能完全兼容React。目前很多重度依赖React框架的公司，都在准备向Preact上迁移。
Svelte
No vritual DOM、LightWeight就是 Svelte最好的简介, Svelte采用的是类似于Vue的SFC语法，没有虚拟DOM，自然也就没有了DIFF算法，编写出来的代码，最终都会编译成根据数据去直接操作DOM的语法，不到 5KB 框架体积，就实现了响应式能力。Svelte在编写轻型、小型应用时，性能会高于前端三驾马车，但是在编写中大型应用时，操作DOM的频率会更高，性能反倒不如传统框架了。不过No virtual DOM或许将会是主流趋势，因为现在Vue也有计划开发一个No virtual DOM的版本。
Solidjs
同样也是一款No virtual DOM的框架，号称目前性能最好的前端框架，性能直逼原生JS。采用的是JSX语法。当然它的体积也是非常轻量，只有7KB。
但是其实三款框架在语法层面上还是无法逃离Vue的SFC、React的JSX，所以学习成本也是非常低的。或许将来能成为他们的一款替代品。
合久必分，分久必合。即将来临的大一统时代，WebComponent
做开发初期，有过一些奇怪的想法，为什么我们不能在Vue框架里面引用React组件？
框架的多样性同时也让UI的工作变得麻烦了起来，一款好的UI，在另外一个平台却没有。WebComponents是一个浏览器新推出来的Api，旨在支持创建自定义组件，目前主流框架都已支持创建与框架无关的WebComponent。借助于该技术，我们可以轻松创建跨框架的组件。同时使用以上几款轻量化框架的话。能让代码体积更轻量。
岔路口
某家大厂为了拦截流量实现闭环，开历史倒车，推出了微信小程序。完全违背互联网开放、包容的思想，处处设计充满封闭、妥协。
屠龙者终成恶龙，开发者为了养家糊口，也不得不助纣为虐，不断开发出一个一个小程序、小游戏。其实我们也不知道未来会怎样。未来开放、包容的互联网还会存在吗？不知道，但是可以肯定的是，小程序挤兑了App开发者的不少生存空间，砸了不少同行的饭碗。
历史如同一个巨大的车轮，虽然在不断向前滚动，但也一直在循环。其实小程序和二十年前的门户网站也没啥区别，也许就在20、30年后，互联网的入口都大厂给霸占、拦截，也许会有某个天才产品经理在厕所里拍拍脑袋想到了一个好点子，或许我们只需要一个标识，一个非常短的标识，用户在浏览器中直接访问这个标识，就能打开我们的应用了。
没有人能永远的垄断自由。
