快速了解 2022 上半年前端的發(fā)展趨勢！

以下文章來源于云謙和他的朋友們 ，作者云謙

或者叫「2022 前端回顧」?？吹接却笙轮埽?022.7.22）會分享《前端趨勢 2022》，手癢也想寫一篇。于是重新翻了一遍這半年的 MDH 前端周刊，來看看這半年的趨勢。希望借這篇文章，讓大家快速了解這半年前端的發(fā)展，同時有一些對于未來的基本判斷。

1、原生語言已成為 JS 工具鏈重要組成部分。 猶記得好久以前有人發(fā)過一個投票，你會選 JavaScript Tool 還是 Native Code Tool？這其實是在速度和上手門檻之間做選擇。這么久過去，開發(fā)者已經(jīng)用腳投票。現(xiàn)在社區(qū)有大量基于 Native Code 實現(xiàn)的 JavaScript 工具和框架，比如 Deno（Rust）、Bun（Zig）、Rome Formatter（Rust）、esbuild（go）、swc（Rust）、Parcel CSS（Rust），比如 kdy 之前畫的 tsc 的大餅（go），以及像 Next、Vite、Nuxt、Umi 等上層框架和工具也都有大量原生語言工具的應(yīng)用。

2、Tauri['t?:rai] 嘗試代替 Electron。 「Electron is easy, but slow and bloated.」Electron 雖然易上手，但問題是大和慢，去年 1Password 8 就因為切換到 Electron 被罵地不行。Tauri 可以解這個問題，滿足大家「既要用 JavaScript 開發(fā)，又要產(chǎn)品性能」的需求，基于 Rust，近期有發(fā)布 1.0。

3、Islands 架構(gòu)發(fā)展迅猛。 Islands 架構(gòu)最早由 preact 作者于 2020.8.11 提出，解頁面性能問題，包括 SSR 全?？蚣芟隆钢貜蛿?shù)據(jù)、JS 尺寸大、注水消耗大」的問題。其特點是「More HTML，Less JavaScript」，默認全部 HTML，然后在輪播、搜索補全、購買按鈕等需要交互的地方加上少量 JavaScript。低碳、節(jié)電，哈哈。社區(qū)已有很多實踐，前有 astro、qwik、基于 svelte 的 elderjs 等，后有基于 deno 的 Fresh，都是對于 Islands 架構(gòu)的實踐?？吹?Fresh 之后，個人感覺方案已逐漸成熟，可嘗試用于生產(chǎn)。

4、數(shù)據(jù)流從純客戶端發(fā)展到全棧。 純客戶端數(shù)據(jù)流包括 Redux、MobX、Dva、Jotai、Recoil、Valtio、Zustand 等，基本都是「View > Action > State」單向數(shù)據(jù)流，跑在客戶端。而很多應(yīng)用實際上還有持久化數(shù)據(jù)和同步數(shù)據(jù)的需求，所以在這個單向數(shù)據(jù)流之外，還會有個和服務(wù)端交互的數(shù)據(jù)流。Remix 把這個數(shù)據(jù)流擴展到了全棧，通過獲取數(shù)據(jù)的 loader 和修改數(shù)據(jù)的 action，形成「Loader > Component > Action」的全棧數(shù)據(jù)流。同時 React Query、SWR、RTK Query 和 useRequest 也可以理解為廣義上的全棧數(shù)據(jù)流，處理服務(wù)端和客戶端之間的數(shù)據(jù)同步。

5、Storybook 競品來勢洶洶。 包括支持 React 的 Ladle 和支持 Vue 的 Histoire，他們的特點都是快。同時，Storybook 雖然一直在嘗試提升編譯速度，包括支持 vite、支持 webpack 的 lazy compilation 等。

6、CSS 動作頻頻。 比如 CSS Toggle 讓 Toggle 場景不再需要 JavaScript，比如 :has 選擇器讓 CSS 終于有了向上選擇的父選擇器，比如 CSS Variable 2 提案最近也已在進行中，再比如 Defensive CSS 可以讓你的應(yīng)用更加健壯。

7、Headless 組件風頭正盛。 很多人會無腦選擇 UI 框架，但如果業(yè)務(wù)復雜或者有自己的設(shè)計需求時，可能會針對框架做很多 hack；又或者 80% 的場景下很節(jié)省時間，遇到 20% 的需求不符的場景時，反而會花更多的時間去解。所以，最近 Headless 組件逐漸被大家接受，他們包含完整功能，但把設(shè)計部分留給開發(fā)者處理。比如 Reach UI、Headless UI、Radix UI、Downshift、React ARIA、Reakit、Ariakit、React Table 等都是，以及有基礎(chǔ)樣式的 Chakra UI 也算。結(jié)合 Tailwind CSS 快速打造符合自己設(shè)計系統(tǒng)的 UI 庫。

8、React 一如既往的穩(wěn)。 React 18 終于正式發(fā)布；同時 React 官方正嘗試通過 useEvent 來修復 hooks 帶來的一些問題。

9、文檔工具有新秀。 比如 Prisma 作者出的 Contentlayer，通用方案，可以和任意框架對接；還有 Stripe 團隊出的 Markdoc 也令人眼前一亮，其引入一種新的 markdown 編寫方式，可以和任意語言結(jié)合使用。此外值得一提的是，MDX 也有發(fā)布他的 2.0 版本。

題圖：thenata @ unsplash 。


作者：云謙


歡迎關(guān)注微信公眾號 ：前端印象