轉(zhuǎn)自：趙越  —  字節(jié)跳動前端工程師
   

一、寫在前面

• 本次分享的數(shù)據(jù)來源是state-of-js，是由Devgraphics開源社區(qū)團隊發(fā)起的前端生態(tài)圈中規(guī)模最大的數(shù)據(jù)調(diào)查。

• 由于這個分享話題很大，涉及到的技術(shù)很多，所以很多可以深挖的技術(shù)只能一筆帶過，但能出現(xiàn)在本次調(diào)查里的，都是有一定閃光點且有一定熱度的技術(shù)，如果感興趣的話可以深入了解。

• 這次的調(diào)查結(jié)果比去年晚了將近四個月，這主要是因為，啟動新的state-of-html調(diào)查、收集比以往更多的自由格式數(shù)據(jù)、重寫數(shù)據(jù)可視化代碼邏輯這幾件事情工作量過于巨大，導(dǎo)致占用了太多時間。

• 想要貢獻state-of-js調(diào)查結(jié)果中文翻譯的同學(xué)可以聯(lián)系我，或者直接向Devographics/locale-zh-Hans這個倉庫提PR（不過我應(yīng)該已經(jīng)把2023年的調(diào)查結(jié)果都翻譯完了）。

• 如果這篇文章有其他意見或更好的建議，歡迎各位同學(xué)們多多指教。

二、受訪者統(tǒng)計

2023年的state-of-js調(diào)查共回收了23540份問卷結(jié)果，為了能夠凸顯出更多調(diào)查問卷的細節(jié)，我們針對問卷結(jié)果的圖表展示做了更多的優(yōu)化，同時也會披露更多細節(jié)。

地域統(tǒng)計

上圖截取了調(diào)查中超過200名受訪者的國家和地區(qū)，大部分國家的受訪者數(shù)據(jù)分布和去年一致，來自波蘭的受訪者翻了2倍，多了400人，來自印度的受訪者則腰斬了，少了700人。而來自中國的受訪者則和去年差不多，一直很穩(wěn)定，一直維持在280人左右。

雖然說從中國回收的問卷只占了全部問卷的2%，但這并不代表說中國的前端開發(fā)者占全球的比例只有2%，由于語言問題、宣傳渠道問題和調(diào)查動機問題，實際上很多中國的開發(fā)者并不會參與state-of-js生態(tài)調(diào)查。根據(jù)antd的下載量在https://npmmirror.com/和https://www.npmjs.com/的下載量差距估算，中國的前端開發(fā)者保守估計占比在5%左右。

也正是因為這一點，在看到這份調(diào)查數(shù)據(jù)時我們可能會有「誒這個框架在報告中很火，可是我身邊沒人用啊」的感覺。這其實是合理的，只通過國內(nèi)的KOL或者國內(nèi)工作接觸到的技術(shù)來了解技術(shù)發(fā)展趨勢，不融入國際技術(shù)社區(qū)接觸一手信息，這其實是有問題的，而且只有多角度評價一項技術(shù)才能得出比較全面的結(jié)論。

年齡統(tǒng)計

今年調(diào)查統(tǒng)計的開發(fā)人員年齡分布出現(xiàn)了一些變化，30-39歲的受訪者占比首次超過了20-29歲的受訪者。平均數(shù)和中位數(shù)也有了一些增長，首次突破了30歲（中位數(shù)是31歲，平均數(shù)是31.7歲），希望這個數(shù)據(jù)也能緩解一下大家的年齡焦慮。

JavaScript使用經(jīng)驗統(tǒng)計

注：學(xué)習(xí)使用JavaScript和工作使用JavaScript的時間均計算在「JavaScript使用經(jīng)驗」內(nèi)。

從調(diào)查結(jié)果可以看到受訪者的JavaScript使用經(jīng)驗分布相對均勻，4-6年的最多，1-3年次之，7-12年也不少。甚至還出現(xiàn)了2000多名js使用經(jīng)驗超過20年的受訪者——這意味著他們從2004年起就開始接觸JavaScript了。只能說，國內(nèi)相比于國外，web技術(shù)發(fā)展還是晚了不少，在國內(nèi)這是個完全不會出現(xiàn)的數(shù)據(jù)。

