关于前端:从2021看2022前端发展趋势

本文参加了 SegmentFault 思否征文「2021 总结」，欢送正在浏览的你也退出。

前言

又到了年底，回顾一下整个 2021 年的前端历程，总体来说前端趋势到了一个比较稳定的倒退阶段，尽管依然有许多层出不穷的库及轮子，但整体来看其实往年最突出的前端倒退其实能够概括为以下几个关键词，即：工程基建、低代码、多语言、云 + 边 + 端。从不同大厂对整个前端的划分视角来看，整体能够分为两大类，一类是聚焦化，比方辨别各个方向，每个方向做到极致；另一类是兼顾化，将整个上下游链路买通，扩大前端的边界。私认为，这两种划分孰优孰劣很难判定，从宏观到宏观，再从宏观到宏观，只是思考的形式不同，这里我将从纵向和横向两个方向，换几个不同的视角来谈谈我对往年整体的前端倒退态势以及 2022 年可能会呈现的一些趋势与时机，以期能给大家提供一些不同的察看和思考角度。

纵向

如果把当初前端按纵向档次进行划分，私认为大体能够分为“根底层、平台层、业务层”这三个档次，上面将从这三个档次的不同维度进行一些思考和摸索

根底层

毋庸置疑，往年最大的亮点无疑在于多语言的宽泛映入前端视线，上面我将别离陈说下我集体的一些观点和认识：

Node.js

1. Node.js 在车联网等边缘侧畛域的利用，Node.js 作为前端最为相熟的语言，在车联网等 IoT 畛域更便于基于已有的传统硬件厂商的 C ++ 库的下层实现；
2. Node.js 更加贴近前端侧，不独自作为 BFF 来解决，而转型 FFB，更加合乎 Node.js 初始的作用，作为纯后端应用，不论是语言自身的限度还是 Node.js 的运行时体现，都很难与传统后端语言有更大的竞争空间，Node.js 作为前端侧的一个根底层反而更加适宜。

Rust

1. rust 的外围竞争力在于内存平安，私认为其在边缘侧配合 wasm 其实有很大的市场，在前端侧做基建集体认为很难体现出其外围价值，而在边缘侧其配合 wasm 或者真的能够撼动 Docker 的位置；
2. rust 作为前端的基建可能有肯定的市场，但不足以作为其外围竞争的事实存量，其和 go 作为前端基建工具孰优孰劣，当初还不清晰，然而在边缘侧我认为其市场是微小的，能够作为有动向在边缘侧倒退的同学作为深入研究的畛域。

Deno

1. 配合云端可能有肯定的突破点，其网络模块设计绝对优良，有可能会争夺一部分 node.js 的空间；
2. 不看好整体倒退，私认为没有一个外围取代 node.js 的理由或者激动，但仍不失为一个优良的计划，对网络模块的解决具备肯定的借鉴意义。

Wasm

1. 外围在于与 Rust 的配合构建边缘侧的基础设施，关上边缘侧市场，长期看好；
2. 作为各种其余语言的”胶水“，配合 js 等在浏览器及其他运行时，如：Node.js 等 (ps: 还是要思考下 Deno 的感触)，也是有肯定的倒退设想空间，但集体更看好其在边缘侧的倒退。

Go

1. 外围在于 goroutine，集体认为作为前端基建侧，与 rust 难分高下，但 go 绝对学习起来容易一些；
2. 云侧 go 作为不二首选，必然是 go，其生态很欠缺，想在云端畛域深挖的同学倡议肯定要学 go。

C++

1. 前端的老相识，作为 v8 及 chromium 初始开发语言，cpp 始终都是各大高级语言的根底老大哥，倒退稳固，私认为 rust 很难撼动其位置，然而二者并存其实并不无可能；
2. 传统老牌硬件厂商，将 cpp 暴露出给前端侧应用，如：v8 或者其余引擎，能够大大拓展开发市场，毕竟 js 绝对 cpp 还是容易。

综上，总结如下：在端侧，Nodejs 为主，Deno 适当思考，cpp 配合优化；在边缘侧，rust+wasm 前景广大；在云侧，go 不二首选。多语言倒退作为前端倒退的扩大应该的确是将来倒退的基调，尤其是在工程化畛域，其市场还是有非常广阔的前景的。

平台层

在平台层，依靠于根底层的一些根底承载，前端大体呈现出以下几个平台化的角度，即：Serverless、构建、场景以及框架，上面我将别离论述下集体的一些了解：

Serverless

1. Serverless 目前临时没有一个明确的定义，但以实际案例来看，整体能够用“Baas + Faas”来定义，在 Baas 层计算与存储拆散，在 Faas 层提供”云 + 端“的 Web Function；
2. 基于 Rust+Wasm 的沙箱化轻量 vm，microvm 利用于 Serverless 的沙箱隔离；
3. 多状态配合，基于服务的编排而不是基于资源的扩大，全栈可观测、服务可治理、流量可治理。

构建

1. 多构建工具丛生，webpack 仍为利用打包支流，rollup 多用于库，gulp 更适宜 node 侧构建；
2. 多语言侵入前端构建畛域，如：esbuild、vite、swc 等。在构建侧，语言级别的碾压不可逆转，会成为平台层的支流构建计划，毕竟打包工具不是每个业务开发都须要能从零手写，因此一个高性能的打包计划肯定会有微小的前端开发市场，剩下的就是自身的语言天才与编写者相互合作发明有限可能。

