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