今年的 《State of Frontend 2024》新鮮出爐了，本次調(diào)查是迄今為止最全面的一次調(diào)查，共收到來(lái)自 139 個(gè)國(guó)家的開(kāi)發(fā)人員、工程師和技術(shù)愛(ài)好者的 6,288 份回復(fù)。
相比 2022 年的調(diào)查結(jié)果，一些領(lǐng)域的調(diào)查結(jié)果有了非常明顯的區(qū)別，這也體現(xiàn)了前端開(kāi)發(fā)的飛速發(fā)展，特別是今年的調(diào)查融入了 AI 領(lǐng)域，前端的開(kāi)放方式正在發(fā)生著顯著變化，下面我們一起來(lái)分析一些重點(diǎn)部分的調(diào)查結(jié)果。
框架 在最新的調(diào)查中，有69.9%的受訪者表示他們正在使用 React，這讓 React 毫無(wú)懸念地占據(jù)了排行榜的首位。React 日益壯大，我們看到社區(qū)不斷采用新的方法來(lái)構(gòu)建各類解決方案，無(wú)論是漸進(jìn)式 web 應(yīng)用、服務(wù)器端渲染應(yīng)用、單頁(yè)面應(yīng)用，還是靜態(tài)網(wǎng)站。它在市場(chǎng)上的主導(dǎo)地位也使得像 Next.js 這樣的框架迅速流行起來(lái)。Next.js 框架通過(guò)其豐富的服務(wù)器端渲染、路由體系以及早期對(duì) React 19 特性的采用，證明了其在各種解決方案中的優(yōu)異性能和可擴(kuò)展性。
使用 MVP 設(shè)計(jì)模式的 Vue.js 也證明了自己是 React 的有力競(jìng)爭(zhēng)者，有44.8%的受訪者選擇了它作為框架。與 Vue.js 搭配得很好的 Nuxt 也得到了52.9%受訪者的青睞，作為他們的渲染框架選擇。
盡管這些是人們首選的流行框架，但我們也看到社區(qū)在學(xué)習(xí)下一步技術(shù)上的轉(zhuǎn)變。Svelte 正在吸引越來(lái)越多開(kāi)發(fā)者的關(guān)注，有43.6%的開(kāi)發(fā)者希望學(xué)習(xí) Svelte，緊隨其后的是 HTMX 和 Qwik。
當(dāng)然，開(kāi)發(fā)者的選擇并不僅限于這些流行框架。Astro 就是許多開(kāi)發(fā)者的強(qiáng)勁選擇，它提供了各種功能，例如靜態(tài)網(wǎng)站生成、服務(wù)器島嶼等，并能夠在應(yīng)用程序中按需集成交互功能。由于其靈活性，Astro 適用于許多應(yīng)用程序，不同框架之間的集成更是個(gè)極好的加分項(xiàng)。
Remix 也開(kāi)始獲得更多關(guān)注。它利用服務(wù)器端渲染（SSR）的能力，使得開(kāi)發(fā)者能夠?qū)Ｗ⒂诓捎?web 標(biāo)準(zhǔn)的最佳實(shí)踐。我們看到社區(qū)越來(lái)越多地重視它，因?yàn)樗軌驅(qū)㈤_(kāi)發(fā)者體驗(yàn)（DX）與靜態(tài)站點(diǎn)生成（SSG）相結(jié)合，非常適合那些在構(gòu)建高可用用戶界面時(shí)尋找可擴(kuò)展性和性能的解決方案。
前端框架？
渲染框架
庫(kù) 日期庫(kù) 作為一個(gè)經(jīng)常處理日期管理的開(kāi)發(fā)者，我發(fā)現(xiàn)這些統(tǒng)計(jì)數(shù)據(jù)非常有意義。date-fns 顯然表現(xiàn)強(qiáng)勁，其廣泛的采用率（53.9%）以及非常低的不滿意率（4.3%）使其成為許多項(xiàng)目中可靠的選擇。其模塊化方法和強(qiáng)大功能難以超越。
另一方面，雖然 Moment.js 仍然受到45.1%用戶的歡迎，但顯著的不滿意率（24.8%）顯示了偏好的變化。我遇到過(guò) Moment.js 的尺寸和性能不太理想的情況，這使得轉(zhuǎn)向替代方案更加吸引人。
Day.js 作為一個(gè)現(xiàn)代、輕量級(jí)的替代品吸引了我的注意。37.7%的用戶欣賞其優(yōu)點(diǎn)，很明顯，許多開(kāi)發(fā)者在尋找一種更簡(jiǎn)單、更高效的解決方案。從我的角度看，Day.js 提供了易用性和性能的有力組合，與當(dāng)前的最佳實(shí)踐非常契合。
總體來(lái)看，看到這個(gè)行業(yè)朝著更簡(jiǎn)化和高效的日期管理解決方案演進(jìn)，確實(shí)令人興奮。date-fns 和 Day.js 絕對(duì)值得任何人考慮更新他們的工具包。
狀態(tài)管理庫(kù) 狀態(tài)管理庫(kù)的使用之旅不僅依賴于它們的功能，還在于它們與不斷發(fā)展的框架生態(tài)系統(tǒng)的集成程度以及它們解決特定問(wèn)題的效果。
向服務(wù)器端開(kāi)發(fā)方向的轉(zhuǎn)變，使得像 Context API 和 Zustand 這樣的工具在客戶端場(chǎng)景中因其高效性和易用性而更具吸引力。盡管在B2B應(yīng)用中仍然具有相關(guān)性，但在這種新環(huán)境中，Redux 有時(shí)會(huì)顯得有些過(guò)于復(fù)雜。這些狀態(tài)管理工具的演變反映了開(kāi)發(fā)環(huán)境和開(kāi)發(fā)者偏好的更廣泛變化。
毫不奇怪，Redux 和 Redux Toolkit 仍然占主導(dǎo)地位，使用率分別為33.4%和34.7%。Redux 的強(qiáng)大生態(tài)系統(tǒng)和成熟功能使其成為許多項(xiàng)目中的關(guān)鍵工具，而 Redux Toolkit 帶來(lái)的增強(qiáng)功能則進(jìn)一步提高了其吸引力。然而，約三分之一的開(kāi)發(fā)者仍然不青睞 Redux，這表明其復(fù)雜性和開(kāi)銷在某些新框架的背景下可能是一個(gè)缺點(diǎn)。
其他庫(kù) 作為多年來(lái)深受 Lodash 依賴的開(kāi)發(fā)者，我對(duì)其強(qiáng)烈的積極評(píng)價(jià)并不感到意外，57%的用戶表示滿意。Lodash 提供的一套實(shí)用工具函數(shù)在簡(jiǎn)化復(fù)雜任務(wù)和提高代碼效率方面無(wú)價(jià)之寶。
然而，有趣的是，只有3.7%的用戶有興趣在未來(lái)學(xué)習(xí)它。這可能表明 Lodash 已經(jīng)很好地集成到許多項(xiàng)目中，或者開(kāi)發(fā)者更多地在關(guān)注現(xiàn)代 JavaScript 特性和提供類似功能的替代庫(kù)。
jQuery 是我職業(yè)生涯初期實(shí)驗(yàn)過(guò)的另一個(gè)工具。那些喜歡它（27.6%）和不喜歡它（26.3%）的人幾乎持平，這反映了它的混合口碑。
jQuery 在其鼎盛時(shí)期革命性地存在，但其曾經(jīng)突破性的功能如今大多被原生 JavaScript 和更現(xiàn)代的框架所復(fù)制。
對(duì)學(xué)習(xí) jQuery 的低興趣（1.5%）表明它變得越來(lái)越不相關(guān)，因?yàn)樾碌母咝У墓ぞ吆涂蚣苷紦?jù)了中心舞臺(tái)。
請(qǐng)求庫(kù) 當(dāng)前前端開(kāi)發(fā)中的數(shù)據(jù)獲取領(lǐng)域相對(duì)穩(wěn)定。開(kāi)發(fā)者通常使用 TanStack Query 配合 Axios（73.6%）或原生的 fetch API（72.4%），這些都提供了管理數(shù)據(jù)的便捷有效的方法。一大關(guān)鍵因素是開(kāi)發(fā)者對(duì) TanStack 的滿意度達(dá)到了43.4%，這使得創(chuàng)建新的數(shù)據(jù)管理庫(kù)的吸引力減少。
盡管有趣，SWR（19.9%）并沒(méi)有像 TanStack Query 那樣受歡迎，盡管它是由 Vercel 開(kāi)發(fā)的。這表明，即使有大公司的支持，在技術(shù)世界中也未必能保證廣泛的采用。同時(shí)，ApolloClient 的持續(xù)高使用率（25.2%）反映了 GraphQL 在開(kāi)發(fā)中的持久受歡迎程度。
看到 tRPC 的采用率上升（29.8%的人希望在未來(lái)學(xué)習(xí)它）也令人興奮。這種類型安全的 API 解決方案特別適合使用 Next.js 構(gòu)建全棧應(yīng)用程序。通過(guò)強(qiáng)制類型安全，tRPC 顯著減少了常見(jiàn)錯(cuò)誤的風(fēng)險(xiǎn)，例如忘記在所有相關(guān)地方更新重命名的字段。對(duì) tRPC 的興趣增長(zhǎng)很可能與 Next.js 用于全棧開(kāi)發(fā)的增加有關(guān)。
至于新庫(kù)，這個(gè)領(lǐng)域似乎對(duì)其需求不大。ky（4.1%）的例子表明，開(kāi)發(fā)者更傾向于依賴知名的、經(jīng)過(guò)實(shí)際使用檢驗(yàn)的解決方案。隨著前端架構(gòu)的日益復(fù)雜——涵蓋客戶端渲染（CSR）、服務(wù)器端渲染（SSR）、增量靜態(tài)再生（ISR）和島嶼架構(gòu)——任何新庫(kù)都需要從一開(kāi)始就支持廣泛的用例。目前，我認(rèn)為在數(shù)據(jù)獲取庫(kù)方面沒(méi)有太多新的空間。
微前端 從 2022 年有 75.4% 的受訪者報(bào)告使用微前端，到 2024 年驟降至 23.6%，這表明行業(yè)對(duì)前端架構(gòu)的方式發(fā)生了顯著轉(zhuǎn)變。許多人意識(shí)到，微前端不只是技術(shù)知識(shí) —— 它們還需要組織和文化的變革，而這并非所有公司都準(zhǔn)備好接受的。
另一個(gè)關(guān)鍵因素是對(duì)服務(wù)器端渲染（SSR）和靜態(tài)站點(diǎn)生成（SSG）架構(gòu)的投資不斷增加，這些架構(gòu)融入了類似的概念。例如 Astro 的服務(wù)器島，Next.js 中的 React Server Components，以及 HTMX 都是很好的例子。如果使用得當(dāng)，這些技術(shù)可以成為構(gòu)建微前端的強(qiáng)大工具，因?yàn)樗鼈児蚕碓S多相同的原則。甚至連 Vercel 的 CTO Malte Ubl 在一次采訪中也提到，React Server Components 將在 Vercel 的微前端策略中發(fā)揮關(guān)鍵作用。
Module Federation（51.8%）正逐漸成為客戶端應(yīng)用程序的標(biāo)準(zhǔn)，不僅用于微前端，還用于需要頻繁更新特定系統(tǒng)部件的一體化架構(gòu)。隨著 Module Federation 新版本脫離 Webpack，我預(yù)計(jì)其采用率將進(jìn)一步增長(zhǎng)。
Single SPA（35.5%）是另一個(gè)可靠的選擇，常因其有力的指導(dǎo)而備受青睞。
一個(gè)值得關(guān)注的框架是 Piral。雖然今年沒(méi)收到很多票數(shù)，但它正在添加有用的工具，如發(fā)現(xiàn)服務(wù)，這簡(jiǎn)化了決策過(guò)程并使微前端的實(shí)施更容易。
展望 2025 年，Vercel 即將推出其微前端解決方案作為一級(jí)原語(yǔ)，許多大公司已經(jīng)在實(shí)施微前端。主要挑戰(zhàn)仍然是將技術(shù)、組織結(jié)構(gòu)和文化對(duì)齊以實(shí)現(xiàn)成功。
我們還會(huì)看到更多公司提供與 AI 集成的微前端解決方案。我與一些初創(chuàng)公司交流過(guò)，他們正在開(kāi)發(fā)將前端開(kāi)發(fā)與生成式 AI 融合的新工具。對(duì)于微前端來(lái)說(shuō)，這將是一個(gè)令人激動(dòng)的一年！
使用微前端的占比
微前端框架
包管理 這種主導(dǎo)地位并不令人意外，因?yàn)?nbsp;NPM 長(zhǎng)期以來(lái)一直是 Node.js 的默認(rèn)包管理器，擁有龐大而全面的生態(tài)系統(tǒng)。NPM 與 Node.js 工作流程的無(wú)縫集成及其廣泛的包注冊(cè)表使其成為許多開(kāi)發(fā)者的首選，尤其是那些新手開(kāi)發(fā)者，他們往往首先接觸到 NPM。
然而，值得注意的是，替代包管理器正在穩(wěn)步崛起：
Yarn 的穩(wěn)定存在（21.5%）：Yarn 由于其性能優(yōu)勢(shì)和諸如工作區(qū)等高級(jí)功能，仍然保持著顯著的用戶基礎(chǔ)，這對(duì)于大規(guī)模項(xiàng)目和單一代碼庫(kù)尤其有用。Yarn 的改進(jìn)，如增強(qiáng)的速度和可靠性，依舊吸引那些在工作流中優(yōu)先考慮性能的開(kāi)發(fā)者。
PNPM 的受歡迎度上升（19.9%）：PNPM 正迅速受到歡迎，反映了對(duì)其獨(dú)特包管理方法的日益關(guān)注。其主要吸引力在于高效處理依賴項(xiàng)，尤其是通過(guò)不重復(fù)系統(tǒng)來(lái)節(jié)省磁盤空間——這是具有復(fù)雜依賴樹(shù)項(xiàng)目的一個(gè)優(yōu)勢(shì)。PNPM 的性能改進(jìn)使其成為一個(gè)有吸引力的替代品，特別是當(dāng)開(kāi)發(fā)者尋求更快的 CI/CD 管道和更好的開(kāi)發(fā)者體驗(yàn)時(shí)。
Bun 的新興興趣：盡管在調(diào)查中沒(méi)有正式列出，Bun 在開(kāi)放響應(yīng)中被提及了48次，表明了對(duì)這種新型包管理器的新興趣。Bun 內(nèi)置的包管理器提供了顯著的性能提升，使其成為那些希望優(yōu)化工作流程的開(kāi)發(fā)者的一個(gè)吸引選擇。
我個(gè)人開(kāi)始更頻繁地使用 PNPM，并且它已經(jīng)成為我的主要包管理器。其速度、性能與穩(wěn)定性都是突出的特點(diǎn)，我在對(duì)等依賴項(xiàng)處理和安裝輸出噪音上遇到的問(wèn)題明顯減少。
Bun 的驚人速度也引起了我的注意。我一直在實(shí)驗(yàn)環(huán)境中使用 Bun 尤其是一些需要快速安裝和部署的小型項(xiàng)目。
JavaScript 運(yùn)行時(shí) Node.js 長(zhǎng)期以來(lái)作為一個(gè)可靠、多功能且集成良好的運(yùn)行時(shí)，其主導(dǎo)地位并不令人意外。在前端開(kāi)發(fā)中，它已經(jīng)成為一個(gè)基石，這主要?dú)w功于其龐大的 npm 包庫(kù)，類似 Express 和 Next.js 的框架，以及與開(kāi)發(fā)者依賴的工具和工作流程的無(wú)縫集成。
Node.js 取得成功的幾個(gè)關(guān)鍵因素：
穩(wěn)定性和信任 ：開(kāi)發(fā)者重視穩(wěn)定性和經(jīng)過(guò)驗(yàn)證的記錄，這正是 Node.js 提供的。作為一種成熟的技術(shù)，它在各個(gè)行業(yè)和規(guī)模的項(xiàng)目中得到了廣泛測(cè)試。生態(tài)系統(tǒng) ：Node.js 的優(yōu)勢(shì)在于其豐富的生態(tài)系統(tǒng)，尤其是 npm 包管理器，它為開(kāi)發(fā)者提供了廣泛的工具，用于高效地構(gòu)建復(fù)雜的應(yīng)用程序。社區(qū)支持 ：一個(gè)龐大且活躍的社區(qū)持續(xù)為 Node.js 的改進(jìn)做出貢獻(xiàn)，這使得它成為那些希望避免使用較新但不太成熟的運(yùn)行時(shí)的開(kāi)發(fā)者的可靠選擇。然而，其他 JavaScript 運(yùn)行時(shí)，例如 Bun（10%）和 Deno（2.6%），正在開(kāi)始開(kāi)辟自己的市場(chǎng)。
Bun ：Bun 作為主要替代品的地位非常顯著。它專注于其驚人的速度和近乎完整的 Node.js 兼容性，盡管目前還未達(dá)到100%。Bun 還引入了內(nèi)置包管理器、原生 TypeScript 和 JSX 支持，以及一些獨(dú)特的 API，盡管這些特性引發(fā)了一些爭(zhēng)議。
Deno ：由 Node.js 的原始開(kāi)發(fā)者 Ryan Dahl 創(chuàng)建的 Deno 遵循了與 Bun 相似的道路。雖然其初始的通過(guò) URL 導(dǎo)入依賴項(xiàng)的方法可能延緩了采納，但 Deno 發(fā)布其包注冊(cè)表 JSR（作為 npm 的替代品）標(biāo)志著其策略的轉(zhuǎn)變。隨著 Deno 2 即將推出，觀察其如何發(fā)展以及社區(qū)的反應(yīng)將會(huì)非常有趣。
TypeScript 如今有 90.6% 的開(kāi)發(fā)者使用 TypeScript，相比 2022 年的 84.1% 有所增加。超過(guò)一半的開(kāi)發(fā)者（53.1%）相信 TypeScript 已經(jīng)成為新的 Web 標(biāo)準(zhǔn)，這一比例在 2022 年時(shí)為 43%。
這一現(xiàn)象背后有許多關(guān)鍵發(fā)展的推動(dòng)。從 TC39 委員會(huì)來(lái)看，已經(jīng)有一個(gè)關(guān)于“作為注釋的類型”的 Stage 1 提案。此外，Node.js 也引入了一個(gè)實(shí)驗(yàn)性的剝離類型標(biāo)志。這兩個(gè)案例的目標(biāo)都是允許運(yùn)行不需要編譯或轉(zhuǎn)譯步驟的 TypeScript 子集。
開(kāi)發(fā)者越來(lái)越多地依賴 TypeScript，不是作為編譯器或構(gòu)建過(guò)程的一部分，而是作為 IDE、代碼檢查器（比如通過(guò) typescript-eslint 項(xiàng)目）和開(kāi)發(fā)者體驗(yàn)功能的類型檢查器。例如，在 Nuxt、Nitro、TanStack Start、next-typesafe-url 中實(shí)現(xiàn)的類型安全路由，在 Astro 中實(shí)現(xiàn)的類型檢查 Markdown 前言等等。
隨著這種集中于開(kāi)發(fā)階段運(yùn)行的 TypeScript 的普及，類型檢查的速度成為一個(gè)重要的限制因素。構(gòu)建工具越來(lái)越傾向于使用本地代碼以加快開(kāi)發(fā)時(shí)的反饋周期，但這也意味著類型檢查將成為速度的限制因素。像 stc 這樣的 Rust 類型檢查器項(xiàng)目已被放棄，但類似 oxc 這樣的項(xiàng)目可能為開(kāi)發(fā)階段提供更快的類型檢查路徑。
過(guò)去一年使用過(guò) TypeScript 嗎？
過(guò)去一年使用過(guò)哪些類型方法？
你認(rèn)為 TypeScript 的現(xiàn)狀如何？
PWA 目前，有 20% 的受訪者將 PWA（漸進(jìn)式 Web 應(yīng)用）用于他們的移動(dòng)應(yīng)用，這僅次于 React Native 和原生開(kāi)發(fā)，位列第三。其他技術(shù)如 Flutter 和 Cordova 可能最終會(huì)在受歡迎程度上趕上。
在蘋果公司最初在歐盟地區(qū)移除 iOS 上的 PWA 功能后，這一決定引起了網(wǎng)絡(luò)開(kāi)發(fā)社區(qū)的強(qiáng)烈反對(duì)，突顯了 PWA 對(duì)用戶和企業(yè)的重要性。最終，蘋果公司撤回了這一決定，并且進(jìn)展緩慢但穩(wěn)步推進(jìn)——例如最近引入的 iOS 推送通知功能。這與 PWA 的發(fā)展相吻合，因?yàn)?PWA 在各大瀏覽器上得到了廣泛支持，并且越來(lái)越多地與桌面和移動(dòng)平臺(tái)集成。
盡管如此，只有 35% 的受訪者認(rèn)為這種上升趨勢(shì)會(huì)繼續(xù)，而另有 30% 則認(rèn)為 PWA 的發(fā)展不會(huì)有太大變化，這可能是由于缺乏認(rèn)知或使用導(dǎo)致的。
總結(jié)來(lái)看，PWA 在移動(dòng)應(yīng)用開(kāi)發(fā)中的使用率正在增加，并得到了更多平臺(tái)的支持。然而，未來(lái)的發(fā)展仍然依賴于更多的推廣和用戶教育，以便讓更多開(kāi)發(fā)者了解和使用這項(xiàng)技術(shù)。
Progressive Web Apps (PWA) 的未來(lái)展望
設(shè)計(jì)系統(tǒng) UI 框架 shadcn/ui（28.1%）位居榜首，它結(jié)合了 Tailwind、Radix 和 React，但與其他系統(tǒng)不同的是其獨(dú)特的部署模式。相比之下，MUI（21.6%）和 Bootstrap（11.6%）則分別位列第二和第三。shadcn 通過(guò)將實(shí)現(xiàn)文件直接拷貝到你的項(xiàng)目中，允許你根據(jù)需要自定義 TailwindCSS 類。
Material UI（MUI）作為第二大流行的設(shè)計(jì)框架（在與 Angular 一起使用時(shí)位居第四），并不令人意外。MUI 是一個(gè)“企業(yè)框架”，提供可訪問(wèn)、可主題化和高度可樣式化的組件，且性能優(yōu)越。即將通過(guò) Pigment-CSS 庫(kù)在構(gòu)建時(shí)處理 CSS 的轉(zhuǎn)變，解決了與 NextJS 相關(guān)的長(zhǎng)期問(wèn)題，鞏固了 MUI 在 S 級(jí)組件框架中的地位。
盡管 Bootstrap 起源于 Web 2.0 時(shí)代，但它在不斷演變，同時(shí)保留了其龐大的主題和組件生態(tài)系統(tǒng)。最新版本可以無(wú)縫集成到 React 中，只需一個(gè)庫(kù)和一個(gè) CSS 文件就能完成設(shè)置。它的設(shè)置甚至比 Tailwind 更簡(jiǎn)單，支持許多類似 Tailwind 的實(shí)用類，用于邊距、填充等。不要因?yàn)?Bootstrap 存在已久就低估它。
Ant Design（7.3%）位居第五。它是一個(gè)逐步崛起的流行組件系統(tǒng)，提供了一個(gè)適合企業(yè)空間的輕量級(jí)替代品（主要還是國(guó)內(nèi)在用）。
設(shè)計(jì)工具 在設(shè)計(jì)工具方面，Figma（86.9%）已經(jīng)成為創(chuàng)建設(shè)計(jì)的事實(shí)標(biāo)準(zhǔn)。隨著開(kāi)發(fā)者模式和流行的 AI 插件的加入，簡(jiǎn)化了從設(shè)計(jì)到代碼的轉(zhuǎn)換過(guò)程，F(xiàn)igma 不斷創(chuàng)新。雖然與 Adobe 的合并企圖失敗了，但 Figma 推出企業(yè)級(jí)支持以在構(gòu)建管道中管理設(shè)計(jì)代幣（design tokens），這一特性對(duì)于財(cái)富1000強(qiáng)企業(yè)中的設(shè)計(jì)和基礎(chǔ)設(shè)施團(tuán)隊(duì)來(lái)說(shuō)非常有價(jià)值。
總結(jié)來(lái)看，各種設(shè)計(jì)框架和工具各有千秋，而 shadcn/ui、Material UI 和 Bootstrap 等系統(tǒng)則憑借各自的優(yōu)勢(shì)在市場(chǎng)上占據(jù)了一席之地。同時(shí)，Figma 作為設(shè)計(jì)工具也在不斷提升其功能，滿足更多企業(yè)的需求。
CSS 編寫 純 CSS 依然非常流行，有 74.8% 的受訪者使用并喜歡它。CSS 不斷吞噬以前只能通過(guò) JavaScript 完成的任務(wù)，我們可以預(yù)期更多的代碼將從重型 JS 框架轉(zhuǎn)移到少量的聲明式 CSS 上。
Sass/SCSS 也是一個(gè)強(qiáng)有力的競(jìng)爭(zhēng)者，使用率達(dá)到了 71.8%。這表明盡管純 CSS 被廣泛使用，但許多開(kāi)發(fā)者更喜歡 Sass/SCSS 提供的增強(qiáng)特性和預(yù)處理能力。
Tailwind CSS 具有 66.7% 的使用和認(rèn)可率。其實(shí)用優(yōu)先的設(shè)計(jì)理念特別受到開(kāi)發(fā)者的青睞，尤其是在 React 和 Next.js 生態(tài)系統(tǒng)中。這種方法與現(xiàn)代的組件驅(qū)動(dòng)開(kāi)發(fā)和設(shè)計(jì)系統(tǒng)相匹配，在這種系統(tǒng)中，樣式被定義在組件內(nèi)而不是單獨(dú)的樣式表中。
CSS Modules 和 Styled Components 也有相當(dāng)不錯(cuò)的采用率，分別有 56.7% 和 42.9% 的開(kāi)發(fā)者使用它們。這些工具因其能夠封裝樣式并與基于組件的架構(gòu)如 React 很好地集成而受到青睞。
測(cè)試 大多數(shù)測(cè)試工作由開(kāi)發(fā)者或通過(guò)開(kāi)發(fā)者與 QA 團(tuán)隊(duì)的合作來(lái)完成（87.4%）。開(kāi)發(fā)者可以利用自動(dòng)化測(cè)試來(lái)加速開(kāi)發(fā)，提供快速、可靠的反饋循環(huán)，并消除耗時(shí)的人工檢查。如果測(cè)試僅由 QA 負(fù)責(zé)，這些收益將會(huì)消失。
超過(guò) 77% 的受訪者報(bào)告進(jìn)行了軟件測(cè)試，這是一個(gè)積極的跡象，但大多數(shù)人關(guān)注的是單元測(cè)試，而單元測(cè)試本身是不足夠的。這并不奇怪，因?yàn)閱卧獪y(cè)試通常較快且易于編寫。然而，端到端測(cè)試和集成測(cè)試同樣重要，它們可以確保應(yīng)用程序如預(yù)期般運(yùn)行。
盡管 Jest（68.2%）和 Cypress（42.6%）仍然是最受歡迎的測(cè)試工具，但 Vitest 和 Playwright 也在逐漸受到歡迎，盡管它們相對(duì)較新。
根據(jù)我的經(jīng)驗(yàn)，趨勢(shì)正逐漸轉(zhuǎn)向使用 Vitest（39.8%）進(jìn)行單元測(cè)試，特別是因?yàn)?nbsp;Vite 在各種 JavaScript 框架中越來(lái)越流行。
Playwright（36.9%）憑借其優(yōu)越的性能、現(xiàn)代的測(cè)試庫(kù)靈感的定位器和簡(jiǎn)化的設(shè)置，在市場(chǎng)份額上正在超越 Cypress。
你編寫過(guò)什么類型的測(cè)試？
你使用過(guò)哪些測(cè)試工具？
代碼管理 本地代碼編輯器 前端開(kāi)發(fā)者的首選桌面代碼編輯器是 Visual Studio Code（75.1%），其成功得益于免費(fèi)和龐大的擴(kuò)展生態(tài)系統(tǒng)。VS Code 因其廣泛流行和免費(fèi)可得，相較于 JetBrains IDEs 有顯著優(yōu)勢(shì)，使其在前端開(kāi)發(fā)中始終領(lǐng)先。
JetBrains 系列 IDE（17.8%）緊隨其后，WebStorm 是專為前端開(kāi)發(fā)者打造的解決方案，而其他如 PhpStorm 或 PyCharm 則適用于不同技術(shù)棧。JetBrains 工具提供更好的開(kāi)箱即用體驗(yàn)，受到不愿花時(shí)間調(diào)整編輯器的開(kāi)發(fā)者青睞。
值得注意的是，今年的結(jié)果與 2022 年非常相似，VS Code、JetBrains 工具和 Vim 的使用率變化不超過(guò) 1%。
盡管 VS Code 和 WebStorm 提供了 AI 驅(qū)動(dòng)的建議插件，但新的 AI 編輯器 Cursor 由于其專為生成式 AI 設(shè)計(jì)的 UI 控制，正在逐漸受到歡迎。
瀏覽器代碼編輯器 瀏覽器代碼編輯器市場(chǎng)也在興起，但調(diào)查顯示開(kāi)發(fā)者對(duì)其接受度較低。CodePen（33.1%）是首選，但更多用于快速實(shí)驗(yàn)和共享代碼，而不是全規(guī)模開(kāi)發(fā)。
CodeSandbox（28.1%）和 StackBlitz（19.9%）則都是基于 Visual Studio Code 引擎 Monaco 構(gòu)建，顯示出開(kāi)發(fā)者即便在瀏覽器中也渴望熟悉的桌面體驗(yàn)。
開(kāi)發(fā)者更習(xí)慣于本地文件操作，云層增加了調(diào)試的復(fù)雜性，因此對(duì)瀏覽器編輯器仍有抵觸。這一局面可能會(huì)隨功能的進(jìn)步和觀念的轉(zhuǎn)變而改變。
代碼托管平臺(tái) 明顯的贏家：GitHub 占據(jù) 77.9% 的票數(shù)，憑借其免費(fèi)層和龐大的開(kāi)源庫(kù)，已成為開(kāi)發(fā)者的首選平臺(tái)。
GitLab 以 15% 位居第二，但增長(zhǎng)停滯不前，自 2022 年前端現(xiàn)狀調(diào)查以來(lái)變化不大。BitBucket 僅占 5.3%，更偏向依賴 Jira 和 Confluence 的公司。
低代碼&零代碼 低代碼平臺(tái) 在低代碼工具中，Airtable（5.7%）和 Retool（3.4%）位居前列，主要用于內(nèi)部解決方案。讓我驚訝的是 Flutterflow 的結(jié)果（0.12%），這個(gè)位年輕的平臺(tái)可能在不久的將來(lái)頗具潛力。它基于一個(gè)流行框架，為創(chuàng)建移動(dòng)應(yīng)用提供了快速發(fā)展的可視化開(kāi)發(fā)環(huán)境。我預(yù)計(jì)其統(tǒng)計(jì)數(shù)據(jù)將大幅增加，特別是考慮到像 Axis 這樣的大型銀行正在使用這項(xiàng)技術(shù)服務(wù)于 5000 萬(wàn)用戶。
零代碼平臺(tái) 在零代碼工具類別中，以 Notion（29.2%）和 Typeform（7%）為主，表明這一類別有廣泛的工具選擇。無(wú)代碼工具主要用于信息管理和在線表單，而非應(yīng)用程序構(gòu)建或自動(dòng)化平臺(tái)。
打包工具 編譯框架 Vite 在開(kāi)發(fā)者中享有很高的滿意度，82.4% 的開(kāi)發(fā)者表示認(rèn)可。它的吸引力在于速度快、啟動(dòng)時(shí)間短且配置簡(jiǎn)單，使其成為 Webpack 的首選替代品。Vite 使用 esbuild 進(jìn)行快速轉(zhuǎn)譯和熱重載，提升了整體效率。
盡管 Webpack 使用率相似，但用戶反饋表現(xiàn)明顯不同。只有 44% 的 Webpack 用戶表示滿意，38.5% 的用戶因其復(fù)雜性和難以配置而感到困擾。
另一個(gè)分享零配置目標(biāo)的工具 Parcel，則未達(dá)到 Vite 的受歡迎程度或滿意度。這可能是因?yàn)?nbsp;Vite 在速度和易用性方面更有效地實(shí)現(xiàn)了這些原則，更受開(kāi)發(fā)者的青睞。
Create React App (CRA) 的反饋則較為兩極分化，滿意率為 31.3%，不滿意率為 31.5%。最初由 Facebook 開(kāi)發(fā)以便捷啟動(dòng) React 應(yīng)用，CRA 不再推薦用于生產(chǎn)級(jí)別的 React 項(xiàng)目。React 官方文檔現(xiàn)在建議使用 Next.js、Remix 或 Gatsby，這些框架提供服務(wù)端渲染、靜態(tài)站點(diǎn)生成和增強(qiáng)性能，這些功能是現(xiàn)代應(yīng)用越來(lái)越需要的。
Lint工具 ESLint（89.3%）和 Prettier（87.5%）繼續(xù)主導(dǎo)代碼分析和格式化工具領(lǐng)域，反映出它們作為業(yè)界標(biāo)準(zhǔn)的可靠性和廣泛應(yīng)用。它們的普及表明它們能夠有效地滿足開(kāi)發(fā)者的需求。
雖然使用率不及前兩者，但 Stylelint 具有增長(zhǎng)潛力，10.9% 的開(kāi)發(fā)者表示有興趣學(xué)習(xí)使用它。
AI 近年來(lái)，開(kāi)發(fā)者對(duì)AI的快速崛起反應(yīng)不一，很多人擔(dān)心它可能會(huì)“奪走我們的工作”。然而，令人振奮的是，越來(lái)越多的開(kāi)發(fā)者現(xiàn)在開(kāi)始接受AI，并將其用于提升工作效率，75.8% 的開(kāi)發(fā)者已經(jīng)將AI納入他們的工作流程中。
ChatGPT 在這股潮流中處于領(lǐng)先地位，90% 的開(kāi)發(fā)者使用它。除了輔助編碼，許多人（包括我自己）發(fā)現(xiàn)它在問(wèn)題解決、教學(xué)和學(xué)習(xí)資源方面非常有價(jià)值。
GitHub Copilot 的采用率為 57.4%，它提供實(shí)時(shí)代碼建議，極大地改變了開(kāi)發(fā)過(guò)程。當(dāng)其建議與用戶意圖一致時(shí)，可以減少打字時(shí)間，使開(kāi)發(fā)者能夠更多地關(guān)注項(xiàng)目的整體思路，有時(shí)甚至可以代勞一部分工作！
近一半的受訪者已經(jīng)將 AI 集成到他們的應(yīng)用中，未來(lái)的軟件發(fā)布中，AI 可能會(huì)變得更加普遍。對(duì)于我們?nèi)绾螒?yīng)對(duì)AI的影響，有一點(diǎn)是明確的：盡管對(duì)AI的影響有些許顧慮，但將其整合到我們的工具集中無(wú)疑是前進(jìn)的方向。
過(guò)去一年使用過(guò) AI 嗎？
AI 工具
在哪些環(huán)節(jié)使用 AI？
AI 在前端開(kāi)發(fā)的未來(lái)是什么？
未來(lái) 哪些開(kāi)放領(lǐng)域會(huì)持續(xù)發(fā)展？哪些會(huì)走向消亡？
最后 參考：https://tsh.io/state-of-frontend/
400 186 1886