三、JavaScript特性

本次JavaScript特性調(diào)查結(jié)果在展示上有了一些變更，它自動選取了近些年新增的JavaScript特性，并統(tǒng)計了它們的使用率。

語言特性

• 在語言特性中，Nullish Coalescing（空值運算符）和Dynamic Import（動態(tài)引入）的使用率已經(jīng)很高了。

• Private Fields（私有屬性），是一個非常有意思的特性，它通過在類屬性前面加「#」來聲明它是一個private的屬性，這是JavaScript語言首次官方支持private屬性。相比于用閉包等方式來實現(xiàn)private，它更加簡潔好用，但是兼容性還是有些問題。

class ClassWithPrivate {
  #privateField;
  #privateFieldWithInitializer = 42;
 }

• Logical Assignment（“邏輯與”賦值），也是個很實用的屬性，舉個例子，x &&= y運算僅在x為真值時為其賦值，比如：

let a = 1;
let b = 0;

a &&= 2; // Expected output: 2
b &&= 2; // Expected output: 0

字符串特性

• 在字符串特性中，replaceAll和matchAll的普及度已經(jīng)很高了，相信大部分開發(fā)者已經(jīng)在生產(chǎn)環(huán)境中開始使用它們了。

• 正則表達式的hasIndices函數(shù)倒是相對冷門一些，它代表著如果正則表達式中d標(biāo)志被使用，則 RegExp.prototype.hasIndices的值是true，比如：

const regex1 = new RegExp('foo', 'd');
console.log(regex1.hasIndices); // Expected output: true

const regex2 = new RegExp('bar');
console.log(regex2.hasIndices); // Expected output: false

const regex3 = /foo/dg;
console.log(regex3.hasIndices); // Expected output: true

數(shù)組特性

• 還在因為數(shù)組的sort、reverse和splice函數(shù)會改變原數(shù)組而苦惱嗎？那你一定需要toSorted、toReversed和toSpliced函數(shù)，它們的用法和上述函數(shù)是一致的，唯一區(qū)別是返回值變成了一個全新的數(shù)組而不會改變原有數(shù)組的值！比如：

const values = [1, 10, 21, 2];
const sortedValues = values.toSorted((a, b) => a - b);
console.log(sortedValues); // [1, 2, 10, 21]
console.log(values); // [1, 10, 21, 2]

const items = [1, 2, 3];
const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]

• findLast的使用人數(shù)也變得多了起來，雖然從后向前遍歷數(shù)組也能實現(xiàn)完全相同的功能就是了。

異步特性

• 異步特性中的這三個特性都是我們的老面孔了，不論是去年使用率大增的Top-level await，還是能夠在任意一個Promise對象resolve后就執(zhí)行then函數(shù)的Promise.any()，又或者是所有Promise對象都resolve/reject后才執(zhí)行then函數(shù)的Promise.allSettled()，都是很好用的特性，我相信大家也都再過去一年中開始使用這些特性了。

痛點問題

• 上圖為受訪者們認為JavaScript特性中的痛點問題，可以看到排在前三名的是Static typing、ESM & CJS和Dates。

• Static typing（靜態(tài)類型），這個自不必多說，已經(jīng)是維護大型JavaScript項目繞不開的一個痛點問題了，也誕生了非常多的諸如TypeScript、Flow之類的解決方案，但JavaScript標(biāo)準(zhǔn)方面卻沒有任何進展。

• ESM與CJS兩種不同規(guī)范的沖突也給開發(fā)者帶來了一定的困擾，但目前看來隨著Nodejs逐漸開始支持ESM規(guī)范，這個問題也許會在未來得到解決。

• Dates（日期處理），這也是個很常見的問題了，雖然從moment.js到day.js，開源解決方案越來越多，也越來越好用，但這都不能掩蓋JavaScript語言本身對于日期處理功能存在一定缺陷的問題。

四、瀏覽器API

使用情況

• 上圖是瀏覽器API的使用情況。

• 在所有瀏覽器API中，WebSocekt和PWA的使用率是最高的。

• Geolocation API（地理位置API）的使用率也還不錯，有33%的受訪者在使用它們。

