2020 年大前端技术趋势解读（总结自腾讯 IMWeb 前端团队公众号）

总体趋势：前端正通过持续的技术革新重新定义自身价值。

• 前端已不再拘泥于满足页面展示，开始延展到通过全栈来闭环产品。前端开发者的关注点也早已不是如何使资源利用效率更高，页面体验更优以及保证业务的稳定输出，而是更为关注产品能力、产业模式、数据建设以及商业转化。
• 前端已有透过业务深入产业，影响商业结果的能力。前端已由单纯工具解决问题的属性逐步转变为深入产品机制解决商业问题的角色。
• 如今的前端开发进入了技术深水区。在全栈和多端的影响下，前端领域的“术业有专攻”的时代已经到来。

github开源数据统计：

Top100 内有 14 个项目是与前端基础学习相关的，侧面可以看出前端行业的繁荣；同时也反映出知识和人才的迭代速度是非常快的。

前端技术总结概括：

1. Deno 超过 Vue.js 一跃成为过去一年 Star 增长最快的开源项目，打破了 Vue.js 连续 4 年登顶的垄断。虽然在工业届使用 Deno 落地在业务场景的情况还比较少，但是发展势头锐不可当；
2. TypeScript 依旧保持着高速成长，未来潜力不可限量。TypeScript 必将给前端生态带来新的气象，同时也会促使前端开发者更多地关注代码设计、易用可维护、编码原则及设计理念等方面的知识；
3. 框架层面通过项目分布的情况，明显能看到 React 生态圈>> Vue 生态圈>> Angular 生态圈；
4. 2019年底继 HTML、CSS 和 JS 之后，WebAssembly 核心规范成为w3c的浏览器的标准，同时 C/C++、Rust、Go 等语言编写的高性能模块也在浏览器上运行。相信在不久的将来，Web 应用的桌面客户端化，也将成为一种趋势；
5. Strapi 位列 Nodejs 相关领域的第三名侧面反应了低代码的趋势还在持续升温，各家都在研制自己的低代码平台来提升开发效率；
6. JS Framework 相关的领域，Next.js 超越 Nest 成为了今年的冠军。在强大的 React 体系的影响下，业务越来越多的人选择使用同构和直出的方案来构建 Web 应用；
7. Serverless Framework 也进入了前 Top100，虽然排名不高，但是已经开始慢慢展示出了可持续发展的势头。对于一个被厂商裹挟的技术而言，这一切来之不易；
8. 大前端生态系统已经逐步完善，前端工程化逐步完善，DevOps 已经走向了系统化的发展方向，前端技术已经进入深水区；
9. 由于直播行业的火热，以及疫情的影响，音视频领域在过去的一年也有着蓬勃的发展。在前端领域 WebRTC 的技术在持续升温。

2020 年框架动态：（趋于统一、为下版本做铺垫，拥抱新技术）

1、React

• React v16 后，迭代的版本都是以修复、优化为主，当前最新版本 v17.0.1，今年 8 月正式推出的，并无显著的新特性，是一个”垫脚石“版本。为了后续能兼容 v18 版本，达到”逐步“升级的目的，这也能规避当项目的依赖存在多个版本 React 时出现问题。这种逐步升级的理念与 VUE 的渐进式兼容升级颇为相似。

2、Vue.js

• Vue.js3.0 发布进行了完全 Typescript 重构，让 Vue.js 源码易于阅读、开发和维护；
• 重写了虚拟 Dom 的实现，对编译模板进行优化、组件初始化更高效， 性能上有较大的提升；
• 解决了Vue.js2 对象式组件存在一些问题：难以复用逻辑代码、难以拆分超大型组件、代码无法被压缩和优化、数据类型难以推倒等问题；
• CompositionAPI 则是基于函数理念，去解决上述问题，使用函数可以将统一逻辑的组件代码收拢一起达到复用，也更有利于构建时的 tree-shaking 检测，这个使用起来有些类似于 React 的 hook；

以上变化都秉持着 VUE 的“渐进式框架“ 理念， Vue.js3.0 持续开发兼容旧的版本，即使升级了 Vue.js3.0 也可以按照之前的组件开发模式进行开发。

3、Angular

Angular 在今年 11 月推出了 v11.0.0 版本，主要变化为：
将其依赖的 Typescript 版本升级至 4.0, 不再支持 Typescript3.9 版本；
Angularv11 在继 v10 弃用 IE9、10 和 IEmobile 支持后，将其完全删除；
加入了 Webpack5，升级至 Angularv11 版本，即可使用 Webpack5 的新特性，如更快的构建速度、模块联邦等。

关键技术探讨：

WebAssembly

• WebAssembly ：也被称为“设计补充 JavaScript” 源于 Mozilla 发起的 Asm.js 项目其本解码速度比 JS 解析快得多，让高性能的 Web 应用在浏览器上运行成为可能，目前正式抵达了 1.0 版本。该模块可在浏览器中的专有虚拟机上执行，与 JavaScript 虚拟机共享内存和线程等资源。目前主流浏览器已基本都支持 （Firefox、Chrome、Safari 和 Edge ）。 继而成为浏览器官方的标准的第四门语言。

low-code

