前端趨勢 2022
或者叫「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 版本。
題圖：thenata @ unsplash 。
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/bvj85ISrk8RBk7RHA1NpSg