最近，TSH 發(fā)布了一年一度的前端狀態(tài)調(diào)查結(jié)果，本文將探討 2024 年前端的現(xiàn)狀。

前端框架

過去一年使用過的前端框架：

圖片

過去一年使用過的渲染框架：

圖片

當(dāng)前前端框架現(xiàn)狀：

• React與Next.js的主導(dǎo)地位：React憑借其強(qiáng)大的社區(qū)支持和生態(tài)系統(tǒng)，在前端開發(fā)中持續(xù)占據(jù)主導(dǎo)地位。同時(shí)，Next.js作為React應(yīng)用的全?？蚣埽蚱浞?wù)端渲染、高效的路由以及對React 19新特性的早期采用，而備受開發(fā)者青睞。
• 新興框架嶄露頭角：Astro和SvelteKit作為新興的渲染框架，正在迅速崛起并受到開發(fā)者的高度關(guān)注。此外，Qwik和SolidJS也在社區(qū)中逐漸嶄露頭角，這些框架為前端開發(fā)提供了與傳統(tǒng)React、Vue、Angular不同的方法和思路。
• 開發(fā)者對新框架的熱情：許多開發(fā)者對學(xué)習(xí)Svelte表現(xiàn)出了濃厚的興趣，其次是HTMX和Qwik。然而，對Angular.js和Ember的興趣卻在逐漸下降，這可能表明開發(fā)者對這些傳統(tǒng)框架的未來發(fā)展持觀望態(tài)度。

前端庫

過去一年使用過的驗(yàn)證庫：

圖片

過去一年使用過的日期庫：

圖片

過去一年使用過的狀態(tài)管理庫：

圖片

過去一年使用過的其他庫：

圖片

數(shù)據(jù)獲取

數(shù)據(jù)獲取領(lǐng)域現(xiàn)狀穩(wěn)定，開發(fā)者傾向使用成熟可靠的工具如 TanStack Query、Axios和fetch API，對新庫需求不大。

圖片

微前端

微前端采用率大幅下降，反映了行業(yè)趨勢轉(zhuǎn)變，部分公司因技術(shù)和準(zhǔn)備不足而放棄，同時(shí)服務(wù)器渲染、靜態(tài)站點(diǎn)生成興起，模塊聯(lián)邦成新標(biāo)準(zhǔn)，預(yù)計(jì)2025年微前端領(lǐng)域?qū)⒁?AI 集成而保持活躍。

圖片

包管理器

NPM主導(dǎo)Node.js包管理器市場，但Yarn和PNPM正穩(wěn)步增長。Yarn以性能和高級功能受歡迎，PNPM則因高效依賴管理獲青睞。新興Bun雖未正式列入調(diào)查，但因性能提升被開發(fā)者關(guān)注。

圖片

JS運(yùn)行時(shí)

Node.js憑穩(wěn)定性、豐富生態(tài)和社區(qū)支持主導(dǎo)前端開發(fā)，但面臨Bun和Deno等新運(yùn)行時(shí)在速度、兼容性和開發(fā)者體驗(yàn)上的競爭，未來這些新運(yùn)行時(shí)可能因性能優(yōu)化和TypeScript支持而更具吸引力。

圖片

類型方法

TypeScript使用率增長，超半數(shù)開發(fā)者視其為網(wǎng)絡(luò)標(biāo)準(zhǔn)。開發(fā)者依賴TypeScript增強(qiáng)開發(fā)體驗(yàn)，但類型檢查速度成瓶頸。構(gòu)建工具轉(zhuǎn)向原生代碼加速反饋，類型檢查或成速度關(guān)鍵。未來，TypeScript 前景光明且注重類型安全。

圖片

TypeScript 現(xiàn)狀如何：

圖片

瀏覽器技術(shù)

