- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

2021年前端技术趋势洞察

Jet Ding 发表于 2021/07/22 15:00:39 2021/07/22

【摘要】 (栾砚强&Jet Ding)1 前端技术历史：从简陋页面到大前端前端技术在传统意义上指HTML、CSS、JavaScript等一组用来满足Web页面展示的编程技术。1995年Brendan Eich用了不到10天就创建了JavaScript，那时JavaScript的设计并非以速度见长，基本上只用于验证表单，速度非常缓慢。彼时的页面不仅粗糙简陋，而且除了进行超链接跳转，没有办法实现任何交...

(栾砚强&Jet Ding)

1 前端技术历史：从简陋页面到大前端

前端技术在传统意义上指HTML、CSS、JavaScript等一组用来满足Web页面展示的编程技术。1995年Brendan Eich用了不到10天就创建了JavaScript，那时JavaScript的设计并非以速度见长，基本上只用于验证表单，速度非常缓慢。彼时的页面不仅粗糙简陋，而且除了进行超链接跳转，没有办法实现任何交互。

从那时起直到2005年微软赢得了第一次浏览器战争，前端技术才逐步有了语言规范（ECMA-262 JavaScript规范、W3C的HTML与CSS规范）。2005年到2009年，Sam Stephenson的Prototype库为JavaScript增加了面对对象的继承能力，基于Ajax特性的动态页面开发得以普及。2009年到2012年jQuery出现并被广泛采用，基于jQuery带来的链式操作让前后端开发得以解耦。兼容jQuery的zepto.js在移动端广泛使用，前端进入移动互联网开发时代，Web页面开始向Web App进化，前端项目复杂程度较之前大幅度增大，使得模块化日益重要。2012年到2016年是模块化标准之争的混战时期，从RequireJS开始到AMD基本完成了统一。模块标准统一后的JavaScript具有丰富的开发工具链，大规模复杂项目大量涌现，NodeJS服务端技术使得JavaScript全栈能力迅速完善，前端技术形成了完整技术体系。2016年后的前端技术体系的发展较之前显著加速，开发框架方面形成了React，Vue和Angular三大生态，React Native和Flutter融合了前端技术和客户端技术，客户端技术也积极向前端靠拢，Webview以及JavaScript引擎的不断优化改进。小程序即是技术融合的产物。

由于客户端技术与传统Web技术的融合，前端技术的有了更广泛的内涵。业界常常以“大前端”最为客户端技术和Web技术的融合技术。大前端本身即是当今前端技术趋势的重要方面之一。

本文的内容以大前端作为考察的范围。传统前端技术在本文中以Web前端技术指代。

2 当今最具商业化价值的前端技术趋势

现在的前端技术早已不再拘泥于满足页面展示，而是延展到全栈来闭环产品。

最近一年以来，全球智能协同办公领域需求暴涨，音视频解决方案飞速发展。在音视频技术方面，前端技术凭借WebRTC、WebAssembly等技术而大显身手。在跨平台开发方面，前端技术具有天然的优势，这使得产品能够一次开发，在PC、Web、移动端、IoT产品、汽车产品的多种终端完成产品闭环。软件工程效率方面，前端DevOps技术持续发展，Webpack等工具链持续完善。在软件工程能力方面，云原生技术体系，特别是Serverless技术，赋能前端技术，真正实现前端工程团队的全栈开发模式。在产品化方面，低代码技术是最为引人注目的解决方案。例如微软公司的第四朵智能云Power Platform, 通过“无代码”和“低代码”的简单方式，让用户轻松地自定义构建业务应用程序。以低成本的软件解决方案实现了商业数据分析产品的核心产品价值。

这些表明：前端技术体系已经有能力透过业务深入产业，继而影响商业结果。

接下来，本文将先盘点以下2021年最具商业价值的前端技术趋势：

· WebAssembly技术生态

· WebRTC与互动音视频

· 前端DevOps工程效能

· 低代码/无代码平台赋能运营

2.1 WebAssembly技术生态

长期以来JavaScript一直是Web技术的中坚力量。如今又出现了一个新的挑战者，WebAssembly —— 简称WASM。 WebAssembly源于Mozilla发起的Asm.js项目，其本解码速度比JS解析快得多，让高性能的Web应用在浏览器上运行成为可能。它可在浏览器中的专有虚拟机上执行，与JavaScript虚拟机共享内存和线程等资源。现在主流浏览器基本都支持了WebAssembly。

