2021 年大前端技术趋势解读

| 2021-08-15

如今的前端早已不再拘泥于满足页面展示，而是开始延展到通过全栈来闭环产品。这表明前端已经有能力透过业务深入产业，继而影响商业结果。这种表象的改变背后是本质的转变，从更为宏观的角度来说，前端正在通过持续的技术革新和技术融合不断突破自身边界，进而重新定义自身价值。

一、回顾今年的技术趋势

本文拟通过回顾 2020 年七大主要的前端技术趋势来展现前端早已由单纯工具解决问题的属性逐步转变为深入产品机制解决商业问题的角色。前端开发者的关注点也早已不是如何使资源利用效率更高，页面体验更优以及保证业务的稳定输出，而是更为关注产品能力、产业模式、数据建设以及商业转化。

开源站点 bestofjs.org 收录了 Github 上 1500 个开源项目，并且还基于 GithubTrending API [1] 的公开数据，更新统计这些项目的 Stars 新增趋势。基于 Bestofjs 去年的 2019 年 JavaScript 明星项目报告[2] 和近一年 Trending 排行数据，下面展示了 Top30 的前端重点项目，并对此进行简单的介绍。

数据来源：https://octoverse.github.com

相比于同类型工具，如 Elm、ClosureScript、CoffeeScript 等，TypeScript 可谓是一马当先：

数据来源：StackOverflow Survey Result 2020

在如此爆炸式的增长浪潮中，TypeScript 必将给前端生态带来新的气象，同时也会促使前端开发者更多地关注代码设计、易用可维护、编码原则及设计理念等方面的知识。

IMWeb 团队自 2018 年起开启第一个 TypeScript 项目[3]，至今已完成绝大部分业务向 TS 的转型迁移。在多端复用模块代码中，以 TS+ Jest 为基本要求，保证公共代码的可维护性和可测试性：在 TS 编写中，我们更多地遵循面向对象设计原则（SOLID 原则、KISS 原则等），适当的运用设计模式，帮助更好地进行代码开发和维护。同时，在 TS 践行中，辅以单元测试覆盖，可以指导我们更好地拆分组织代码，编写可测试的模块，在公共核心业务模块中覆盖单测用例。（有对 TS 工程化感兴趣的同学，可以联系孟建和 enjoy）。

2. 三大框架 React 当先

前端界的三大主流框架：React、Angular 和 Vue.js，今年仍是炙手可热。此外，在过去一年，这三大主流框架还迭代了许多版本。在三大框架之中，根据过去一年的 NPM 下载量，React 仍然稳居首位。

在 Github 2020 年的新增 Stars 数量上，Vue.js 依旧超过了 React。

在 2019 年 12 月 15 日 WebAssembly 正式成为 WorldWide Web Consortium (W3C) 的标准，加入到了 HTML、CSS 和 JavaScript 的行列，继而成为浏览器官方的标准的第四门语言。WebAssembly 也正式抵达了 1.0 版本，获得了主流浏览器 Firefox、Chrome、Safari 和 Edge 的支持。

首届 WebAssemblySubmmit 2020 年在硅谷举行[4]，会议上讨论了诸如：关于构建 WebAssembly 新型生态系统；WebAssembly 的未来以及 WebAssembly 与诸如 Javascript 等其他支持技术的关系；WebKit 的 WebAssembly 实现的编译、启动和运行时等 benchmarking 领域进行的研究和开发；其中 Ben 演讲的“Expandingthe PIE” 。

与此同时，在 Vision 系统的基础上，我们沉淀出一套可视化搭建引擎 Gems，针对日渐增加的 B 侧需求，以 Gems 为核心开发了专注于搭建管理系统的平台 Hulk，实现了相对运营页面更为复杂的管理页面甚至数据接口的可视化搭建与生成。

我们可以看到开发者选择应用 Serverless 的场景有很多，比如：为小程序、Web、Mobile 提供基础性的 API 服务，大规模批处理任务处理，Web 站点、DevOps 的工具以及 GraphQLAPI 能力。

IMWeb 团队更宏大的全栈开发计划也在 2020 年稳步进行中。跟随着公司上云的战略，2020 年团队依托于云提供的基础能力进行了一系列的全栈架构演进。与时俱进的制定了新的研发基础规范、持续性的丰富业务基础组件、打造更佳完善监控和告警体系，并结合公司内优秀的开源项目协同共建，持续深耕全栈开发。目前已经在业务中落地了多个由前端主导的业务解决方案。这不仅减少了后台人力的投入，也极大得拓展了前端的边界，提升了前端在业务中的价值。

在 2020 的 DevOpsSurvey 中，DevOps 带来的正面影响获得了 99%的认可度：

7. WebRTC 持续升温

随着互联网的不断加速和音视频技术的不断发展，许多以音视频技术为依托的产品相继面世，比如：直播、短视频等等。从 3G 到 4G，再到即将到来的 5G 时代，移动网络的带宽和质量越来越高，海量低延迟直播、互动直播也成为了可能。音频技术发展到今天，实际已经非常成熟了。从 H264/H265、VP8/VP9 以及后面的 AV1 编解码器，解决了视频压缩率的问题；而 5G 的商用，解决了带宽的问题。这两个问题解决后，各行各业都开始使用音视频技术来实现更佳的用户体验，比如：音视频会议、直播带货、在线教育、远程医疗、娱乐游戏等等。