Fetch API 因其簡單易用而迅速成為標(biāo)準(zhǔn)，使用率幾乎是存儲(chǔ)API的兩倍。這推動(dòng)了開發(fā)者更傾向于使用本地存儲(chǔ)技術(shù)，如IndexedDB和 Service Workers，以提高應(yīng)用加載速度和用戶體驗(yàn)。盡管漸進(jìn)式Web應(yīng)用（PWA）的概念很有前景，但在功能完善方面還有很長的路要走，尤其是文件系統(tǒng)訪問API，目前只支持Chromium內(nèi)核瀏覽器。

圖片

UI組件庫

在UI框架方面，shadcn/ui以28.1%的使用率領(lǐng)先，結(jié)合Tailwind、Radix和React，通過直接復(fù)制實(shí)現(xiàn)文件到項(xiàng)目來自定義。MUI第二，以可訪問性、主題性和高定制性著稱，解決了與NextJS的兼容問題。Bootstrap雖源于Web 2.0，但生態(tài)系統(tǒng)龐大，與React集成良好。Ant Design以7.3%的使用率排第五，為企業(yè)提供輕量級MUI替代品。

圖片

樣式工具

純 CSS 最受歡迎，74.8%受訪者愛用，且正取代部分JS任務(wù)。Sass/SCSS使用率為71.8%，因功能和預(yù)處理能力受開發(fā)者喜愛。Tailwind CSS實(shí)用主義方法獲66.7%認(rèn)可，尤其與React和Next.js契合。CSS Modules和Styled Components使用率分別為56.7%和42.9%，因作用域化樣式和組件架構(gòu)集成受青睞。

圖片

測試

圖片

圖片

過去一年使用的測試工具：

圖片

大多數(shù)測試由開發(fā)者或與QA團(tuán)隊(duì)合作完成，這加快了開發(fā)速度并提供了可靠反饋。雖然77%的受訪者進(jìn)行了測試，但主要集中于單元測試，不過端到端和集成測試也很重要。Jest和Cypress是熱門工具，但Vitest和Playwright作為新工具越來越受歡迎，特別是Vitest 隨著 Vite 的興起而越來越流行，Playwright則因性能優(yōu)越和設(shè)置簡化獲青睞。

代碼編輯器

前端開發(fā)者最愛用 Visual Studio Code，占75.1%，它免費(fèi)且擴(kuò)展豐富。JWebStorm 排第二，專為前端設(shè)計(jì)，穩(wěn)定可靠，目前個(gè)人版已免費(fèi)開放。另外，AI驅(qū)動(dòng)編輯器正在崛起，Cursor 利用新大語言模型，雖目前用戶不多，但潛力巨大。VS Code 也在加強(qiáng)AI功能，編輯器大戰(zhàn)一觸即發(fā)。

圖片

構(gòu)建工具

Vite 因速度快、啟動(dòng)快、配置少，受開發(fā)者歡迎，滿意度高達(dá)82.4%，成Webpack替代品。Webpack使用率相近，但用戶反饋分化，44%滿意，38.5%煩惱其復(fù)雜配置。Create React App接受度不一，不再適合生產(chǎn)環(huán)境，官方推薦Next.js、Remix或Gatsby等框架。

圖片

代碼檢查

在linting工具方面，ESLint和Prettier繼續(xù)占據(jù)主導(dǎo)地位，Stylelint 則展現(xiàn)出增長潛力。

圖片

操作系統(tǒng)

主要使用的操作系統(tǒng)：

圖片

AI 工具

過去一年使用的 AI 工具：

圖片

在開發(fā)中使用 AI 的用途：

圖片

對 AI 的態(tài)度：

圖片

開發(fā)者對 AI 的態(tài)度由憂轉(zhuǎn)喜，75.8% 認(rèn)為 AI 將提升工作效率，而不會(huì)替代前端開發(fā)者。ChatGPT和GitHub Copilot等AI工具廣受歡迎，助力編碼與問題解決。未來，AI在軟件中將更普及，改變我們的工作方式。盡管有挑戰(zhàn)，但整合AI是必然趨勢。

未來趨勢

圖片