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

前端框架

過(guò)去一年使用過(guò)的前端框架：

過(guò)去一年使用過(guò)的渲染框架：

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

• React與Next.js的主導(dǎo)地位：React憑借其強(qiáng)大的社區(qū)支持和生態(tài)系統(tǒng)，在前端開(kāi)發(fā)中持續(xù)占據(jù)主導(dǎo)地位。同時(shí)，Next.js作為React應(yīng)用的全棧框架，因其服務(wù)端渲染、高效的路由以及對(duì)React 19新特性的早期采用，而備受開(kāi)發(fā)者青睞。

• 新興框架嶄露頭角：Astro和SvelteKit作為新興的渲染框架，正在迅速崛起并受到開(kāi)發(fā)者的高度關(guān)注。此外，Qwik和SolidJS也在社區(qū)中逐漸嶄露頭角，這些框架為前端開(kāi)發(fā)提供了與傳統(tǒng)React、Vue、Angular不同的方法和思路。

• 開(kāi)發(fā)者對(duì)新框架的熱情：許多開(kāi)發(fā)者對(duì)學(xué)習(xí)Svelte表現(xiàn)出了濃厚的興趣，其次是HTMX和Qwik。然而，對(duì)Angular.js和Ember的興趣卻在逐漸下降，這可能表明開(kāi)發(fā)者對(duì)這些傳統(tǒng)框架的未來(lái)發(fā)展持觀望態(tài)度。

前端庫(kù)

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

過(guò)去一年使用過(guò)的日期庫(kù)：

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

過(guò)去一年使用過(guò)的其他庫(kù)：

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

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

微前端

微前端采用率大幅下降，反映了行業(yè)趨勢(shì)轉(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包管理器市場(chǎng)，但Yarn和PNPM正穩(wěn)步增長(zhǎng)。Yarn以性能和高級(jí)功能受歡迎，PNPM則因高效依賴管理獲青睞。新興Bun雖未正式列入調(diào)查，但因性能提升被開(kāi)發(fā)者關(guān)注。

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

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

類型方法

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

TypeScript 現(xiàn)狀如何：

瀏覽器技術(shù)

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

UI組件庫(kù)

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

樣式工具

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

測(cè)試

過(guò)去一年使用的測(cè)試工具：

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

代碼編輯器

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

構(gòu)建工具

Vite 因速度快、啟動(dòng)快、配置少，受開(kāi)發(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)出增長(zhǎng)潛力。

操作系統(tǒng)

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

AI 工具

過(guò)去一年使用的 AI 工具：

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

對(duì) AI 的態(tài)度：

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

未來(lái)趨勢(shì)

前端現(xiàn)狀調(diào)查結(jié)果：https://tsh.io/state-of-frontend/

整理：前端充電寶