2022 年前端趋势总结与 2023 战略规划

Posted by: Phodal Huang Jan. 19, 2023, 1:11 p.m.

PS：本来应该在 2022 年交付的这篇文章，受阳了的影响，延迟到了 2023 年。

照旧，本文没有任何的数据支撑，只是总结自己的理解、社区上的趋势以及自己的探索。

类微前端：丰富与灵活的各类模式

与 5 年前相比，微前端及类微前端模式已经灵活多变，无法简单使用一篇文章来介绍。但是，总体而言，我们可以大致划分四类：

• 微内核模式。即胖 vendor + 插件式的瘦组件
• 标准微前端模式。各个应用、组件完全独立
• 混合模式。即介于微内核与微服务化模式，诸如于围绕构建划分、半嵌入的微内核模式。
• 无组件模式。诸如于基于 Web Components、Islands 架构模式构建丰富的组件集，应用可以基于此快速创建。

市面上丰富的不同实践，也造成了一个问题：如何选择合适的模式？如何平衡不同的微前端模式？

工具链：追求速度与非凡体验

众所周知，JavaScript 的工具链存在执行速度的问题，主要体现在编译方面，进而影响到开发和构建速度。

• Rust 作为 JavaScript 的基础设施语言。在底层的 Node.js 生态方面，诸如于 NAPI-RS 提供了使用 Rust 构建预编译 Node.js 原生扩展的能力。而围绕于编译与构建的 SWC、Parcel 等工具也提供了更快的开发体验。
• 其它其它低层语言。诸如于采用 Golang 语言的 ESBuild、采用 Zig 语言的 Bun 开发的 JS 运行时等。

在个人兴趣方面，日常使用 Warp 作为我的 CLI 工具，它的交互方式让我觉得眼前一亮。除此，诸如于 Replit 提出的 CLUI 构建图形化命令行的理念，让我重新思考构建工具的方式，如何带来更好的开发体验。

低代码的另外一种声音

市场上已经达成了一种新的共识：针对于不同的场景，构建不同的低代码平台。但是呢，我们空间需要怎样的低代码平台？这成了今年的一个新问题。

而对于中小型公司，还面临着一个问题，开发人员响应“热闹驱动开发”开发了低代码平台，而这些低代码平台似乎并没有真正体现价值。对于业务人员而言，这些低代码平台的学习成本太高。

尽管主要原因可能是，开发人员没有考虑普通用户的体验。但是呢，实际上的原因可能是：设计不出适合于业务人员的体验？而这个问题可以换个角度来看，在金融科技公司里，他们更希望招聘的是懂得 Python 的金融工程人才。也因此放到低代码领域来看，这些公司或许需要懂得一些技术的数字化人才。

低延时与高性能前端

2022 年，元宇宙火了一把。尽管从体验来说，原生构建的 UI 会带来更好的性能 —— 采用诸如 C++ 等高性能语言。而由于 WebAssembly、React Native/React XR 等的存在，前端开发人员在元宇宙还是有一些技术倒是值得研究：低延时与高性能。在这一方面，更多的是 WebAssembly 的发挥空间。对于大部分前端开发人员，由于 Rust 在前端和浏览器生态的位置，学习 Rust 成了更好的选择。

不过与 Rust 语言相比，更多的低延时领域采用的是 C++ 构建 WASM 应用。

浏览器智能

PS：受限于我的精力，在这方面并没有研究得特别深入。

既然能在移动设备上运行 TensorFlow Lite，在边缘型的嵌入式设备中能部署 AI 应用（tinyML），那么直接运行在浏览器上的 AI 也将变得非常流行（TensorFlow.js、ML5.js）。而我们还要面对模型体积带来的网络影响，如何平衡体积与质量成为了一种挑战，诸如于几年前的 Handtrack.js 提供了足够小的体积。

要点做什么呢？或许，不为了 AI 而 AI 是我们的下一个挑战。

内部平台的开发体验

在过去我们已经构建了一系列的内部平台，而这些平台并没有很好的开发者体验。究其原因主要是：设计人员不懂开发，开发人员不懂设计。

考虑到投资回报率的问题，大部分的公司并不会在上面有所投入，但是对于开发人员是值得一学的。我先前总结的《开发者体验：体验与重塑》大抵可以作为开发人员的入门指南。

架构模式：Server-Driven UI 与 Islands

在 2022 年里，一些过去莫生的架构模式，也逐渐变得耳熟能详。

• Server Driven UI。Shopify、Airbnb 等公司采用的 Server-Driven UI，也提供了更灵活的架构模式。在 SDUI 架构下，服务器返回的数据（JSON）会包含页面的组件信息、布局以及数据类型等等，前端则根据这些信息来渲染 UI。从模式上来说，它与我们现今构建的低代码模式极为类型，围绕生成的 JSON 生成组件等的信息。相比之下，只是产出的结果和过程数据略有差异。

• Islands 架构（孤岛架构）。相比之下 Islands 架构与 SDUI 架构模式，也颇为相似。孤岛架构鼓励在服务器呈现的网页中使用小的、集中的交互块。Islands 的输出是渐进式增强的 HTML，更具体地说明了增强是如何发生的。简单来说，产出物不同。基于 Deno 运行时的 Fresh 框架，便 是基于这种框架。

这两种模式依赖于服务器来动态生成，还存在依赖于 CDN 的动态生成模式。

边缘 JavaScript

多年前，CloudFront 提供了一个名为 Cloudflare Worker 的工具，可以在边缘侧执行应用程序。在最近的几年里，越来越多的主流框架支持这种方式，诸如于 Next.js 的 Edge Runtime。简单来说，CDN 厂商提供了一个动态的 JavaScript 服务器，让代码运行在边缘侧，以提高应用程序的访问速度。

这种模式，更适合于处理预处理场景，诸如于授权等，也应用于 Islands 架构。

你呢？想在 2023 研究什么新技术？