前端趋势 2022，7.22 尤大又有什么新动作？

或者叫「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。

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 带来的一些问题。