帶你看看前端生態圈的技術趨勢
寫在前面
本次分享的數據來源是 state-of-css（??https://2022.stateofcss.com/zh-Hans/?? ） 和 state-of-js（??https://2022.stateofjs.com/zh-Hans/features/?? ），是前端生態圈中比較有影響力的且規模較大的數據調查。
由于這個分享話題很大，涉及到的技術很多，所以很多可以深挖的技術只能一筆帶過，但能出現在本次調查里的，都是有一定閃光點且有一定熱度的技術，如果感興趣的話可以深入了解。
調查人員統計
今年的 state-of-css 調查共回收了 14310 份問卷結果，state-of-js 調查共回收了 39472 份問卷結果，回收數量翻了一倍。歸功于一個非常棒的團隊（我也是其中的一員，負責 中文倉庫「??https://github.com/StateOfJS/locale-zh-Hans??」 的翻譯，歡迎大家加入），我們可以將調查結果翻譯成多種語言。
調查人員地域統計
上圖截取了調查中回收問卷數量前五名，以及來自中國的問卷數量。從中國回收的問卷占了全部問卷的 0.8%，和去年相比，問卷回收數量漲了一倍。
雖然說從中國回收的問卷只占了全部問卷的 0.8%，但這并不代表說中國的前端開發者占全球的比例只有 0.8%，實際上根據 ??antd?? 的下載量和 ??cnpm?? 的下載量估算，目測占比在 10% 左右。
也正是因為這一點，在看到這份調查數據時我們可能會有「誒這個框架在報告中很火，可是我身邊沒人用啊」的感覺。
但這也沒太多關系，畢竟只有多角度評價一項技術才能得出一個比較全面的結論。
調查人員年齡統計
今年的調查還單獨統計了開發人員年齡，可以看到絕大部分的前端開發者都是在 24 到 34 歲之間的，也有 16.5% 的前端開發者在 35 到 44 歲之間。雖然參與這份調查的大部分都是外國的開發人員，放到中國的話大概率會年輕化一些，不過這張圖也能很好的反映出前端開發者的年齡畫像了——大部分為 24-34 歲的年輕人。
state-of-css
CSS 特性
下圖根據技術分類劃分，顯示了各種特性的采用率。外圈的尺寸代表了了解這個特性的用戶數量, 而內圈的尺寸代表了實際使用這個特性的用戶數量。
分組區分特性：
根據使用數量區分特性：
- 在布局（Layout）方面，像
flex布局中用于調整元素間距的gap屬性，以及用于調整圖片縱橫比的aspect-ratio特性在使用率上有較大的提升。 - 在圖形和圖像（Shapes & Graphics）方面，用于給圖片添加濾鏡效果的
filter屬性使用率也非常高。 - 在顏色（Colors）方面，用于繼承父元素顏色的
currentcolor使用較多。 - 在交互（Interactions）方面，今年的增長主要集中在滾動相關的特性上，比如控制滾動效果的
scroll-behavior，控制滾動區域的scroll-snap。 - 在排版（Typography）和可訪問性（Accessibility）方面，像
font-display這種控制字體展示方式的特性還有:focus-visible這種 HTML 無障礙的特性用的比較多，其他都是一些使用度很低的冷門特性。 - 在選擇器（Selector）方面，
:where、:has這兩個選擇器使用率也很高。 - 而在其它特性中，
css variable、css comparison function等特性使用率也很高。 - 備注：像
flex、calc、object-fit、pointer-events等在去年使用率就已經非常高的特性，就不會出現在本次調查結果中了。
接下來我會分模塊挑選出一批「實用率較高」或「增長速度較快」的特性為大家進行解讀。
布局
??flex?? 布局中用于調整元素間距的 ??gap?? 屬性，在 2022 年不論是使用率還是增長幅度都非常高。
??aspect-ratio?? 特性主要用于調整圖片縱橫比，在 2022 年，使用率也提高不少。
??https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio??
圖形、圖像與顏色
??css filter?? 這個用于調整元素濾鏡的特性在 2022 年使用率也有一定的上漲，總使用率已經達到 72.4%，普及率已經非常廣了。
同樣的，用于給背景調整濾鏡樣式的 ??backdrop-filter?? 特性在 2022 年使用率也有 10%的漲幅，結合 ??css filter?? 的漲幅，可以看出網頁對于濾鏡效果的應用越來越廣泛了。
??https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter??
??currentcolor?? 用于繼承父元素的顏色，在 2022 年的調查中，也有 50% 的使用率，普及程度還是可以的。
??https://developer.mozilla.org/en-US/docs/Web/CSS/color_value??
交互
??scroll-behavior?? 用于控制滾動效果，在 2022 年的調查中，使用率已經超過了 60%，普及率很高。
??https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior??
??scroll snap?? 用于控制滾動容器的的滾動窗口在滾動操作完成后可能結束的滾動位置?？梢钥吹诫S著時間的推移，使用的人數也變得越來越多了。
??https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scroll_Snap??
排版、 可訪問性 與選擇器
??font-display?? 屬性決定了一個 @font-face 在不同的下載時間和可用時間下是如何展示的。雖然這幾年使用幅度沒漲，但它已經是排版相關的特性中使用人數最多的了。
??https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face/font-display??
當元素的焦點被激活時（比如一個 input 元素獲取到焦點），??:focus-visible?? 偽類下的樣式將生效。這個特性是可訪問性相關特性中使用人數最多的特性。
??https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus-visible??
??:has()?? 我相信大家都用過，它接收一個相對選擇器作為參數，如果在元素下匹配到對應的元素，那么就給這些元素加上對應的樣式。在選擇器相關的特性中，它是使用人數最多的。
??:where()?? 同樣接收一個相對選擇器作為參數，如果在元素下匹配到對應的元素，那么就給這些元素加上對應的樣式，當然，樣式優先級最高都是 0，也就是說它的樣式很容易被其他樣式所覆蓋。在選擇器相關的特性中，它的使用人數僅次于??:has()??。
其它特性
在其他特性中，使用人數最多的兩位都是我們的老朋友了，分別是??css variable??和??css comparison function??，他們兩個已經連續幾年在其它特性中蟬聯使用率第一和第二的寶座。
??https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Variables??
??https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions??
CSS 技術
預/后處理
預/后處理框架近幾年一直很穩定，今年仍然沒有什么新的變化，還是 ??PostCSS??、??SaSS??、??Less?? 這三樣。
CSS 框架
滿意度：
使用度：
從滿意度來看，近幾年 ??Tailwind CSS?? 一直居于榜首，其原子化 CSS 的特性的確很好用，也有越來越多的開發者愿意去嘗試它。
而從使用度來看，??Bootstrap?? 的使用度一騎絕塵，可以說是大家都在用了，但是的使用率在逐年走低，滿意度也越來越低，不難看出開發者們越來越不傾向于使用??Bootstrap??了。
而回到國產框架中，今年??antd?? 的滿意度和實用度的數值都有一定程度的下降，不過排名沒有變化。
CSS-in-JS 框架
滿意度：
使用度：
CSS-in-JS 框架倒是每年都有新的輪子出現，去年的黑馬 ??vanilla-extract??在今年滿意度掉的有點多，看來開發者們經過一年的使用還是發現了一些問題的。老牌框架諸如 ??CSS Modules??、??Styled components??、??Emotion?? 這些，依舊很不錯，尤其是??CSS Modules??，滿意度回到了第一名，使用率也在第二，非常優秀了。
瀏覽器環境與設備
下面這張圖顯示了開發者們會在哪些瀏覽器中進行開發和測試
可以看到對于 ??Chrome??、??Firefox??、??Safari??、??Edge?? 這些主流的瀏覽器，開發者們基本都要對其進行測試，而對于 ??IE11??、??IE8?? 這種時代的眼淚，就基本沒人關注了。
另外在移動端主流的兩個瀏覽器是??Safari iOS??和??Chrome Android??。
CSS 的痛點
開發者們認為 CSS 主要的痛點問題是：
- CSS 原生嵌套。
- Safari
- 瀏覽器對于不同特性的支持程度
- CSS-in-JS
CSS 原生嵌套其實是一個老生常談的話題了，這幾年一直受到大部分開發者的關注。隨著 W3C CSS 原生嵌套提案的進展，未來我們將會逐漸解決這個問題。
而 Safari，則有望接過 IE 的棒，成為新一代前端工程師最不愿意面對的瀏覽器。畢竟其對于部分特性的兼容程度和主流瀏覽器不太一致。
另外，隨著 CSS-in-JS 方案的廣泛使用，其同樣也暴露出了一定的問題——比如運行時消耗過大、SSR 不友好、沒有統一規范、組件過于臃腫產生可讀性的問題等等。也正是因為如此，CSS-in-JS 也成了大部分開發者的痛點問題之一。
今年 CSS 最大的亮點
使用率進步最多的特性
滿意度最高的技術
state-of-js
下圖根據技術分類劃分，顯示了各種特性的采用率。外圈的尺寸代表了了解這個特性的用戶數量, 而內圈的尺寸代表了實際使用這個特性的用戶數量。
分組區分特性：
根據使用數量區分特性：
- 在語言特性方面，像空值運算符
Nullish Coalescing，頂層異步函數top level await，以及String.propotype.replaceAll使用人數較多。 - 在瀏覽器 API 方面，像
WebSocket、Shadow Dom還有service worker普及率。 - 在其它特性方面，唯二拿得出手的就只有
PWA和wasm了。
接下來我會分模塊挑選出一批「實用率較高」或「增長速度較快」的特性為大家進行解讀。
JS 特性
語言特性
空值運算符的使用率逐年上升，今年已經有了將近 70% 的使用率，成為近幾年使用人數最多的新特性。畢竟相比于??||??，??????在判斷空值時更加精準，也更合適。
??https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing??
頂層異步函數在今年使用率有了 27% 的進步，是進步幅度最大的新特性。這其實與異步函數??async await??近幾年的普及密不可分。
??https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await??
瀏覽器 API
在這部分我們會看到很多 API 在 2022 年使用率反而有所下滑，這個主要是因為本次回收的問卷規模大了一倍，導致很多特性的使用率被稀釋了。
用于創建雙工通信的??websocket??是瀏覽器 API 中最常被開發者使用的了，使用率高達 62%。
??https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API??
隨著??Web Components??的普及，??shadow dom??也成了開發者們最常使用的瀏覽器 API 之一，使用率達到了 42.1%。
??https://developer.mozilla.org/zh-CN/docs/Web/Web_Components??
其它特性
使用 PWA 的開發者在今年有小幅下跌，但它依然有著 58% 的使用率，普及程度依舊很廣。
??https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps??
使用 wasm 的開發者在今年有小幅上漲，如今已經到了 17.5%，但聽說過 wasm 的開發者很多，將近 70%，看來 wasm 應用落地的路還是任重而道遠啊。
JS 技術
下圖是根據 JS 技術的滿意度進行的排名。滿意度指的是“會再次使用這個技術的人數”。請注意，使用率不到 10% 的代碼庫不包括在內。
前端框架
滿意度：
使用率：
從滿意度來說，??Solid.js?? 和 ??Svelte?? 這兩個新框架的滿意度位居榜首，拋棄 Vdom 使其擁有了非常小的包體積和極佳的性能，確實能為開發者帶來不錯的體驗。
從使用率來說，還是這熟悉的三位面孔：??React??、??Angular??、??Vue??。
渲染框架
滿意度：
使用率：
渲染框架這里主要指的是用于渲染前端頁面的框架，因而像??express??和??koa??這樣的后端框架沒有上榜。
從滿意度來看，??Astro??和??SvelteKit??的滿意度都很不錯。
從使用率來看，老牌框架??Next.js??的使用率非常高，達到了 49%，將近一半。
測試工具
滿意度：
使用率：
從滿意度來看，今年測試工具領域的黑馬非??vitest??莫屬，當然這肯定離不開??vite??近些年的迅猛發展。
從使用率來看，??Jest??還是第一，但使用率下降了 5%。大部分測試工具下降的份額都被??vitest??吃下了。
跨端技術
滿意度：
使用率：
從滿意度來看，基于??Rust??開發的跨端框架??tauri??的滿意度非常高，達到了 92%。
從使用率來看，還是這兩位熟悉的面孔：??Electron??和??React Native??。
構建工具
滿意度：
使用率：
從滿意度來看，和去年差不多，新一代構建工具??vite??再次登上了滿意度的榜首，??esbuild??緊隨其后。
從使用率來看，??webpack??仍然處于最領先的地位，使用率高達 85%，但??vite??的增長勢頭也非常猛，一年漲了 19% 的使用率。
monorepo 工具
滿意度：
使用率：
monorepo 因為有一些爭議，所以總體使用率都不太高，沒有超過 30%的。但綜合滿意度和使用率來考量，使用??pnpm??和??yarn workspace??來組織??monorepo??最為合適。
JS 的痛點
上圖顯示了開發者們認為目前 JS 的痛點問題，排名前三的是「代碼架構」、「管理代碼依賴」和「狀態管理」。
- 代碼架構是軟件工程領域中永恒的難題。尤其是在 JS 應用逐漸臃腫的今天，更是難上加難。不過隨著 ES 標準的逐漸演進，以及 TS 的發展，開發者們能夠利用更合理的特性和方式來組織代碼架構，還算是未來可期。
- 依賴管理更是 JS 老大難的問題了，應用代碼 5kb，
node_modules1mb 已經是開發常態了。不過好消息是，從最開始的 npm 到 yarn 再到 pnpm，依賴管理工具一直在不斷演進，為我們提供更好的依賴管理解決方案。 - 狀態管理其實也是一個老生常談的話題了，從表單交互到復雜編輯器，開發者們都離不開對組件狀態的管理。而與之相應的，則是一眾諸如
mobx、redux、immer的狀態管理工具。而這些工具的適用場景，也都有所不同。在狀態管理這個領域沒有所謂的「銀彈」，需要開發者根據自己項目的實際情況來選擇最合適的工具。
今年 JS 最大的亮點
使用人數最多的特性
使用人數最多的技術
滿意度最高的技術
最受關注的技術
最多次被提及的庫
總結
總的來說，今年前端生態圈依然是非常有活力的。不論是 CSS 還是 JS 生態，都在蓬勃發展。
在 CSS 方面，Interop 2022 將瀏覽器廠商聚集在一起，為同一個目標而努力。有幾個功能從「永遠不會實現」變成了「現在正在實現」。??:has()??和??@container??是其中的兩個重磅功能。多年來，由于性能的影響，開發者們一直認為這些功能是不可能實現的，但事實證明，這兩種功能都是可能的。
另外，??Subgrid??也在推進中，Firefox 和 Safari 已經支持了，Chrome 也在積極實現中，所以我們明年可能會看到更高的使用率。
而在 JS 方面，我們可以看到 JS 生態和 TS 生態比以往任何時候都更有活力。
我們可以看到新的、性能更好的前端框架的出現，例如，??Svelte??選擇了拋棄 vdom，并在編譯時搞定一切。??Solid??探索了新的響應式解決方案。雖然今年我們看到像??React??、??Angular??或??Vue??這樣的成熟框架的滿意度有所下降，但這種下降更多是由于工具經過實戰測試并用于生產，找到了難用的邊界，這其實是一個框架成熟的標志，這些框架也會因為這些「難用的邊界」而持續創新并繼續發展。
當然，Vite 連續第二年成為了 JS 最大的亮點，這說明構建和服務技術正在取得巨大的進步，我們也都從這一巨大進步中受益。
最后，希望各位能在這些數據和分析中有所收獲！