WebAssembly的出现为Web开发者打开了一扇新的大门。开发者将能够使用更多的编程语言来创建Web应用程序：C,C++,Go，Java，Python，PHP，以及近年来最火热的Rust语言。目前国内外越来越多的团队已将WASM付诸了业务实践。例如：腾讯IMWeb团队将ffmpeg编译为WASM版本在浏览器中运行。过去隔绝在浏览器底层的音视频编解码能力得到彻底解放。前端页面中实现对音视频流直接进行处理，在完全不依赖服务端的情况下，便捷高效的实现了视频播放帧预览与视频帧截图等功能。

另一最为重要的特性是WebAssembly 的沙箱功能。当程序编译成 WASM 模块再加载到运行引擎中时，这些代码运行在一个私有的沙箱中。沙箱中的程序不能访问沙箱以外的地址空间，否则将被运行引擎终止并返回异常。同时 WASM 程序调用 API 访问系统资源时也会受到运行引擎的监管。这样的沙箱功能可以在许多场景下提供传统的原生编译程序无法支持的功能。

WASM沙箱可带来的极具价值的特性：

· 安全的运行地第三方代码：沙箱提供可信运行环境。在云端和边缘侧非常有意义，为浏览器提供了类似于现代容器技术如 Docker 的核心价值之一。

· 跨平台模块分发： 作为W3C 定义的字节文件标准格式，WASM天然具有良好的兼容性。软件模块可以WASM作为媒介格式分发。例如C++语言开发的图像识别算法代码库，可以编译为WASM 模块的方式发布。其他人通过集成 WAMR 这样的引擎就可以在不同架构、不同平台、不同环境调用这个算法，比如在云端容器、可信执行环节（TEE）、物联网设备上都可以调用。

· 超轻量级：充分考虑了网络环境，WASM字节码的设计相当精简。通过开发阶段的编译不再需要对下载程序进行文本解析。实例的对象与内存模型也较为简单。这些特点使 WASM 模块可以非常快地完成加载进入执行状态，创建一个执行实例只需要很少量的资源。

· 高性能：WASM字节码的设计充分考虑了即时编译JIT，不仅可以达到很快的编译速度，还可以获得很高的运行速度。

· 动态模块加载：在小设备上尤其有用，过去固件必须统一编译、统一更新，如今通过固件中的模块化可被灵活地加载。

· 重用海量 C/C++ 库资源：过去从JS、Java等语言的程序中调用C/C++ 的功能，只能使用各种语言自身的绑定接口，例如JNI技术。现在，第三方 C/C++ 库源程序直接编译成 WASM 模块，然后通过先绑定 WAMR引擎来，不再需要通过JNI 去一一绑定 C/C++ 库中的所需函数。

2.2 WebRTC互动音视频

随着网速不断提高和音视频技术的发展，音视频技术类的产品相继面世，例如直播和短视频。移动网络进入5G时代，带来了超高带宽和超低时延，在移动环境中的音视频的基础设施大大增强。

从音视频技术过往的发展来看，已经基本解决的难点有：1. 视频压缩率的问题（通过H264/H265、VP8/VP9以及AV1编解码器）；2. 网络带宽的问题（通过5G、WiFi-6等的发展）。这两个问题解决后，各行各业都开始使用音视频技术来实现更佳的用户体验，比如：音视频会议、直播带货、在线教育、远程医疗、娱乐游戏等等。2020年由于疫情的影响，视频会议、远程办公、智能协同类型的产品更是呈现井喷式发展，各家都在比拼着推出更快、更便宜、更智能的产品。这里我们把他们看做是高层服务的音视频技术。

用于高层服务的音视频技术大致有两个体系: 一类是RTC（real time communication），它不仅包括媒体处理，还具有信令控制、网络管控、会议管控的协议，主要用于满足多人会议中的低延时互动；另一类是由流媒体技术发展演进而来，主要有 HLS 和 RTMP/HTTP-FLV 两个协议，主要用于满足于对低延时要求不高，但并发量要求很高的低成本场景。

