帶你看看前端生態圈的技術趨勢

寫在前面

本次分享的數據來源是 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 年不論是使用率還是增長幅度都非常高。

https://developer.mozilla.org/en-US/docs/Web/CSS/gap

https://caniuse.com/flexbox-gap

aspect-ratio 特性主要用於調整圖片縱橫比，在 2022 年，使用率也提高不少。

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

https://caniuse.com/mdn-css_properties_aspect-ratio

圖形、圖像與顏色

css filter 這個用於調整元素濾鏡的特性在 2022 年使用率也有一定的上漲，總使用率已經達到 72.4%，普及率已經非常廣了。

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

https://caniuse.com/css-filters

同樣的，用於給背景調整濾鏡樣式的 backdrop-filter 特性在 2022 年使用率也有 10% 的漲幅，結合 css filter 的漲幅，可以看出網頁對於濾鏡效果的應用越來越廣泛了。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter

https://caniuse.com/css-backdrop-filter

currentcolor 用於繼承父元素的顏色，在 2022 年的調查中，也有 50% 的使用率，普及程度還是可以的。

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

https://caniuse.com/currentcolor

交互

scroll-behavior 用於控制滾動效果，在 2022 年的調查中，使用率已經超過了 60%，普及率很高。

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

https://caniuse.com/css-scroll-behavior

scroll snap 用於控制滾動容器的的滾動窗口在滾動操作完成後可能結束的滾動位置。可以看到隨着時間的推移，使用的人數也變得越來越多了。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scroll_Snap

https://caniuse.com/css-snappoints

排版、可訪問性與選擇器

font-display 屬性決定了一個 @font-face 在不同的下載時間和可用時間下是如何展示的。雖然這幾年使用幅度沒漲，但它已經是排版相關的特性中使用人數最多的了。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face/font-display

https://caniuse.com/css-font-rendering-controls

當元素的焦點被激活時（比如一個 input 元素獲取到焦點），:focus-visible 僞類下的樣式將生效。這個特性是可訪問性相關特性中使用人數最多的特性。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:focus-visible

https://caniuse.com/css-focus-visible

:has() 我相信大家都用過，它接收一個相對選擇器作爲參數，如果在元素下匹配到對應的元素，那麼就給這些元素加上對應的樣式。在選擇器相關的特性中，它是使用人數最多的。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:has

https://caniuse.com/css-has

:where() 同樣接收一個相對選擇器作爲參數，如果在元素下匹配到對應的元素，那麼就給這些元素加上對應的樣式，當然，樣式優先級最高都是 0，也就是說它的樣式很容易被其他樣式所覆蓋。在選擇器相關的特性中，它的使用人數僅次於:has()。

https://developer.mozilla.org/en-US/docs/Web/CSS/:where

https://caniuse.com/css-where

其它特性

在其他特性中，使用人數最多的兩位都是我們的老朋友了，分別是css variable和css comparison function，他們兩個已經連續幾年在其它特性中蟬聯使用率第一和第二的寶座。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Variables

https://caniuse.com/css-variables

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions

https://caniuse.com/css-math-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 應用落地的路還是任重而道遠啊。

https://developer.mozilla.org/en-US/docs/WebAssembly

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_modules 1mb 已經是開發常態了。不過好消息是，從最開始的 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 最大的亮點，這說明構建和服務技術正在取得巨大的進步，我們也都從這一巨大進步中受益。

最後，希望各位能在這些數據和分析中有所收穫，謝謝大家！

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/-FUtHiYEAp2CWQxxC8CAVw