2021 InfoQ年度技术盘点与展望：聚焦大前端领域进展

作者 | 闫园园

本篇内容属于“2021 InfoQ 年度技术盘点与展望”系列文章的一部分，由 InfoQ 编辑团队精心制作并呈现。文章主要围绕大前端领域在2021年的关键发展及变化进行深入探讨，旨在协助读者精准捕捉该领域在那一年的核心发展趋势，并帮助业内人士持续保持对技术前沿的敏感度。

“InfoQ年度技术盘点与展望”是InfoQ全年关键内容选题之一，内容将包括架构、人工智能、大数据、大前端、云计算、数据库、中间件、操作系统、开源以及编程语言等十大领域。未来，这些内容将逐步扩展为专题、迷你书、直播周以及合集页面，并在InfoQ媒体矩阵中陆续发布，敬请大家持续关注。

在此特别向华宇果、狼叔、赵晓涵等几位重量级人物表达诚挚的感激之情，正是他们的独到见解，使得本文得以与广大读者见面。

在本文的开篇，我们先来对大前端这一领域有一个全面的了解。历经发展，大前端目前究竟达到了何种发展阶段呢？

1 大前端：趋于稳定，未来可期

总体来看，当前的大前端行业已进入相对稳定的时期，框架的功能特性逐渐减少，各种工具和组件也在减少，鲜有令人眼前一亮的新鲜事物出现。

当前的前端阶段属于从标准化向成熟探索的初期

当前阶段，我们更倾向于精细化的探索，重点在于探讨如何将以往的内容做得更加细致、效果更加出色。众多技术领域开始细化，例如可视化、工程化等细分领域，目前受到了广泛关注。在这一过程中，各个领域仍需不断实现技术上的突破与完善，而且相较于从零到一的创新过程，从一至百的拓展过程则显得更为艰难。当然，从另一个角度来看，在持续的深入挖掘中，我们也遭遇了更多的未知领域，因此，前端领域总体上依旧是一个充满无限遐想的空间。

本文将针对当前前端领域备受关注的数个焦点问题，逐一进行本年度趋势的详细剖析。

2 重点技术方向盘点

跨端技术：Flutter 或成主流方案

在讨论跨端技术时，我们必须将其内容细分为两个主要方面：一是“端”的概念，二是“技术”本身。

第一，在“端”的方面，今年我们需要感知两个变化：

其次，在技术领域，跨平台技术不断涌现，然而，在处理复杂业务场景时，跨平台框架在性能与用户体验上，相较于原生应用，仍存在一定差距。尽管如此，在降低成本、提高效率的总体目标下，跨平台技术依然是目前研究的热点之一。

今年，比较需要重点关注的是：

框架：三架马车仍占主导

根据 Stackoverflow 在 2021 年对开发者的调查结果，JavaScript 已连续八年位居最受欢迎编程语言之列，其中 67.7% 的受访者选择了它。毫不夸张地讲，JavaScript 在前端领域的地位至今未被动摇。在这个宏观背景下，我们已逐渐适应了 React、Angular 和 Vue 等JavaScript框架在业界占据核心位置的现状。今年，这三大框架所呈现的新特性或新趋势值得我们重点关注：，

当然，某些具备发展潜力的框架同样值得我们关注，比如Svelte。它之所以受到推崇，在于其在某乎上获得了众多高赞回答，众多行业内的专家对其应用进行了广泛的讨论。今年，Svelte的关注度显著上升，是大家学习的一个不错选择。

在此，我们引用了尤雨溪等业界权威人士的观点，对相关内容进行归纳。Svelte 是一种组件式框架，其核心理念是通过静态编译来降低框架在运行时的代码负载。与 React 和 Vue 等同类框架相比，Svelte 在编译阶段与执行阶段有着显著的不同。在构建过程中，它会将组件转换成执行效率极高的指令代码，从而在更新 DOM 时更加高效，为用户带来更优质的体验。Svelte既可独立应用，亦能与其它框架相融合，共同构建Web应用程序。