2014 年 Forrester 的研究报告提出“low-code”一词到今天，低代码领域持续升温。从低代码领域的行业角度看，2017 年后，微软、甲骨文等各大厂家纷纷加入了低代码赛道的竞争。国内已有低代码云凤蝶、点石、iVX、轻流、积木等平台

• no-code： 自己编程给自己用，给用户的感觉就是一个软件。因此，平台不会给自己定位成一个“编程工具”。主要是通过图形化的操作来降低学习曲线，类似 PPT、Excel 等。在垂直领域的特定场景中，才能做到好用。
• low-code： 编程给其他人用，通过降低专业难度，让运营人员（CitizenDeveloper）也参与进来。平台评估好预制的场景和需求，减少从头写代码的成本，一定程度上可以通过图形化的方式满足业务诉求。
• pro-code： 日常软件开发过程中的手写代码，可以通过逻辑和模块复用来进行提效。
  区分了概念之后，还需要考虑面向的用户。不同的用户对应着不同的解决方案。用户大致分为三类：前端开发人员、后台开发人员、产品运营人员。

低代码小结：

• 基于目前可视化和模型驱动理念，结合当下大前端跨端体验的融合技术以及云原生的支持，通过低代码的方案可以大幅度降低业务交付的成本，为业务提供一种全新的开发范式。
• 而且，可视化搭建去完成业务可以让产品和运营人员（CitizenDeveloper）参与进来，可以极大得释放软件开发者的人力瓶颈，也进一步促进了技术和业务的深度合作。
• 无论是跨端和跨平台领域的强大适配能力，还是大前端工程体系的有力支撑，都已经将低代码领域的价值逐步推到人们面前，低代码是业务发展和技术探索的必然选择。在真正意义上实现了对运营系统和素材开发的解耦，并兼容 React，Vue.js， JQuery 等不同技术栈，实现了 PC、H5、微信小程序的可视化运营的页面搭建。
• Low-Code 领域的发展在 2020 年极其迅猛。从最早的通过模块化搭建解决营销活动领域的问题发展到现在可以通过 low-code 来解决内部复杂的中后台业务需求，既适用于面向 C 侧用户的产品运营，也贴合 B 侧用户的数据管理需求。

低代码方案应该具备的能力模型：

• 基础资料的搭建；
• 基础资料的接入；
• 业务编排能力；
• 界面渲染能力；
• 代码转换能力以及运行时能力；
• 协作能力和数据分析能力。

Serverless

Serverless 的场景有：为小程序、Web、Mobile 提供基础性的 API 服务，大规模批处理任务处理，Web 站点、DevOps 的工具以及 GraphQLAPI 能力。
目前最大的难题是调试，这主要是由 Serverless 的架构复杂性所引起的。 供应商之间的巨大差异也使得更换或者说迁移供应商变得困难。与其说 Serverless 是一项技术，不如说 Serverless 是一种理想的工作模式，是一种专注于业务价值的思考。

DevOps

效能不得不提到近几年非常火热的 DevOps，开发运维一体化流程，CI/CD 流程的串联，帮助业务提升研发效能。

WebRTC

宏伟的**愿景：可以在浏览器上快速开发出各种音视频应用。**腾讯的纳入浏览器实时音视频首选方案：WebRTC 互动直播 +CDN 云直播能力进行了全面升级，集成了快直播能力与语音举手功能，使更多的用户可以享受 WebRTC 带来的低延迟、高性能的互动直播体验。

小结：技术的核心价值是为业务创造价值。成本、效率、质量三者之间的平衡。因此，提升基础物料的可用性、提升开发工具的便捷性、完善动态运营的灵活性以及解决产品质量的稳定性都很重要。

未来技术展望

• 三大框架的同质化会越来越明显，react继续领跑；
• 未来会有更多的开源框架和基础组件拥抱 TS 社区；
• 大前端领域的前端工程化如今已经慢慢成熟和稳定了，而在未来一段时间，更多是基于全栈开发的工程化体系的建设，会继续学习吸取后端经验；
• 随着WASM 的发展，会有越来越多的产品在业务上落地 WASM 这项技术。
• 多端同构是一种美好的愿望，但是任重道远，仍然需要长期且持续性的攻坚克难；小程序的标准化虽然提上了日程。
• 泛前端的时代到来。前端团队寻求价值的渴望驱使着开发者们不断突破着自己的工作范围；前端服务化的工作模式已经从萌芽阶段发展到路人皆知的阶段了，大前端服务化的趋势已经是这个时代不可逆转的趋势了。
• 随着 5G 网络的普及和手机硬件的不断提升，流量瓶颈和渲染性能在未来一年会有质的提升，这其中最大的受益者就是从事音视频领域的开发者。相信在未来的一年里，音视频领域一定是百花齐放的状态。
• 低代码的场景天然的靶场就是在 B 端业务中进行抽象和实现。而随着产业互联网的提出，整个行业进入了 ToB 的转型期，未来的低代码会越来越受到大厂的重视。当然，低代码还是要持续解决三大问题：基础平台的能力完善、开发质量更加可控，以及低代码产物的可维护性提升。可以遇见的未来低代码会火爆的表现，并且会在生产中绽放光彩。