前端框架新勢力大盤點
大家好，我是 CUGGZ。
近年來，前端領域快速發展，新的框架不斷涌現，為開發者提供了更多選擇和解決方案。盡管 React、Vue、Angular、Next.js、Preact 等老牌框架依然穩坐市場主流，但新勢力前端框架的崛起也為特定場景帶來了更佳的適配和優化。接下來，我們將一探近三年年出現的前端框架新勢力，深入了解它們的特點以及主要解決的問題，共同探索這些新勢力框架如何為前端開發注入新的活力與可能性。
Astro
Astro 最初于 2021 年 3 月發布，目前在 Github 上有 41.9k Star。
圖片
Astro 是一個集多功能于一體的 Web 框架，專為內容豐富的網站而設計，是最適合構建像博客、營銷網站、電子商務網站這樣以內容驅動的網站的 Web 框架。
圖片
Astro 的特性如下：
- 框架無關：可以使用React、Svelte、Vue、Preact、Web Components，或者只是簡單的HTML + JavaScript來構建網站。
- 默認無 JavaScript：Astro 默認將頁面渲染為100%靜態HTML，默認移除了最終構建中的JavaScript，這有助于提升頁面加載速度和用戶體驗。
- 按需加載組件：當頁面上的組件變為可見時，Astro 能夠自動實現組件的交互性（即“水合”組件），如果用戶從未看到某個組件，那么該組件的JavaScript代碼也不會被加載，這進一步提高了性能和效率。
- 功能全面：Astro支持TypeScript、Scoped CSS、CSS Modules、Sass、Tailwind 等，同時還支持Markdown、MDX以及任何npm包，這使得開發者能夠充分利用現有的工具和庫，構建功能豐富的網站。
- 內置SEO功能：為了簡化SEO和網站內容的分發，Astro內置了自動生成站點地圖、RSS源、分頁和集合的功能，幫助開發者更輕松地優化網站在搜索引擎中的排名和可見性。
- 文檔支持：Astro 官方提供了詳細的文檔，并且提供了中文版文檔。
Astro 獨創了一種前端架構，名為“群島”。這種架構旨在避免傳統的單體JavaScript模式，通過自動剝離頁面中所有非必需的JavaScript，顯著提升了前端性能。所謂的“島嶼”，是指頁面上的每一個交互式UI組件。這些島嶼各自獨立運行，互不干擾，一個頁面上可以同時存在多個島嶼。盡管島嶼在不同的組件環境中運作，但它們之間仍然能夠共享狀態并相互通信，保持了高度的靈活性和交互性。這種設計使得Astro能夠輕松支持多種UI框架，如 React、Preact、Svelte、Vue 和 SolidJS。由于島嶼的獨立性，你甚至可以在同一個頁面上混合使用多種框架，實現前所未有的前端體驗。
圖片
Astro 自發布之后，一直在快速的更新迭代，同時發布了一些周邊產品，如：
- Astro DB：專為 Astro 設計的全托管 SQL 數據庫。
- Starlight：基于 Astro 框架構建的全功能文檔主題。
圖片
Astro 的使用場景包括：營銷網站、出版網站、文檔網站、博客、個人作品集、落地頁、社區網站以及電子商務網站。無論是需要展示產品、發布內容、分享知識還是促進交易，只要有內容需要快速傳遞給讀者，Astro 都是一個理想的選擇。它以其高效的性能和靈活的架構，幫助用戶輕松構建出高性能、內容豐富的網站，滿足各種業務需求。
Github：https://github.com/withastro/astro
Qwik
Qwik 最初于 2021 年 5 月發布，目前在 Github 上有 20.1k Star。
圖片
Qwik 是一個 Web 框架，其獨特之處在于通過延遲執行和下載JavaScript以及序列化應用的執行狀態來實現即時啟動應用的目標。
圖片
Qwik的特點包括：
- 延遲執行和下載JavaScript：通過盡可能延遲JavaScript代碼的執行和下載，Qwik能夠提供接近即時啟動性能，這是當前一代Web框架無法匹敵的。
- 序列化和恢復執行狀態：Qwik通過在服務器和客戶端之間序列化應用的執行狀態，包括監聽器、內部數據結構和應用狀態，從而實現應用在客戶端繼續執行的能力。
Qwik 解決了現代網站在啟動時需要大量JavaScript代碼的問題，這導致了網絡帶寬和啟動時間上的瓶頸。Qwik的設計目標是盡可能減少應用需要下載和執行的JavaScript代碼量，從而實現更快的頁面加載速度和更好的用戶交互體驗。
Qwik適用于需要快速加載和即時交互的Web應用程序，尤其適用于對性能要求較高的場景，如移動應用、動態內容網站、實時交互應用等。通過Qwik，開發者可以構建出具有出色性能和用戶體驗的Web應用，滿足用戶在不同設備和網絡環境下的需求。
Github：https://github.com/BuilderIO/qwik
Remix
Remix 最初于 2021 年 10 月開源，目前在 Github 上有 27.2k Star。
圖片
Remix 是一個面向 React 開發者的全棧框架，直接對標 Next.js，其旨在提供更好的開發體驗和更高的性能。該框架由 Ryan Florence 和 Michael Jackson 創建，他們是 React Router 庫的作者。Remix 最初是一個收費框架，名為 Remix Run，提供了一種新的方式來構建動態網站。Remix Run 于 2021 年 3 月首次發布，最初是商業產品，需要購買許可證才能使用。
圖片
2021 年 10 月，Remix團隊宣布將Remix Run轉變為一個開源項目，并更名為 Remix。通過開源，Remix團隊希望能夠吸引更多的開發者并建立一個更加活躍的社區，從而推動框架的發展和改進。
圖片
Remix 構建在 React Router 之上，通過以下以下四點實現了一種高效且靈活的全棧Web開發體驗：
- 編譯器：：Remix的核心在于其編譯器，通過執行如
remix vite:build的命令，Remix能夠生成服務器端HTTP處理程序、瀏覽器版本和資產清單。這些生成物可直接部署至任何支持JavaScript的托管服務，極大地簡化了部署流程。 - 服務端HTTP處理程序與適配器：Remix并非一個完整的服務器，而是提供了一組處理程序，供實際運行的JavaScript服務器使用。這些處理程序基于Web Fetch API，因此能在多種Node.js及非Node.js環境中運行。適配器的引入使得Remix能夠在不同服務器架構間無縫切換，通過轉換服務器的請求/響應API至Fetch API，確保了跨平臺的兼容性。
- 服務端框架：Remix借鑒了傳統服務器端MVC框架的設計思路，但更側重于UI的呈現。其路由模塊不僅承擔了視圖和控制器的角色，還提供了loader（用于數據加載）、action（處理POST等請求）和default（組件）導出，使得開發者能夠更高效地組織和管理代碼。
- 瀏覽器框架：在瀏覽器端，Remix利用JavaScript模塊實現頁面的“水合”，確保了頁面的快速更新和出色的性能。同時，Remix提供了客戶端導航優化，通過預取頁面資源等方式，極大地提升了用戶體驗。此外，Remix的客戶端API也為開發者提供了豐富的用戶體驗改進手段，如表單提交時禁用按鈕、顯示動畫驗證消息等。
Github：https://github.com/remix-run/remix
Refine
最初于 2021 年 4 月發布，目前在 Github 上有 23.9k Star。
圖片
Refine是一個針對CRUD密集型Web應用的React元框架。它旨在解決包括內部工具、管理面板、儀表板和B2B應用在內的廣泛企業用例。
圖片
Refine 的特點如下：
- 一站式解決方案：Refine 提供了核心 hooks 和組件，為項目的關鍵方面，如認證、訪問控制、路由、網絡、狀態管理和國際化（i18n），提供了行業標準解決方案，從而簡化了開發過程。
- 高度可定制：Refine 采用無頭（headless）架構，將業務邏輯與UI和路由解耦，使得構建高度可定制的應用成為可能。這種架構允許開發者靈活選擇UI框架和設計，如TailwindCSS，并內置支持Ant Design、Material UI、Mantine和Chakra UI等。
- 跨平臺集成：Refine通過簡單的路由接口，可以輕松地與各種平臺集成，包括Next.js、Remix、React Native、Electron等，無需額外的設置步驟。
- 專注于CRUD操作：作為一個專注于CRUD（創建、讀取、更新、刪除）操作的框架，Refine特別適用于那些需要頻繁進行數據庫交互的Web應用。
- 企業級功能：Refine不僅關注開發效率，還提供了企業級的功能，如認證和訪問控制，滿足企業應用對于安全性和可管理性的需求。
Github：https://github.com/refinedev/refine
Nue
Nue 最初于 2023 年 9 月發布，目前在 Github 上有 5.7k Star。
圖片
Nue.js 是一款采用內容優先開發模型的 Web 框架，它使網站內容編輯和創建更加優化，通過簡單的語法和關注點分離，減少了構建同樣功能的代碼量，從而提高了開發效率。Nue.js 的創作者 Tero Piirainen 表示，Nue.js 是 React、Vue、Next.js、Svelte 和 Astro 的替代品。
圖片
Nue.js 表現出極致的性能，通過加載更少的資源、實現客戶端的即時頁面切換、顯著提升構建速度、提供緩存友好的分發方式以及使用更簡潔的 CSS 來構建更快的網站。
Nue.js 更加貼近標準，項目比 Next.js 更簡潔，減少了抽象和學習的成本，降低了出錯的可能性。它實現了關注點分離，為內容創作者、UX 開發人員和 JS 開發人員提供了明確的職責劃分。此外，Nue.js 堅持使用經久不衰的標準，而非短暫流行的 CSS-in-JS，確保代碼經受住時間的考驗。
Github：https://github.com/nuejs/nue
VanJS
VanJS 最初于 2023 年 5 月發布，目前在 Github 上有 3.4k Star。
圖片
VanJS 是一個超輕量級、零依賴的響應式 UI 框架，基于純粹的原生JavaScript和DOM。它允許開發者使用幾行代碼在任何設備上構建有用的UI應用程序，無需React/JSX或其他復雜的配置。
圖片
VanJS 的特點如下：
- 超輕量級：VanJS 是世界上最小的響應式 UI 框架，壓縮后僅為1.0kB，比大多數流行的替代方案小50~100倍，但可以獲得所有現代Web框架的基本功能，如DOM模板、狀態、狀態綁定、狀態推導、Effect、SPA、客戶端路由甚至水合等。
- 零依賴：無需安裝、配置或依賴其他庫或工具，只需向腳本或HTML文件添加一行代碼即可開始編碼。
- 原生JavaScript和DOM：使用VanJS編程感覺就像在腳本語言中構建React應用程序，而無需使用JSX。它完全基于原生JavaScript和DOM，無需轉譯或虛擬DOM。
- 狀態管理：VanJS提供了易于使用的狀態管理功能，允許開發者輕松管理UI的狀態和綁定。
- 易于學習：核心功能簡單明了，僅有 5 個主要函數，整個教程和API參考易于理解，可以在短時間內掌握。
- 開箱即用：無需安裝、無需配置、無需依賴、無需轉譯、無需IDE設置。只需向腳本或HTML文件添加一行代碼即可開始編碼。任何使用VanJS的代碼都可以直接粘貼并在瀏覽器的 Devtools 中執行。VanJS 允許專注于應用程序的業務邏輯，而不是陷入框架和工具中。
- 高性能：根據測試，VanJS是最快的Web框架之一，對于服務端渲染（SSR），其效率甚至超過React。
- TypeScript支持：VanJS提供對TypeScript的一流支持，允許開發者利用類型檢查、智能感知等高級功能。
Github：https://github.com/vanjs-org/van
Waku
最初于 2023 年 6 月發布，目前在 Github 上有 3.7k Star。
圖片
Waku 是一個輕量級的 React 框架，設計用于加速初創公司和機構開發小型到中型React項目的工作。它適用于構建營銷網站、輕量級電商網站和Web應用。Waku 的目標是在現代 React 服務端組件時代帶來快速的開發者體驗，讓React開發再次變得快速。需要注意的是，Waku目前正處于快速發展階段，一些功能可能還不完善。因此，建議用戶先在非生產項目上進行嘗試。
圖片
Github：https://github.com/dai-shi/waku