• WebGL、Web Animations、WASM這三項技術(shù)都是在細分領(lǐng)域發(fā)揮重要作用的API，但受限于使用場景，它們的使用率一直維持在20%左右。

痛點問題

• 上圖是受訪者們認為瀏覽器API的痛點問題。

• 最讓受訪者們頭疼的問題仍然是（Browser support）瀏覽器API的支持程度，也就是瀏覽器兼容性問題，而且是斷崖式領(lǐng)先于第二名的痛點問題。

• 其次就是馬上成為“下一代IE瀏覽器”的Safari，Safari在某些瀏覽器API上總是“特立獨行”，以至于開發(fā)者們不得不對Safari做單獨的兼容處理。

五、JavaScript技術(shù)

下圖是根據(jù) JS 技術(shù)的滿意度進行的排名。滿意度指的是“會再次使用這個技術(shù)的人數(shù)”。請注意，使用率不到 10% 的代碼庫不包括在內(nèi)。

前端框架

使用情況

使用率：

滿意度：

• 從使用率來看，最多人使用的前端框架依然是react、vue、angular，react的使用率仍在逐年增加，vue的使用率在2023年首次超過了angular，angular的使用率則越來越低，svelte的使用率也在逐年增加，達到了25%。

• 從滿意度來看，react、vue、angular這些成熟框架的滿意度都在逐年降低，但整體來看react和vue的滿意度都還不錯，大概在60%-70%的樣子，svelte滿意度則是每年升高，滿意度已經(jīng)和react差不多了，有70%。angular滿意度則是已經(jīng)跌到了32%……

痛點問題

• 最讓受訪者頭痛的問題是react相關(guān)的問題，占到了17%。這其實也和react框架的滿意度在逐年降低的調(diào)查結(jié)果是相吻合的。react發(fā)展到現(xiàn)在，使用規(guī)模越來越大，問題也越來越多，受訪者們也越來越被這些問題所困擾。

• 排在第二位的是「Choice overload」，用大白話說就是「框架太多了選不過來了」，有10%的受訪者會在選擇前端框架時產(chǎn)生困擾。

• 排在第三位的是「Excessive complexity」，意思是「復(fù)雜度越來越高了」，這個其實也是一個近兩年逐漸凸顯出的問題，隨著框架的不斷迭代，新的概念越來越多，語法也越來越多，復(fù)雜度/心智負擔(dān)也越來越高，導(dǎo)致9%的受訪者認為現(xiàn)在的前端框架變得太復(fù)雜了。

元框架

使用情況

使用率：

滿意度：

• 從使用率來看，Next.js仍然是元框架中使用人數(shù)最多的，Nuxt隨著vue的普及，使用率也在逐年增高，今年是超過了Gatsby排到了第二的位置。

• 從滿意度來看，Next.js在2023年有一個10%下跌，這其實有兩方面原因，一方面是Next.js的使用人數(shù)逐年上升，滿意度下降是必然的（我們在多年的調(diào)查中都觀察到了這個現(xiàn)象），另一方面是Next.js 13在2023年逐漸普及開來，確實有很多顛覆性的改動，有部分受訪者不太能夠接受。

痛點問題

• 最讓受訪者頭疼的問題時Next.js相關(guān)的問題，細分類一下的話，Next.js的app router和Next.js 13的問題各占了1%，這其實和Next.js在2023年有10%的滿意度下跌是相吻合的，這說明了有部分受訪者不太能夠接受Next.js 13中某些功能的大幅度改動。

• 其次讓受訪者頭疼的問題仍然是「Excessive complexity」，就是過高的復(fù)雜度，元框架將頁面、服務(wù)器等概念都打包到了一起，復(fù)雜度的確相對更高一些。

測試工具

使用情況

使用率：

滿意度：

• 測試工具這里其實沒太多變化，不論是滿意度還是使用率，Jest一直是第一名，絕大部分情況下，無腦選用Jest就可以。

• 值得注意的是2023年出現(xiàn)了兩匹黑馬，分別是Vitest和Playwright，前者是由Vue團隊出品的最新的測試框架，隨著vue生態(tài)的繁榮，Vitest的使用率和滿意度都有非常大的提升。Playwright則是一款性能極佳的端到端測試工具，在2023年也有非常大的提升。

跨端技術(shù)