对于前端技术体系而言，WebRTC使得低时延音视频互动的开发变得非常容易，而且绝大多数浏览器，包括桌面端和移动端，都提供了统一和完整的API支持。因此WebRTC技术体系的热度远高于HLS等流媒体技术。

另外，端侧音视频处理还围绕更智能，诸如人脸识别、美颜、降噪、超分等处理优化来展开, 行业中也有更多的实践落地，从后端到前端都在探索更为极致的体验。

Chrome、Firefox、苹果Safari等主流浏览器都已加入对WebRTC支持。各个云服务厂商，包括腾讯云、阿里云、网易云、七牛云以及诸如专门音视频服务商（声网和即构科技等等），都将WebRTC纳入浏览器实时音视频首选方案。

值得注意的是，各大云厂商为会议协同功能提供了广泛开放性的解决方案，并且开发成本开发极低。例如：阿里云最近新推出了互动白板解决方案的外测，提供在线绘制涂鸦、标注、标注、媒体共享、路放、转码等功能。另外，声网agora.io提供基于WebRTC体系的会议协作云API，“四行代码，30分钟，在应用内构建语音通话、视频通话、互动直播、实施消息”。阿里云最近新推出了互动白板解决方案的外测，提供在线绘制涂鸦、标注、标注、媒体共享、路放、转码等功能。令前端的互动体验更加生动。

由于API的成熟稳定，熟悉前端编程语言的工程师进入视频功能开发领域的门槛大幅度降低。下图是对前端开发者所需要开发互通音视频的知识图谱，掌握这些足以完成功能开发。WebRTC标准对音视频具有完备的信令服务、网络管理、会议控制、媒体管理等能力。在安卓系统、iOS系统、桌面系统上，云厂商都提供相应SDK。

可以看到，WebRTC在云和端的技术体系都已近相当完整。接下来将是应用更快迭代、更好体验的竞争。

2.3 前端DevOps工程效能

相比前面提到的两个趋势，DevOps内涵更加丰富，不仅是单一的技术，而是框架、工具链、方法论、项目管理、组织方法的综合运用。

前端DevOps为研发效率赋能。当下各大科技公司软件工程都在重点投入研发力量持续完善。开发运维一体化流程，CI/CD流程的串联，帮助业务提升研发效能。下图是腾讯公司的前端DevOps流水线设计。

前端相关的DevOps需要为Node为中心的服务器开发体系进行设计，在当下，云原生的发展大势情况下，Node服务上云的相关容器技术是DevOps的重点领域。

低代码/无代码平台

从2014年Forrester的研究报告提出“low-code”一词到今天，低代码领域持续升温。从低代码领域的行业角度看，2017年后，微软、甲骨文等各大厂家纷纷加入了低代码赛道的竞争。近年来，获得3.6亿美元融资的Outsystems更是成为低代码领域海外市场的一只独角兽。国内方面，也不乏阿里的云凤蝶、点石、iVX、轻流、积木等平台的诞生，低代码产品领域的蓬勃发展，正成为特定场景软件开发的重要趋势。

简单而言，“低代码”和“无代码”平台的商业理念是“赋能全民开发”。对现在趋势中所说的“低代码”和“无代码”，一般认为的区别在于：

无代码：自己编程给自己用，给用户的感觉就是一个软件。因此，平台不会给自己定位成一个“编程工具”。主要是通过图形化的操作来降低学习曲线，类似PPT、Excel等。在垂直领域的特定场景中，才能做到好用。

低代码：编程给其他人用，通过降低专业难度，让运营人员也参与进来。平台评估好预制的场景和需求，减少从头写代码的成本，一定程度上可以通过图形化的方式满足业务诉求。

这类平台产品的价值点在于大幅度降低业务交付的成本。在技术实现方面，可基于目前可视化和模型驱动理念，结合当下大前端跨端体验的融合技术以及云原生的支持。可视化搭建去完成业务可以让产品和运营人员参与进来，可以极大地释放软件开发者的人力瓶颈，也进一步促进了技术和业务的深度合作。

微软公司的Power Platform就是这样一个平台。目前Power Platform包括三个产品：

Power BI：商业数据分析，

Power Apps：APP开发，

Power Automate：办公流程自动化，

腾讯公司的Vision低代码平台是为运营场景优化的，赋能运营人员。Vision生成的代码兼容React，Vue.js， JQuery 等不同技术栈，实现了PC、H5、微信小程序的可视化运营的页面搭建。

