大家好，我是若川。持續組織了近一年的源碼共讀活動，感興趣的可以?加我微信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年內前端人走向前列。
掃碼加我微信 lxchuan12、拉你進源碼共讀群
今日話題
目前建有江西|湖南|湖北?籍 前端群，想進群的可以加我微信 lxchuan12?進群。分享、收藏、點贊、在看我的文章就是對我最大的支持
)