场景

1. 不同业务场景抉择不同的渲染计划，SSG、ISR、CSR、SSR、ESR、SPR 等；
2. 所有场景的抉择实质都是 render 偏重的取舍而已，软件工程中没有银弹，抉择适宜本业务场景的渲染计划才是上善之策。

框架

1. Meta Framework，框架的框架，不同的端有不同的框架，前端有前端的框架，服务端有服务端的框架；
2. 框架演变：纯前端 + 纯后端，即：前端侧 Vue、React、Angular 等，后端侧 Express、Koa 等；业务前端 + 业务后端，即：业务前端 Umi、Ice 等，业务后端 Midway、Egg、Nest 等；前端的后端或者后端的前端，如：Next、Nuxt、Remix 等。

综上，总结如下：Serverless 开释大前端能力，多语言构建，多场景抉择，基于框架的框架。从这里看，基本上从面向服务开发，转变为面向能力开发，端工程师转变为利用工程师。

业务层

在业务层，去年大略论述了一下根本的前端技术深入方向，往年着重谈一下几个方向的穿插畛域的一些亮点和感触：

可视化 + 工程化

上图所示地位 1

1. 低代码，特地是逻辑编排等，在 LCDP 中，数据逻辑编排或决策编排的可视化出现；
2. 状态可视化、逻辑可视化等，所有工程畛域中的可视化出现，从偏差机器到偏差人的所有链路都能够将工程化进行可视化展现。

可视化 + 智能化

上图所示地位 2

1. 海量数据的布局展现，联合 ai 推理构建可视图；
2. 链路诊断门路及图模式匹配；
3. D2C 畛域深入，基于开发者思维习惯的模型优化。

工程化 + 中后盾

上图所示地位 3

1. 工程链路闭环，开发 => 测试 => 构建 => 部署 => 监控；
2. 各阶段向聚焦，输入可工程量化的产物，提供中后盾等工程化模板计划，如：开发阶段包含：脚手架、公共库、包管理器、编辑器、构建工具、调试套件等；测试阶段包含：单元测试框架、动态扫描工具、自动化测试工具、性能测试工具等；构建阶段包含：打包脚本、构建服务等；部署阶段包含：公布平台、迭代治理平台等；监控阶段包含：埋点平台、监控平台等。

中后盾 + 跨端

上图所示地位 4

1. 多端框架出现，多以类 Flutter 构造出现，包含对立的小程序底层引擎等；
2. 多操作系统的实用，如：鸿蒙操作系统的适配。

综上，总结如下：工程化引领为主，可视化提供人性化展现，智能化提供模型化能力，中后盾 + 跨端提供面向不同用户的开发计划。各细分畛域从各自纵深，又相互交织在一起，迸发出各种有可能的倒退，分久必合，合久必分。

横向

从横向角度，我想从面向用户和面向开发这两个维度来谈一下作为前端工程师从技术登程所可能波及的一些业务或者产品模式上的拓展，越偏差 UX 侧则越偏差用户侧，也就更加偏差业务；越偏差 DX 侧则越偏差开发侧，也就更加偏差技术。

上面我将以前端技术为锚点向产品侧拓展，谈一谈我对一些畛域的认识和思考：

Product

矩阵左上角

文档

1. 协同编辑，B 端或者单纯的文档编辑都会有；
2. 海量数据处理，如金融类表格计算等。

设计工具

1. 设计图转代码；
2. 设计工具插件，如：sketch、photoshop 插件等；
3. 协同批改、切图等。

组件库

1. 通用型组件库，主题、Design Token 等；
2. 业务型组件库，业务畛域边界确定；
3. 设计语言 + 交互语言，物料市场。

Star

矩阵右上角

低代码

1. 通用能力引擎：UI 可视化开发、逻辑可视化开发、代码语言、生产运行、质量保证；
2. 面向受众，偏差开发、偏差用户；

Tech

矩阵右下角

IDE

1. 云端一体构建，云 ide 及端 ide；
2. 公布、构建性能确立，ide 周边及体系建设。

devops

1. ci 链路，包含需要关联、触发机制、告诉、脚本、故事板等；
2. cd 链路，包含调度、监测、制品库、公布机制等。

工具链

1. 框架运行时，编写框架插件等；
2. 脚手架构建，包含构建工具抉择等；
3. 编译调试工具，包含自定义调试工具包等；

Material

矩阵左下角

监控体系

1. 日志监控，包含日志剖析、过滤等；
2. 追踪链路，包含链路剖析等；
3. 度量监测，包含品质剖析、健康状况等。

总结

不要止步于浏览器，不要止步于 js，有 web runtime 的中央就属于前端畛域

回望 2021，瞻望 2022，总结如下：

三时代未曾可至，元宇宙尚需张望；

云边端将来已来，端工程利用将成；

大前端拓展无际，运行时所至皆为；

浏览器不可束约，多语言大势而行。

好了，2022 年到了，祝大家在这个寒冬里仍然可能坚挺，”道阻且长，行则将至；行而不辍，将来可期”，共勉！