Blog

Blog

PHODAL

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

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 研究什么新技术?

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享

标签