前端趋势 2022

大家好，我是若川。持续组织了近一年的源码共读活动，感兴趣的可以加我微信lxchuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。

或者叫「2022 前端回顾」。看到尤大下周（2022.7.22）会分享《前端趋势 2022》，手痒也想写一篇。于是重新翻了一遍这半年的 MDH 前端周刊，来看看这半年的趋势。希望借这篇文章，让大家快速了解这半年前端的发展，同时有一些对于未来的基本判断。

1、原生语言已成为 JS 工具链重要组成部分。 犹记得好久以前有人发过一个投票，你会选 JavaScript Tool 还是 Native Code Tool？这其实是在速度和上手门槛之间做选择。这么久过去，开发者已经用脚投票。现在社区有大量基于 Native Code 实现的 JavaScript 工具和框架，比如 Deno（Rust）、Bun（Zig）、Rome Formatter（Rust）、esbuild（go）、swc（Rust）、Parcel CSS（Rust），比如 kdy 之前画的 tsc 的大饼（go），以及像 Next、Vite、Nuxt、Umi 等上层框架和工具也都有大量原生语言工具的应用。

2、Tauri['tɔ:rai] 尝试代替 Electron。 「Electron is easy, but slow and bloated.」Electron 虽然易上手，但问题是大和慢，去年 1Password 8 就因为切换到 Electron 被骂地不行。Tauri 可以解这个问题，满足大家「既要用 JavaScript 开发，又要产品性能」的需求，基于 Rust，近期有发布 1.0。

3、Islands 架构发展迅猛。 Islands 架构最早由 preact 作者于 2020.8.11 提出，解页面性能问题，包括 SSR 全栈框架下「重复数据、JS 尺寸大、注水消耗大」的问题。其特点是「More HTML，Less JavaScript」，默认全部 HTML，然后在轮播、搜索补全、购买按钮等需要交互的地方加上少量 JavaScript。低碳、节电，哈哈。社区已有很多实践，前有 astro、qwik、基于 svelte 的 elderjs 等，后有基于 deno 的 Fresh，都是对于 Islands 架构的实践。看到 Fresh 之后，个人感觉方案已逐渐成熟，可尝试用于生产。

4、数据流从纯客户端发展到全栈。 纯客户端数据流包括 Redux、MobX、Dva、Jotai、Recoil、Valtio、Zustand 等，基本都是「View > Action > State」单向数据流，跑在客户端。而很多应用实际上还有持久化数据和同步数据的需求，所以在这个单向数据流之外，还会有个和服务端交互的数据流。Remix 把这个数据流扩展到了全栈，通过获取数据的 loader 和修改数据的 action，形成「Loader > Component > Action」的全栈数据流。同时 React Query、SWR、RTK Query 和 useRequest 也可以理解为广义上的全栈数据流，处理服务端和客户端之间的数据同步。

5、Storybook 竞品来势汹汹。 包括支持 React 的 Ladle 和支持 Vue 的 Histoire，他们的特点都是快。同时，Storybook 虽然一直在尝试提升编译速度，包括支持 vite、支持 webpack 的 lazy compilation 等。

6、CSS 动作频频。 比如 CSS Toggle 让 Toggle 场景不再需要 JavaScript，比如 :has 选择器让 CSS 终于有了向上选择的父选择器，比如 CSS Variable 2 提案最近也已在进行中，再比如 Defensive CSS 可以让你的应用更加健壮。

7、Headless 组件风头正盛。 很多人会无脑选择 UI 框架，但如果业务复杂或者有自己的设计需求时，可能会针对框架做很多 hack；又或者 80% 的场景下很节省时间，遇到 20% 的需求不符的场景时，反而会花更多的时间去解。所以，最近 Headless 组件逐渐被大家接受，他们包含完整功能，但把设计部分留给开发者处理。比如 Reach UI、Headless UI、Radix UI、Downshift、React ARIA、Reakit、Ariakit、React Table 等都是，以及有基础样式的 Chakra UI 也算。结合 Tailwind CSS 快速打造符合自己设计系统的 UI 库。

8、React 一如既往的稳。 React 18 终于正式发布；同时 React 官方正尝试通过 useEvent 来修复 hooks 带来的一些问题。

9、文档工具有新秀。 比如 Prisma 作者出的 Contentlayer，通用方案，可以和任意框架对接；还有 Stripe 团队出的 Markdoc 也令人眼前一亮，其引入一种新的 markdown 编写方式，可以和任意语言结合使用。此外值得一提的是，MDX 也有发布他的 2.0 版本。

················· 若川简介 ·················

你好，我是若川，毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇，在知乎、掘金收获超百万阅读。
从2014年起，每年都会写一篇年度总结，已经坚持写了8年，点击查看年度总结。
同时，最近组织了源码共读活动，帮助4000+前端人学会看源码。公众号愿景：帮助5年内前端人走向前列。