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

以下文章來(lái)源于云謙和他的朋友們 ，作者云謙

或者叫「2022 前端回顧」。看到尤大下周（2022.7.22）會(huì)分享《前端趨勢(shì) 2022》，手癢也想寫(xiě)一篇。于是重新翻了一遍這半年的 MDH 前端周刊，來(lái)看看這半年的趨勢(shì)。希望借這篇文章，讓大家快速了解這半年前端的發(fā)展，同時(shí)有一些對(duì)于未來(lái)的基本判斷。

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

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

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

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

5、Storybook 競(jìng)品來(lái)勢(shì)洶洶。 包括支持 React 的 Ladle 和支持 Vue 的 Histoire，他們的特點(diǎn)都是快。同時(shí)，Storybook 雖然一直在嘗試提升編譯速度，包括支持 vite、支持 webpack 的 lazy compilation 等。

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

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

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

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

題圖：thenata @ unsplash 。


作者：云謙


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