为了满足复杂交互的运营需求，Vision也提供可视化搭建引擎Gems，支持复杂的管理页面，支持数据接口的可视化搭建与生成。

预计2021年低代码大前端继续迅猛发展。从早期的通过模块化搭建解决营销活动领域的问题，转向突破解决内部复杂的中后台业务需求，既适用于面向C侧用户的产品运营，也贴合B侧用户的数据管理需求。

3 前端编程语言趋势

目前用的比较多的编程语言有HTM, CSS及其扩展, JavaScript, TypeScript, Kotlin, Java, Dart, C#, Swift, C++等等。

编程语言五花八门，爱好者各有各的原因，在前端也存在一样的情况，我们不一定非得推崇什么样的编程语言，但我们在开发的时候一定要选取让自己感觉最舒服的编程语言。

语言本来无所谓好与坏，这是对应你的场景，参考如下的因素需要有个取舍: 我们当前团队会这种语言的人有多少？这门语编程语言好不好学? 这本语文的替代编程语言，是不是更好？有没有另外一种编程语言比当前的编程语言写出更简洁的代码来？有没有别的编程语言比当前的编程语言开发效率更高?

3.1 Web开发三驾马车: HTML, CSS, Javascript

跟传统的网络页面技术开发一样，现代的前端技术开发也同样需要HTML, CSS, Javascript这三驾马车。当然，结合具体的框架及其版本，他们又有很多的扩展。

像HTML可以使用新的一些Tag特性，自定义的Directives，如Video, Audio等等；
像CSS有很多的扩展，如SASS, SCSS, LESS等等，如Variables， Mixins，Extends等等；
JavaScript自身的新版本特性，以及TypeScript的引入，TypeScript是JavaScrit的超集，它的出现使得前端开发的代码更加规范和整洁。

这三个技术各有其侧重点，比如说HTML主要是聚焦于页面的内容管理，CSS主要聚焦于页面的样式管理，比如颜色，宽度等等，JavaScript与TypeScript主要用于处理业务的逻辑，页面交互等等。

4 开发框架的趋势

4.1 页面组件化

在目前众多的前端开发技术中，有共识的有这么一个技术点，就是组件化。组件化可以减少程序模块之间的耦合度。同时也可以增强代码的重用性，从而提高代码的可维护性。

组件化理念运的一个表现就是单页应用程序框架，我们可以把一个完整的网站理解成就是一个组件页面。

在这个页面中，你可以有很多个区域，每个区域当中又有很多的子区域，这样一层一层的分下去，就是在一个大的页面框架中，包含了很多的子组件，然后子组件又有下一层的组件，以此类推下去。通过这样的划分，就把页面领域化，组件化了，从而达到便于管理和重用的目的。

4.2 单页面路由和NextJS

在单页应用框架出现之前，页面路由的管理是由服务端来处理的。从A页跳到B页，在服务器端对应的是不同路径和调用函数，每个函数可能会去调用对应的模板内容。这种处理方式存在如下的几个缺点，一是增加了服务器端程序设计的复杂度，另外一个是造成客户端不好的用户体验，主要是页面反应慢。

在单页应用框架中就不存在这样的问题，因为页面路由管理全部由前端来承担了。这使得路由部分切换是在前端，也就是客户这一边来完成的，从而提高了页面的响应速度。

NextJS是当今最受欢迎的路由管理框架。路由管理部分的技术大同小异，不存在太大的差距。所以不用太担心，你用什么样的前端技术。

4.3 数据流管理的优劣

前后端分离以后，在数据流管理部分有很大的一个比例由前端来承担了。在前端技术的数据流管理中，一般认为有两种大的方向，一种是单向流的管理方式，另外一种是双向流的管理方式。所谓单向流，就是说你取得的数据只能读不能写，而双向流管理，是对一个数据，既能读又能写。

那么有人就问了，对于单向流的数据我们是如何进行修改的呢，这就牵扯到设计模式flux和Redux， Redux是Flux的变种， Redux是在React中比较流行的数据处理模式，Flux是Vue中常用的数据处理模式，他们对应的关键字稍有不同，但大致相近：比如reducer, mutation, getter, effect, action等等。

