2024 年前端現狀，你知道多少？
最近，TSH 發布了一年一度的前端狀態調查結果，本文將探討 2024 年前端的現狀。
前端框架
過去一年使用過的前端框架：
圖片
過去一年使用過的渲染框架：
圖片
當前前端框架現狀：
- React與Next.js的主導地位：React憑借其強大的社區支持和生態系統，在前端開發中持續占據主導地位。同時，Next.js作為React應用的全棧框架，因其服務端渲染、高效的路由以及對React 19新特性的早期采用，而備受開發者青睞。
- 新興框架嶄露頭角：Astro和SvelteKit作為新興的渲染框架，正在迅速崛起并受到開發者的高度關注。此外，Qwik和SolidJS也在社區中逐漸嶄露頭角，這些框架為前端開發提供了與傳統React、Vue、Angular不同的方法和思路。
- 開發者對新框架的熱情：許多開發者對學習Svelte表現出了濃厚的興趣，其次是HTMX和Qwik。然而，對Angular.js和Ember的興趣卻在逐漸下降，這可能表明開發者對這些傳統框架的未來發展持觀望態度。
前端庫
過去一年使用過的驗證庫：
圖片
過去一年使用過的日期庫：
圖片
過去一年使用過的狀態管理庫：
圖片
過去一年使用過的其他庫：
圖片
數據獲取
數據獲取領域現狀穩定，開發者傾向使用成熟可靠的工具如 TanStack Query、Axios和fetch API，對新庫需求不大。
圖片
微前端
微前端采用率大幅下降，反映了行業趨勢轉變，部分公司因技術和準備不足而放棄，同時服務器渲染、靜態站點生成興起，模塊聯邦成新標準，預計2025年微前端領域將因 AI 集成而保持活躍。
圖片
包管理器
NPM主導Node.js包管理器市場，但Yarn和PNPM正穩步增長。Yarn以性能和高級功能受歡迎，PNPM則因高效依賴管理獲青睞。新興Bun雖未正式列入調查，但因性能提升被開發者關注。
圖片
JS運行時
Node.js憑穩定性、豐富生態和社區支持主導前端開發，但面臨Bun和Deno等新運行時在速度、兼容性和開發者體驗上的競爭，未來這些新運行時可能因性能優化和TypeScript支持而更具吸引力。
圖片
類型方法
TypeScript使用率增長，超半數開發者視其為網絡標準。開發者依賴TypeScript增強開發體驗，但類型檢查速度成瓶頸。構建工具轉向原生代碼加速反饋，類型檢查或成速度關鍵。未來，TypeScript 前景光明且注重類型安全。
圖片
TypeScript 現狀如何：
圖片
瀏覽器技術
Fetch API 因其簡單易用而迅速成為標準，使用率幾乎是存儲API的兩倍。這推動了開發者更傾向于使用本地存儲技術，如IndexedDB和 Service Workers，以提高應用加載速度和用戶體驗。盡管漸進式Web應用（PWA）的概念很有前景，但在功能完善方面還有很長的路要走，尤其是文件系統訪問API，目前只支持Chromium內核瀏覽器。
圖片
UI組件庫
在UI框架方面，shadcn/ui以28.1%的使用率領先，結合Tailwind、Radix和React，通過直接復制實現文件到項目來自定義。MUI第二，以可訪問性、主題性和高定制性著稱，解決了與NextJS的兼容問題。Bootstrap雖源于Web 2.0，但生態系統龐大，與React集成良好。Ant Design以7.3%的使用率排第五，為企業提供輕量級MUI替代品。
圖片
樣式工具
純 CSS 最受歡迎，74.8%受訪者愛用，且正取代部分JS任務。Sass/SCSS使用率為71.8%，因功能和預處理能力受開發者喜愛。Tailwind CSS實用主義方法獲66.7%認可，尤其與React和Next.js契合。CSS Modules和Styled Components使用率分別為56.7%和42.9%，因作用域化樣式和組件架構集成受青睞。
圖片
測試
圖片
圖片
過去一年使用的測試工具：
圖片
大多數測試由開發者或與QA團隊合作完成，這加快了開發速度并提供了可靠反饋。雖然77%的受訪者進行了測試，但主要集中于單元測試，不過端到端和集成測試也很重要。Jest和Cypress是熱門工具，但Vitest和Playwright作為新工具越來越受歡迎，特別是Vitest 隨著 Vite 的興起而越來越流行，Playwright則因性能優越和設置簡化獲青睞。
代碼編輯器
前端開發者最愛用 Visual Studio Code，占75.1%，它免費且擴展豐富。JWebStorm 排第二，專為前端設計，穩定可靠，目前個人版已免費開放。另外，AI驅動編輯器正在崛起，Cursor 利用新大語言模型，雖目前用戶不多，但潛力巨大。VS Code 也在加強AI功能，編輯器大戰一觸即發。
圖片
構建工具
Vite 因速度快、啟動快、配置少，受開發者歡迎，滿意度高達82.4%，成Webpack替代品。Webpack使用率相近，但用戶反饋分化，44%滿意，38.5%煩惱其復雜配置。Create React App接受度不一，不再適合生產環境，官方推薦Next.js、Remix或Gatsby等框架。
圖片
代碼檢查
在linting工具方面，ESLint和Prettier繼續占據主導地位，Stylelint 則展現出增長潛力。
圖片
操作系統
主要使用的操作系統：
圖片
AI 工具
過去一年使用的 AI 工具：
圖片
在開發中使用 AI 的用途：
圖片
對 AI 的態度：
圖片
開發者對 AI 的態度由憂轉喜，75.8% 認為 AI 將提升工作效率，而不會替代前端開發者。ChatGPT和GitHub Copilot等AI工具廣受歡迎，助力編碼與問題解決。未來，AI在軟件中將更普及，改變我們的工作方式。盡管有挑戰，但整合AI是必然趨勢。
未來趨勢
圖片
