2019 年web大前端技术趋势分析

一晃眼 2019 年已过大半，年初信誓旦旦要学习新技能的小伙伴们立的 flag 都完成的怎样了？2019 年对于大前端技术领域而言变化不算太大，目前三大技术框架日趋成熟，短期内不大可能出现颠覆性的前端框架 (内心 OS：出了也学不动了)。

本文结合个人和团队经历对 2019 上半年做个技术总结，将各类技术框架 / 语言 / 工具分作两个维度：

技术采用生命周期

• 创新者（Innovators）：技术的冒险者，第一时间尝试新技术。
• 早期采用者（Early Adopters）：技术早期采用者，具备一定探索精神，某个领域的意见领袖。
• 早期大众（early majority）：技术早期大众使用者，深思熟虑者，往往采用相对成熟的技术。
• 晚期大众（late majority）：技术的平民老百姓，跟随趋势采用当前主流的技术。
• 落后者（laggards）：技术的落后者，长时间不更新技术栈，存在大量技术债。

技术方向

按照大前端技术架构图进行分层，大体分为：状态管理、UI 组件、小程序、跨平台、框架层、编程语言、工程化、监控、测试和服务端。

 

 

状态管理

随着 React、Vue 这类前端框架的流行，组件化开发成为主流，然而随着页面复杂度越来越高，在一个组件文件中，要做 UI 渲染、事件处理、状态管理等等事情，于是一个文件变的越来越复杂。同时，页面组件层级变的复杂后，跨组件间的数据通信也变的很繁琐，需要将数据上提到父节点，通过 property 传输数据、回调方法更新父节点状态等等。

Facebook 首先提出Flux框架，引入单向数据流的编程模式，把 Action 和 Store 从 View 中解耦出去，极大的优化了原有状态管理的架构。

 

 

Redux=Flux+Reducer，由于 Store 的唯一性加上 Reducer 纯函数，使得数据状态具有可预测性，于是配套出现了很多基于 TimeMachine 机制的调试工具，极大的提升了研发调试效率。不过由于 Reducer 的纯函数性质，对于一些异步请求的副作用又要引入中间件，导致了一定的复杂度。

 

 

Vuex作为 Vue 框架的状态管理的不二选择，核心思想和 Flux/Redux 一脉相承，弱化了 Reducer 的概念而改用 Mutations，使得整套框架更易于理解了。

 

 

Mobx是一个非常轻量级的状态管理框架，引入了 observable state、computed value，极大的简化了状态修改的方式，相对于 Redux 减少了不少模板代码，上手迅速使用友好，不过由于缺乏 Redux 这类的强制规范，需要在使用中进行必要约束。