在新的React版本中出现了Hooks技术，使得React数据流的管理多了一种选择。

Angular可以通NgRX来使用Redux技术，实现单一数据流的管理模式，同时Angular还可以通过Input/Output方式来管理数据，除此之外Angular还支持依赖注入，这样你可以通过Service来管理数据。这就避免了单一数据流中的多重环节造成的代码冗余问题，极大地提高了项目管理的可控性。

4.4 业界主流的开发框架

4.4.1 AngularJS

最早的版本发布于2010年10月，最近的版本发布于2020年10月。这门技术在2021年12月31日之后， Google会停止修复安全问题，浏览器兼容性问题，等等的支持。

迄今为止，AngularJS的技术风格没有大的变化。

对于AngularJS项目，现在比较痛苦的就是开发人员数量越来越少了。因为这个框架的技术门槛相对比较高，它整个设计做的比较复杂。

我接触过一些公司，使用这个技术，开发了很多的项目，都有四五年的历史了，代码量非常之庞大，现在他们面临的一个问题是第一开发人员找不到了，第二就是客户的新需求不断的进来，于是就很尴尬，不知道该怎么应对这种情况[l1] 。

4.4.2 Angular

Angular是由AngularJS团队重写的一个前端开发框架，最早的正式版本发布于2016年9月，最新的版本发布于2021年4月21日。

Angular相较于AngularJS：

去除了scope、controller的概念
使用了更简洁的属性输入绑定和事件输出绑定
可以把核心功能移到一个模块中，更加方便管理
推荐使用TypeScript编程语言，这门语言支持静态类型，支持模板，支持注解
TypeScript是ES6的超集，向后兼容ES5
支持动态加载
等等

这是一个非常不错的技术，相比较它的前身AngularJS，它去除了非常繁杂的，冗余的一些架构设计。

从这个技术推出到现在，它的技术风格没有变化，是在前端技术框架中技术保值性最强的。可以毫不夸张的说，在5年前你学的Angular技术到今天依然是新鲜的，在现在的最新版本中使用那些技术是没有问题的。

除此之外，由于谷歌的推动, 这门技术，越来越受前端开发团队的重视，尤其是一些大的公司首选的前端技术就是Angular，我在北美设计开发的七八个项目都使用Angular。这个技术追求严谨性，这从它追求把HTML， CSS，TypeScript三者的分离以及使用TypeScript作为它的逻辑编程语言，可以看出端倪。

4.4.3 React

最早版本发布于2013年5月，最新版本发布于2021年3月。

React技术发生过如下比较颠覆性的变化：

0.13.0 2015年3月发布的这个版本，宣布不再支持之前的版本。
16.8.0 2019年2月发布的这个版本，添加了Hooks和函数组件，并引导开发者使用新的技术，以解决React代码重用的问题。
React技术入门的门槛比较低，它有一个优势，就是它可以在以前传统的网络前端程序里面作为一个程序库使用，它不一定当做框架来使用，这是它的一个优势。除了被当做一个程序库使用以外，也可以把react当做一个程序框架使用。

React有非常庞大的程序员开发社区。尤其是在Facebook的推动下, 其影响力，一直稳步攀升。

对于React最大的诟病就是它的jsx文件格式，这种文件格式是逻辑代码和模板代码的混合体，有人爱，有人恨。我个人的观点是这种方式导致代码的耦合性增高，使得项目的维护成本大幅提升。

从鲜有开发经验的程序员的角度来说，可能喜欢把它们合在一起，因为那样会很快出东西上手，有成就感，但是逐渐你会发觉，如果把东西合在一起，最开始的时候可能很快乐，随着项目规模的不断提升，复杂度就越来越高，到这个时候就苦不堪言了。

4.4.4 Vue

最早的Vue版本发布于2014年2月，最新的版本发布于2021年4月。

Vue的技术脱胎于AngularJS的框架，支持模板，CSS和逻辑代码的分离，这点跟Angular很接近，在数据流的处理上使用Flux模式，这一点跟React又很接近。
最近的3.0版本，开始引导开发者使用TypeScript。