使用情況

使用率：

滿意度：

• 跨端技術(shù)仍然是Electron和React Native這兩個分別用于PC端和移動端的跨端框架排在前兩位，而且他們的滿意度和使用率都非常接近。

痛點問題

• 跨端框架中最讓受訪者頭疼的問題是「性能」，這也是跨端框架最老大難的問題——性能&跨端框架帶來的動態(tài)化和開發(fā)效率的提升，永遠是需要取舍的兩部分。

• 其次就是iOS的問題，和Safari一樣，蘋果公司的終端總是那么“特立獨行”，以至于開發(fā)者們不得不對齊做一些單獨的處理。

構(gòu)建工具

使用情況

使用率：

滿意度：

• 從使用率來看，webpack仍然是使用率最高的構(gòu)建工具，vite隨著近兩年的普及，在使用率層面幾乎已經(jīng)追上webpack了。

• 從滿意度來看，webpack的滿意度逐年走低，「前端苦webpack久矣」，今年更是跌到了45%。而vite在今年滿意度有了進一步的提升，到了88%，這是一個相當(dāng)恐怖的數(shù)字了。之前在做生態(tài)調(diào)查時，絕大部分技術(shù)都逃不過「隨著使用人數(shù)的增長，滿意度逐漸走低」的魔咒，而vite是唯一一個打破這個魔咒的技術(shù)，足見其有多受開發(fā)者們喜愛。

痛點問題

• 構(gòu)建工具中受訪者最頭疼的痛點問題是「Configuration」，就是寫打包配置，有26%的受訪者都對此感到頭痛。隨著前端項目變得越來越臃腫，引入的依賴項和插件越來越多，打包配置也必然會變得越來越復(fù)雜。到目前為止在構(gòu)建工具領(lǐng)域也沒有一個太好的解法，大部分都是通過配置模板化/插件化來減少一部分復(fù)雜度，不過未來隨著AI能力的提升，也許AI輔助編寫配置文件或許是一個方向。

• 其次的痛點問題是「Performance」，也就是性能問題，這是個老生常談的話題了，隨著esbuild等更高性能的打包工具的普及，這個問題正在逐漸解決。

monorepo工具

使用情況

使用率：

滿意度：

• 2023年最亮眼的monorepo工具就是pnpm了，它甚至把前幾年一直在30%徘徊的monorepo使用率硬生生地抬到了40%！而且滿意度也很高，達到了64%，可以說目前最好用的monorepo管理工具就是pnpm workspace了。

六、其它工具

工具庫

• 上圖為受訪者使用的其他工具庫，可以看到lodash使用率排名第一；排名第二的是date-fns，這是一個用于日期處理的庫；第三是Zod，這是一個優(yōu)先使用TypeScript的模式聲明和驗證庫，在處理和驗證復(fù)雜格式的字符串的時候非常好用。

后端框架

• 上圖為受訪者使用的后端框架，可以看到express斷層式領(lǐng)先，領(lǐng)先第二名Nest足足有44%！可以說在后端開發(fā)框架方面，絕大部分情況都可以無腦使用express。不過在國內(nèi)這個情況稍有不同，國內(nèi)因為前些年egg.js影響比較大，所以用koa的會比上圖調(diào)查數(shù)據(jù)多不少。

JavaScript運行時

• 上圖為受訪者使用的JavaScript運行時情況，可以看到絕大部分受訪者仍然是在瀏覽器環(huán)境和Node.js環(huán)境下運行JavaScript。像Bun和Deno這些新的運行時，使用率并不高，看下來還有很長一段路要走。

AI編程工具

• 上圖為受訪者使用AI輔助工具的情況，可以看到絕大部分受訪者都在使用ChatGPT和Copilot輔助編程，不使用輔助工具的受訪者僅有18%，看下來大模型時代使用AI工具輔助開發(fā)已經(jīng)是一個大趨勢了。

七、JavaScript使用情況

JavaScript和TypeScript的使用情況

• 上圖為受訪者使用JavaScript和TypeScript的情況，可以看到TypeScript的使用率已經(jīng)非常高了，有32%的人完全使用TypeScript進行編程，相比之下完全使用JavaScript的受訪者僅有9%。可以說TypeScript已經(jīng)變成了前端開發(fā)者的首選開發(fā)語言了。