当然，目前看来 Svelte 也有潜在问题：

微前端：逐渐普及

微前端这一概念，实则与微服务在后台的作用相仿。当前端业务达到一定规模后，便亟需一种架构模式来降低复杂性。因此，微服务理念被引入前端领域，形成了微前端这一概念。微前端将前端应用拆解为若干个更小、更易于独立开发、测试和部署的模块，并清晰界定它们之间的相互依赖关系。

观察今年微前端的发展态势，其普及程度已经相当显著。除了single-spa、qiankun等传统微前端框架之外，国内涌现出众多新颖的微前端解决方案，并纷纷以开源的形式与大家见面。

Webpack 5 的 Module Federation 特性贡献颇多，它使得 JavaScript 应用在运行期间能够从其他应用中动态引入代码，这一功能极大地增强了微前端架构的潜力。此外，ESM 和 WebComponent 等源自 Web 标准的技术，也为开发者提供了实现微前端架构的可能。

由于微前端实现方式众多，众多企业纷纷推出了自家的微前端技术方案，例如京东的MicroApp、字节跳动的Garfish以及欢聚时代的EMP2.0等。

Serverless：构建基建是重点

Serverless，即无服务器运算，也称作Serverless Computing，亦或FaaS（Function-as-a-Service，函数即服务），这是一种云计算的架构模式。在这种模式下，计算资源以服务的形态呈现，而非以服务器作为基础。对于开发者来说，采用 Serverless 架构的应用部署可在服务层面完成，他们无需过多关注服务器相关事宜，这样的做法显著提升了软件开发和软件更新的效率。

Serverless 并非近期崭露头角的新兴理念。早在2006年，Zimki 公司便推出了首个“按实际调用计费”的云端 JavaScript 应用平台。时至今日，Serverless 技术仍在稳步发展，今年的焦点集中在基础设施建设上，而基于 Serverless 的前后端一体化趋势愈发明显。

本节着重介绍一款名为 Midway Serverless 的开源框架，该框架由 Midway 项目团队打造，旨在为 Serverless 云平台提供一套完整的开发解决方案。值得注意的，该框架在今年的三月份推出了其第二个重要版本，即 2.0 版本。

在2.0版本中，该产品实现了应用函数的集成、前端与后端的融合，显著提升了开发效率。展望未来，随着Midway Serverless对各大云服务提供商的适配能力不断提升，它有望成为该领域的佼佼者。

Node.js：平稳发展，查缺补

Node.js 由技术天才Ryan Dahl在2009年所创，这一创举为前端领域带来了极大的喜悦，因为它使得JavaScript能够实现前后端的全面兼容。因此，Node.js如今已成为Web前端开发领域不可或缺的核心技术之一。

今年观察 Node.js 的源码更新，整体态势呈现稳定前进、填补空缺的特点，没有出现显著的改动，不过其在易用性和用户体验方面实现了显著进步。

今年该社区活动相对较少，在此，我们不妨简要回顾一下近两年来值得关注的几件重要事件：，

Node.js 基金会与 JS 基金会决定合并，这一举措促成了 OpenJS 基金会的成立。

2019年3月，Node基金会通过Medium平台发布消息，宣布Node.js基金会与JS基金会将合并成立OpenJS基金会。该基金会致力于构建一个公正的组织架构，负责管理项目并支持对整个生态系统有益的活动，以此推动JavaScript和Web生态系统的持续繁荣。

官方指出，首先，通过加强 JavaScript 生态系统及其相关标准组织间的合作，OpenJS 基金会能够更高效地为 JavaScript 生态圈内的各个项目打造更加充满活力的平台；其次，这个平台能够满足他们在基础设施、技术支持以及市场营销等方面的各项需求。