2020 年由于疫情的影响，大家更多地认识和了解到音视频相关的行业。音视频技术底层离不开编解码标准的发展。而就在今年，新一代国际视频编解码标准（H.266/VVC）正式出炉，其后续的落地实践非常值得关注。从行业应用的发展来看，围绕音视频直播一定会有三个发展方向：更快、更便宜、更智能。之前音视频领域有两大技术路线：一类是 RTC，它主要用于满足多人会议中的低延时互动；另一类是流媒体直播/点播，主要满足于对延时要求不大的高并发低成本场景。而端上的音视频处理技术主要围绕更智能，诸如人脸识别、美颜、降噪、超分等处理优化来展开, 行业中也有更多的实践落地，从后端到前端都在探索更为极致的体验。

WebRTC 有个特别宏伟的愿景：可以在浏览器上快速开发出各种音视频应用。但这早已不再仅仅是愿景，而是已经在逐步成为现实。

早在 2016 年 IMWeb 团队就率先对 WebRTC 进行探索和实践。我们是腾讯公司内最早将 WebRTC 落地于业务的团队之一，也是腾讯云 WebRTC 直播能力最主要的使用者。2020 年初，由于疫情，在线教育迎来爆发式的增长。为了保障受疫情影响而无法返校的学生能够继续通过线上课程完成学业，我们开展了“停课不停学”活动。在此期间对原有的 WebRTC 互动直播+CDN 云直播能力进行了全面升级，集成了快直播能力与语音举手功能，使更多的用户可以享受 WebRTC 带来的低延迟、高性能的互动直播体验。

疫情渐渐平缓，IMWeb 音视频小分队的脚步没有因此而停缓。2020 下半年，我们又做为公司内勇于第一个吃螃蟹的人，相继上线了腾讯课堂的 Web 视频连麦能力，推出了团队自研的 WebRTCSDK 与之相配套使用的 LokiPlayer 播放器。LokiPlayer 集 WebRTC 互动直播、快直播、云直播、降级流控、点播等能力于一身，本身就已是集大成者，又通过提供基于插槽与注入实现的插件化能力保证播放器与 SDK 本身都可以被业务灵活的扩展。

在 2021 年，我们将继续深入研究音视频的底层原理，探索更多在 Web 浏览器能得到应用的技术，持续性地优化诸如音视频体验、音视频质量以及测试与定位等能力。结合 wasm，将之前无法想象的功能逐个实践、逐个实现落地。明年将与终端播放器一起对外进行开源。如果你恰好是 Web 音视频技术的使用者，千万不要错过！

三、展望 2021 技术趋势

技术的核心价值是为业务创造价值。那么，如何能快速满足业务发展诉求呢？首先，我们始终离不开解决成本、效率、质量三者之间的平衡。因此，提升基础物料的可用性、提升开发工具的便捷性、完善动态运营的灵活性以及解决产品质量的稳定性，这些永远都会在我们的日常工作中持续进行，并且在追求极致的道路上永无止境！

正所谓分久必合，合久必分。无论是选择极权式的中台化解决方案，亦或是选择去中心化的业务自制模式，都可以提升技术在业务的影响力。当然选择什么样的方式，这与企业自身的基因和团队发展的阶段有很大的关系。

在垂直领域的技术发展方面，我们对 2021 年可以做一些展望：

三大框架的同质化会越来越明显，而周边配套还在可持续的发展中。从开发者的基数上可以看到未来一年 React 还是会持续性地领先，但这并不妨碍 Vue 的优秀；
由于可维护性和系统的复杂度上升，TS 未来一年依旧会保持强劲的势头吞噬 JS 的版图，未来会有更多的开源框架和基础组件拥抱 TS 社区。
大前端领域的前端工程化如今已经慢慢成熟和稳定了，而在未来一段时间，更多是基于全栈开发的工程化体系的建设。前端开发者会更多的借鉴后台开发的经验去加速这一历史进程的速度，尽快完成全栈研发体系的升级和探索。
随着 WebAssembly 持续性的发展，会有越来越多的产品在业务上落地 WASM 这项技术。而随着 WASM 的发展浏览器桌面应用化的趋势也会越来越明显。WebOS 未来是否能够落地，相信 WASM 在其中一定扮演了重要的角色。
小程序的标准化虽然提上了日程，但是由于有微信这样超级 APP 的存在，标准化的道路注定不会平坦。跨端开发上最耀眼的明星还是 Flutter，而苹果公司发布的 SwiftUI 也在路上了。从开发者的角度来看，多端同构是一种美好的愿望，但是任重道远，仍然需要长期且持续性的攻坚克难；
与其说是 Serverless 不断地持续升温，不如说是泛前端的时代已经到来。前端团队寻求价值的渴望驱使着开发者们不断突破着自己的工作范围；前端服务化的工作模式已经从萌芽阶段发展到路人皆知的阶段了，大前端服务化的趋势已经是这个时代不可逆转的趋势了。
随着 5G 网络的普及和手机硬件的不断提升，流量瓶颈和渲染性能在未来一年会有质的提升，这其中最大的受益者就是从事音视频领域的开发者。相信在未来的一年里，音视频领域一定是百花齐放的状态。
低代码的场景天然的靶场就是在 B 端业务中进行抽象和实现。而随着产业互联网的提出，整个行业进入了 ToB 的转型期，未来的低代码会越来越受到大厂的重视。当然，低代码还是要持续解决三大问题：基础平台的能力完善、开发质量更加可控，以及低代码产物的可维护性提升。可以遇见的未来低代码会火爆的表现，并且会在生产中绽放光彩。