使用場景

• 上圖為受訪者使用JavaScript的場景，有98%的受訪者將其用于前端開發(fā)，有67%的受訪者將其用于后端開發(fā)，還有20%-30%的開發(fā)者將其用于開發(fā)移動端和PC端應(yīng)用，以及16%的受訪者將其用于數(shù)據(jù)可視化。

痛點問題

• 上圖為受訪者使用JavaScript的痛點問題。

• 最讓開發(fā)者感到頭痛的問題是Code Architecture（代碼架構(gòu)），這其實也是編程領(lǐng)域永恒的難題。這個問題沒有銀彈，只有多思考，多學(xué)習(xí)，多梳理代碼架構(gòu)，才能找到最適合的解決方案。

• 排名第二的問題是State Management（狀態(tài)管理），這也是一個老生常談的問題了，也因此產(chǎn)生了很多我們常用的諸如redux、mobx之類的狀態(tài)管理庫——當(dāng)然，這些狀態(tài)管理庫中也都或多或少有一些“不太好用”的地方。

• 排名第三的問題是Build Tools（構(gòu)建工具），這也是一個被吐槽很久的問題了，從前幾年「前端苦webpack久矣」到后面諸如swc、esbuild、vite等性能更好的構(gòu)建工具的涌現(xiàn)，越來越多的開發(fā)者、團隊、框架都在嘗試用更好的辦法解決前端構(gòu)建的問題。

六、今年JavaScript的亮點

使用率進步最大的技術(shù)

滿意度最高的技術(shù)

最感興趣的技術(shù)

自由問題提及次數(shù)最多的技術(shù)

評論次數(shù)最多的技術(shù)

最受喜愛的技術(shù)

七、總結(jié)

總的來說，2023年JavaScript生態(tài)仍在穩(wěn)步發(fā)展。

在前端框架、元框架、構(gòu)建工具等方向，我們看到新的技術(shù)的出現(xiàn)的速度比大多數(shù)人能夠?qū)W習(xí)的要快。這意味著，為了避免陷入「學(xué)不動了」的情況，開發(fā)者們需要從以下這兩個選項中選擇自己的道路：一是，你可以做第一個吃螃蟹的人，不停學(xué)習(xí)新技術(shù)，走在新技術(shù)最前沿；二是，放慢腳步，專注于穩(wěn)定、成熟的技術(shù)，并在它們冷卻后學(xué)習(xí)新的熱點技術(shù)。

在JavaScript技術(shù)領(lǐng)域，我們看到開發(fā)者們不再鐘情于一些廣泛使用的庫，比如像Svelte、Solid和htmx這樣使用率不那么高的庫在滿意度方面也取得了相當(dāng)好的成績，這也證明了JavaScript生態(tài)的活力。另外一方面，我們看到“Rust化”在前端基建方向也成了一種新的潮流，像編譯器、構(gòu)建工具、元框架等領(lǐng)域都出現(xiàn)了不少基于Rust的技術(shù)。

而回歸JavaScript和瀏覽器本身，也有許多不錯的進展，比如toSort等非常實用的API的出現(xiàn)，PWA的更廣泛使用等等。

同時，我們也發(fā)現(xiàn)JavaScript正在向服務(wù)器端轉(zhuǎn)移，像Next、Nuxt、Remix 這樣的元框架的使用率迅速增長，也有很多新應(yīng)用使用了這種「服務(wù)器優(yōu)先」的開發(fā)模式，也正是因為如此，很多前端框架諸如react、vue等，也都在這個領(lǐng)域繼續(xù)構(gòu)建自己的生態(tài)。

當(dāng)然最讓人驚喜的還是Vite和Vitest了，Vite再次成為滿意度最高的技術(shù)，Vitest成為受訪者最感興趣的技術(shù)，這都代表著受訪者對于這些杰出庫的認可，也代表著Vue團隊在前端生態(tài)圈中越來越大的影響力。

最后，在state-of-js 2024調(diào)查中，我們會繼續(xù)改善調(diào)查結(jié)果的多樣性，讓更多的人參與開發(fā)來提升調(diào)查結(jié)果的發(fā)布效率。