此外，这两个机构的合并能够有效精简基金会的日常管理工作，在追求目标相互补充的过程中，力求降低不必要的重复劳动。此举也将为成员们提供更佳的参与体验，避免新成员在选择时感到困惑和犹豫。

成立初期，OpenJS 基金会汇聚了29个开源JavaScript项目，诸如jQuery、Node.js、Appium、Dojo以及Webpack等。到了2020年，Electron项目正式宣布加入OpenJS基金会的Impact项目行列。

社区有多个活跃工作组

该工作组是由技术指导委员会（TSC）所设立，目前总共有10个不同的工作组存在。

当然，提及 Node.js，便不能不提那个自诩为替代者的 Deno。

Deno 成功地解决了 Node.js 的一些关键不足，比如安全风险和依赖包管理难题，并且整合了众多实用工具，极大地便利了开发者的测试与调试工作。因此，Deno 的未来发展前景颇为乐观。然而，从目前的情况来看，它要在三到五年的时间内完全取代 Node.js 似乎还不太可能。其原因是，一方面Node.js的市场份额极大，且其生态系统相当成熟，基本上所需的功能在社区内都能找到。

另一方面，尽管 Deno 以消除 node_module 模块为口号，但其做法显得过于激进，这种不兼容的策略直接舍弃了 Node.js 的庞大生态系统，导致 Deno 在短期内几乎无法取代 Node.js。

前端工程化：降本增效是大方向

前端开发流程、技术、工具及经验的规范化与标准化，是通过应用软件工程的相关技术及方法实现的，其核心目标在于提升工作效率和降低成本，具体表现为提升开发效率、减少冗余劳动，从根本上讲，前端工程化是软件工程领域的一个分支。

前端工程化涵盖了一个广泛的领域，而本文将深入探讨其中的编译与构建部分。在这一环节中，今年有两个关键点值得我们特别关注：

Vite，这是由Vue的创作者尤雨溪在打造Vue3.0过程中所创立的一个基于原生ES-Module的前端构建工具。在随后对Vue3的推广过程中，尤雨溪对其新作品Vite给予了极高的评价，甚至直言自己“已经无法再回到Webpack的时代”。从当前的情况来看，Vite 确实有潜力成为最优秀且速度最快的开发构建工具。

今年二月份 Vite 2.0 发布，带来了大量改进：

其次，Rust 对前端工具链的辐射力日益增强。目前观察，Next.js 已在 Rust 平台上占据重要地位，这体现在它吸引了众多人才，例如 SWC 和 Rollup 的开发者等。

今年十月，Next.js官方宣布推出了12版本。该版本新增了以下特性：

自 Next.js 12 版本起，全面采用了 SWC 和 Rust 来取代 Babel，这一变革使得页面刷新速度提升了大约三倍，构建速度则达到了五倍。展望未来，预计将有更多工具基于 Rust 进行重写，以实现更高效的构建和打包过程。

低代码：价值已获认可

近两年，低代码这一概念同样备受关注，今年我们明显观察到国内各大云服务提供商纷纷投身于低代码领域，例如宜搭、AppCube低代码平台以及微搭等。

举例而言，宜搭在特定情境下确实能有效解决问题，听闻某产品经理曾凭借宜搭实现了全部产品功能。由此可见，低代码的价值普遍受到认可，并且已被实际应用。然而，低代码的实际效用究竟如何？至少目前来看，对于专业开发者而言，其效果并不显著。

在低代码领域，若要在业务范畴内构建，过程相对繁复。然而，从技术角度来看，这实则并不繁难，操作主要涉及模块层面的拖拽，其核心难点实际上仅有三个。

目前来看，构建成本相对较低，目前主要采用前端编写代码的方式进行模块生产。然而，未来将转向可视化生成模块，旨在解决逻辑可视化（imove）、状态可视化（xstate）以及多状态视图（stateview）的问题，实现真正的低代码生成模块，这将是未来的发展趋势。