最新前沿:2019 年大前端技术趋势分析

点子 09-03 阅读: 评论:
后台-系统设置-扩展变量-手机广告位-内容正文顶部

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

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

技术采用生命周期

  • 创新者(Innovators):技术的冒险者,第一时间尝试新技术。

  • 早期采用者(Early Adopters):技术早期采用者,具备一定探索精神,某个领域的意见领袖。

  • 早期大众(early majority):技术早期大众使用者,深思熟虑者,往往采用相对成熟的技术。

  • 晚期大众(late majority):技术的平民老百姓,跟随趋势采用当前主流的技术。

  • 落后者(laggards):技术的落后者,长时间不更新技术栈,存在大量技术债。

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

2019年大前端技术趋势分析

状态管理

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

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

2019年大前端技术趋势分析

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

2019年大前端技术趋势分析

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

2019年大前端技术趋势分析

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

dva是蚂蚁金服出品的数据状态管理框架,dva=React+Redux+Saga,通过约定大大简化了编程体验,值得持续关注。

状态管理不是每个前端应用都必须使用的,要结合自身业务复杂度来决定,只有业务逻辑有一定复杂度需要做到各个模块解耦才考虑采用,如果一个 Todo 都用上 Redux,我怀疑你是在炫技~

UI 组件

在前端三大框架还未一统江湖的时候,组件库百花争鸣有 Dojo、Bootstrap、Extjs 等等。自从 React 横空出世,组件化变成了前端开发的标准模式,同时也应运而生了两大 UI 组件库:基于 React 的 Ant Design 和基于 Vue 的 ElementUI。

作为两大成熟 UI 组件库,如果你的系统是属于中后台业务,对于 UI 定制化要求不那么严格,那么这两个一定是不二选择,两者功能上没有太大区别,基础 UI 控件、多语言、主题配置等等要啥有啥,唯一的风险就是圣诞节给你来个下雪的彩蛋(政府网站高危预警)。

UI 组件库可以持续关注 Web Components,毕竟是 Chrome 浏览器亲生的,背后有 Google 这个老爹撑腰,而且现在 React/Vue 不也变的越来越像 Web Components 了吗?
另外前端数据可视化、3D 化也是一个很好方向,一些酷炫的前端库小伙伴们可以撸起来了~

小程序

2019 年小程序百花齐放,各大超级 App 都推出了自己的小程序应用,前端同学们要支持众多小程序,摸摸头发又稀疏了不少吧(em…离资深研发又迈出了坚实的一步)。小程序的实现有多种方式,需要结合自身的业务场景来做选择。
选择一,小程序原生开发方式,以微信为主开发小程序,再通过少量修改移植到其他平台(工作量多少没有做过不好估计,但既然当初支付宝小程序 demo 都抄微信的,感觉应该不大吧~)
选择二,H5 内嵌开发方式,天然多平台跨端,但会有些许性能损失,也会有些功能限制,例如微信里面的消息通知不能通过 H5 来推送
选择三,mpvue 这类基于某种框架的开发方式,mpvue 就是基于 vue 框架来开发小程序,对于熟悉 vue 的同学学习曲线很低,同时也可以实现代码逻辑的复用
选择四,Taro 跨多端的实现方式,支持用 React 的开发方式编写一次代码,生成能运行在微信 / 百度 / 支付宝 / 字节跳动 / QQ 小程序、快应用、H5、React Native 等的应用。对于功能需要同时满足多个小程序应用的场景比较适合。

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表Flashempire闪客帝国立场。
本文系作者授权Flashempire闪客帝国发表,未经许可,不得转载。

分享:

扫一扫二维码

扫一扫在手机阅读、分享本文

评论

留言与评论(共有 0 条评论)
   
验证码:

相关推荐