Vue的技术特点，它既想吸引React的程序员, 它支持单向的数据流模式，也就是Flux模式，这跟React里面的Redux非常接近，因为Redux就是基于Flux进行扩展的，又想吸引Angular的程序员，比如它的一些模板设计方法和双向数据流模式都跟Angular非常接近。当然它也在努力塑造自己的风格，就是以最简单的东西来实现所要求的功能。

4.4.5 Blazor Server 与 Blazor WebAssembly

最早的版本发布于2018年，这门技术是跟Asp.Net Core一起发布的，通过它可以使用C#， HTML, CSS完成网络前端的开发。

Server支持服务器端的渲染方式。 Blazor WebAssembly使用单页应用运行方式，客户端的框架使用WebAssembly编写。

很多朋友问我这门技术的前途怎么样，跟现在的三大前端框架相比有什么优势？它最大的优势就是C#编程语言，这门编程语言目前也是跨平台的，在Linux上，Windows上和Mac OS上都可以使用。又非常容易上手，这是这门技术最大的优势，当然它有微软的支持，也是不容忽视的一个优势。

个人感觉Blazor的发展，有点左摇右晃的，它既想支持传统的Server端的渲染，又支持单页应用的渲染方式，我觉得它可以先集中在某一个点上发力，当然目前最有前途的还是单页应用的这种开发模式，因为对客户体验来说是最好的，响应速度最快。

4.5 广泛流行的界面库

如果我们开发网络应用的前端，我们不可能不研究有哪些优秀的界面库可以使用和参考。这类库选取需要考虑如下的几个因素：

能否满足我的开发需求；
技术更新是否及时；
该技术是否相对成熟；
下载量是否足够多，用户群足够庞大，口碑要好；

可以参考的界面有：
Prime, Bootstrap, Material, Antd等等。
使用这类库的好处是可以大大的减少开发工作量，使得开发出来的界面更加的专业。

5 跨平台开发

5.1 Flutter统治跨平台

由Google创建。是一个开源的、跨平台的界面开发框架。开发者可以用来开发出自适应的用户界面。这门技术使用Dart作为开发语言。

通过使用不同的widgets，它可以提供非常强大的兼容性来适应不同场景下的屏幕界面设计。

而且，Flutter支持热加载，从而提高了开发效率。因为开发者不需要重新加载应用就可以看到自己的代码变化。

由于减少了应用与平台间的羁绊，Flutter应用的性能是非常优秀的。

这门技术目前可以支持安卓端开发，iOS端开发和网页端开发，并且只有一套代码就全部搞定，这个是它最大的优势，这一点跟其他的跨平台技术是有一些区别的。这得益于Flutter不断涌现的优秀的高质量程序库。除非特别新的功能，特别的与硬件相关的一些技术，一般来说现有的Flutter语言的SDK和程序库都可以帮用户搞定了。

5.2 Electron跨系统桌面方案

Electron技术允许开发者使用JavaScript, HTML, CSS编写跨平台的桌面应用程序，比如VS Code。编写过程就如网络前端开发，但是它可以读取和写入本地操作系统的文件。类似的技术还有, NW.js, APPJS等。

这类技术的出现，使得网络前端程序员有能力开发出跨平台的桌面应用程序来。

5.3 React Native原生方案

React Native有Facebook推出，也是非常优秀的开源跨平台框架，其产出也是原生的移动端应用，性能也非常不错。

如果是React程序员的话，使用React Native几乎没有技术障碍，可以直接上手，当然，开发网页应用跟开发手机应用有一些区别，它们样式的设计和界面的一些规范是不一样的，这个当然需要区分一下。

还有就是移动端的用户操作习惯跟网页端的用户操作习惯是不一样的，这个也是作为开发者需要考虑的因素。

5.4 Xamarin/ Visual Studio

使用C#编程语言编写Android和iOS原生应用程序，Xamarin/Visual Studio 是不二的选择。C#的易用性广为人知，再加上跨平台的代码重用性，这项技术在前端的开发市场上有一批忠实的拥趸。

这门技术，最早是脱胎于Mono项目，Mono项目，是试图把C#这门语言推向跨平台，到如今这个目标已经实现了，当然这也离不开微软的大力支持和推动。

由于微软已经购买了这个拥有这个项目的公司Xamarin，所以微软直接就把这门技术集成到Visual Studio里面了，如果你有这个工具，那么你就可以用这门技术加上C#语言直接开发Android和iOS的应用了。