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 这类的强制规范,需要在使用中进行必要约束。

 

 

参考推荐

大型网站的技术架构分析整理

大型网站技术架构的演化历程

大型网站技术架构的知识总结

大型网站架构技术知识点一览

大型网站技术架构:核心原理与案例分析

BAT等互联网巨头的技术架构演进之路

IT,互联网,科技,技术博客网站推荐

全球著名互联网企业背后的开源力量

后台服务器开发总结

阿里“去IOE”核心技术剖析