2021上半年前端技术趋势洞察 丨【WEB前端大作战】

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

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

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

接下来，本文将盘点以下2021上半年最重要的前端技术趋势：

WebAssembly技术生态

WebRTC与音视频

DevOps工程效果

低代码平台的商业价值

跨端开发技术

全栈开发技术与Serverless

前端框架和语言

WebAssembly技术生态

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

WebAssembly的出现为Web开发者打开了一扇新的大门。开发者将能够使用其它编程语言来创建Web应用程序：C,C++,Go，Rust，Java，Python，PHP来实现完整的系统。目前国内外越来越多的团队基于WASM进行了业务实践。 例如：腾讯IMWeb团队将ffmpeg编译为WASM版本且在浏览器中运行，将过去处于黑盒中，只有浏览器底层才能使用的音视频编解码能力彻底解放。前端页面中对音视频流直接进行处理，在完全不依赖后台的情况下，便捷、高效的实现了视频播放帧预览与视频帧截图等功能。

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

WebAssembly 的许多特性在不同环境下可以带来各种价值：

安全运行第三方代码：这个功能在云端或者边缘计算中非常有意义，也是现代容器技术如 Docker 的核心价值之一。在移动设备、物联网设备、智能小家电以及可信运行环境上对这样的功能也有非常强烈的需求。

跨平台与环境的应用：考虑到 WebAssembly 是由 W3C 定义的标准化字节文件格式，当某些产品需要提供类似浏览器方式来装载第三方模块时，使用 WebAssembly 作为媒介格式是一个非常有吸引力的方案。假设你有一个很好的图像识别算法，你可以把你的算法以 WASM 模块的方式发布。其他人通过集成 WAMR 这样的引擎就可以在不同架构、不同平台、不同环境调用这个算法，比如在云端容器、可信执行环节（TEE）、物联网设备上都可以调用。

超轻量级：WASM 规范的设计充分考虑了在浏览器上需要通过网络从服务器端下载并即时运行的需求，操作码的设计相当精简。通过开发阶段的编译不再需要对下载程序进行文本解析，实例的对象与内存模型也较为简单。这些特点使 WASM 模块可以非常快地完成加载进入执行状态，创建一个执行实例只需要很少量的资源。

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

动态模块加载：这个功能在小设备上尤其有用，过去固件必须统一编译、统一更新，如今通过固件中的 WASM 运行引擎，可以动态加载和执行 WASM 模块。

重用海量 C/C++ 库资源： 你也许需要在 JS、Java 或者 Python 程序中调用一些 C/C++ 库，传统方式只能使用各种语言自身的绑定接口来集成这些第三方 C/C++ 库。现在我们可以把第三方 C/C++ 库源程序编译成 WASM 模块，然后通过先绑定 WAMR 或者其他 WASM 引擎来执行 WASM 模块。例如在 JVM 上通过 JNI 绑定了 WAMR，就不用再使用 JNI 去绑定其他 C/C++ 库了。

WebRTC的火热

随着互联网的不断加速和音视频技术的不断发展，许多以音视频技术为依托的产品相继面世，比如：直播、短视频等等。从3G到4G，再到即将到来的5G时代，移动网络的带宽和质量越来越高，海量低延迟直播、互动直播也成为了可能。

音频技术发展到今天，实际已经非常成熟了。从H264/H265、VP8/VP9以及后面的AV1编解码器，解决了视频压缩率的问题；而5G的商用，解决了带宽的问题。这两个问题解决后，各行各业都开始使用音视频技术来实现更佳的用户体验，比如：音视频会议、直播带货、在线教育、远程医疗、娱乐游戏等等。

2020年由于疫情的影响，大家更多地认识和了解到音视频相关的行业。音视频技术底层离不开编解码标准的发展。而就在今年，新一代国际视频编解码标准（H.266/VVC）正式出炉，其后续的落地实践非常值得关注。从行业应用的发展来看，围绕音视频直播一定会有三个发展方向：更快、更便宜、更智能。

之前音视频领域有两大技术路线：一类是RTC，它主要用于满足多人会议中的低延时互动；另一类是流媒体直播/点播，主要满足于对延时要求不大的高并发低成本场景。而端上的音视频处理技术主要围绕更智能，诸如人脸识别、美颜、降噪、超分等处理优化来展开, 行业中也有更多的实践落地，从后端到前端都在探索更为极致的体验。

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

前端DevOps

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

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

前端相关的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侧用户的数据管理需求。

（未完待续）

参考资料：

WebAssembly官网：https://webassembly.org/

微软Power Platform： https://www.microsoft.com/China/cloudproductivity/powerplatform/index.html

腾讯IMWeb：https://mp.weixin.qq.com/s/aAmFyYF7Y6F2-9-LrZ-fsg

InfoQ：https://mp.weixin.qq.com/s/LduadVMjFMDra0PxYDTQ1w

【WEB前端大作战】火热进行中：https://bbs.huaweicloud.com/blogs/255890

web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除侵权内容。