Hello，大家好，我是 Sunday。

一說起框架，很多前端開發的同學第一時間想到的就是 “Vue || React”。但是，我們需要知道的是：除了這兩個老牌框架之外，還有很多非常優秀的“后起之秀” 正在不斷地對這些王者發起挑戰。

所以，今天咱們就來看看在 2024 年這個時間，前端有哪些“新興”的 JS 框架，它們分別又有什么樣的魔力~~

01：Astro

Astro的使用場景包括：營銷網站、發布網站、文檔網站、博客、個人作品集、登陸頁面、社區網站、電子商務網站。

Github：https://github.com/withastro/astro

Astro 最初于 2021 年 3 月發布，目前在 Github 上擁有 41,900 顆星。

圖片

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創建了一種獨特的前端架構，稱為“ Island ”。這種架構旨在避免傳統的整體 JavaScript 模型，并通過自動從頁面中剝離所有非必要的 JavaScript 來顯著提高前端性能。

所謂“Island”，是指頁面上的每一個交互UI組件。

這些 islands 獨立運作，互不干擾。多個 islands 可以同時存在于一頁上。盡管單獨的 island 運行在不同的組件環境中，但它們仍然能夠共享狀態并相互通信，保持高度的靈活性和交互性。

這種設計使得 Astro 可以輕松支持多種 UI 框架，例如 React、Preact、Svelte、Vue 和 SolidJS。由于 island 的獨立性，我們甚至可以在同一頁面上混合使用多個框架，以獲得前所未有的前端體驗。

自發布以來，Astro一直在快速更新迭代，也發布了一些周邊產品，例如：

• Astro DB：專為 Astro 設計的完全托管的 SQL 數據庫。
• Starlight：基于 Astro 框架構建的全功能文檔主題。

02：Qwik

Qwik 適合需要快速加載和即時交互的Web應用，尤其是對性能要求較高的場景，例如：移動應用、動態內容網站、實時交互應用等。

Github：https://github.com/BuilderIO/qwik

Qwik 最初于 2021 年 5 月發布，目前在 Github 上擁有 20,100 個 star。

圖片

Qwik 是一個 Web 框架，其獨特之處在于它通過延遲 JavaScript 的執行和下載以及序列化應用程序的執行狀態來實現即時啟動應用程序的目標。

圖片

Qwik 的功能包括：

• JavaScript 的延遲執行和下載：通過盡可能延遲 JavaScript 代碼的執行和下載，Qwik 能夠提供近乎即時的啟動性能，這是當前一代 Web 框架無法比擬的。
• 執行狀態的序列化和恢復：Qwik通過在服務器和客戶端之間序列化應用程序的執行狀態，包括監聽器、內部數據結構和應用程序狀態，實現應用程序在客戶端繼續執行的能力。

Qwik 解決了現代網站在啟動時需要大量 JavaScript 代碼，從而導致網絡帶寬和啟動時間瓶頸的問題。

Qwik 的設計目標是最大限度地減少應用程序需要下載和執行的 JavaScript 代碼量，從而實現更快的頁面加載速度和更好的用戶交互體驗。

通過Qwik，我們可以構建性能優異的Web應用和用戶體驗，滿足用戶在不同設備和網絡環境下的需求。

03：Remix

Remix是面向React開發者的全棧框架，與Next.js直接對接，旨在提供更好的開發體驗和更高的性能。

Github：https://github.com/remix-run/remix

Remix 最初于 2021 年 10 月開源，目前在 Github 上擁有 2.72 萬顆星。

圖片

Remix是面向React開發者的全棧框架，與Next.js直接對接，旨在提供更好的開發體驗和更高的性能。該框架由 React Router 庫的作者 Ryan Florence 和 Michael Jackson 創建。 Remix 最初是一個名為 Remix Run 的付費框架，它提供了一種構建動態網站的新方法。 Remix Run 于 2021 年 3 月首次發布，最初是一款需要購買許可證才能使用的商業產品。

圖片

2021年10月，Remix團隊宣布將Remix Run轉型為開源項目，并更名為Remix。通過開源，Remix團隊希望能夠吸引更多的開發者，建立更加活躍的社區，從而推動框架的發展和完善。

圖片

Remix基于React Router構建，通過以下四點實現高效靈活的全棧Web開發體驗：

• 編譯器：Remix的核心在于它的編譯器。通過執行remix vite:build諸如此類的命令，可以將這些工件直接部署到任何支持 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還為開發者提供了豐富的用戶體驗改進，例如提交表單時禁用按鈕、顯示動畫驗證消息等。

04：Refine

Refine 是一個針對 CRUD 密集型 Web 應用程序的 React 元框架。它旨在解決廣泛的企業用例，包括內部工具、管理面板、儀表板和 B2B 應用程序。

Github：https://github.com/refinedev/refine

它最初于 2021 年 4 月發布，目前在 Github 上擁有 23900 顆星。

圖片

Refine的特點如下：

• 一站式解決方案：Refine 通過提供核心掛鉤和組件來簡化開發，這些核心掛鉤和組件為項目的關鍵方面（例如身份驗證、訪問控制、路由、網絡、狀態管理和國際化 (i18n) 流程）提供行業標準解決方案。
• 高度可定制：Refine采用無頭架構，將業務邏輯與UI和路由解耦，使得構建高度可定制的應用程序成為可能。該架構允許開發者靈活選擇UI框架和設計，例如TailwindCSS，并內置對Ant Design、Material UI、Mantine和Chakra UI等的支持。
• 跨平臺集成：Refine可以通過簡單的路由接口輕松與各種平臺集成，包括Next.js、Remix、React Native、Electron等，無需額外的設置步驟。
• 專注于CRUD操作：作為一個專注于CRUD（創建、讀取、更新、刪除）操作的框架，Refine特別適合需要頻繁數據庫交互的Web應用程序。
• 企業級功能：Refine不僅注重開發效率，還提供認證、訪問控制等企業級功能，滿足企業應用的安全性和可管理性需求。

05：Nue

Nue.js 的創建者 Tero Piirainen 表示，Nue.js 是 React、Vue、Next.js、Svelte 和 Astro 的替代品。

Github：https://github.com/nuejs/nue

Nue 最初于 2023 年 9 月發布，目前在 Github 上擁有 5700 顆星。

圖片

Nue.js是一個采用內容優先開發模式的Web框架。它使網站內容編輯和創建更加優化。通過簡單的語法和關注點分離，減少構建相同功能所需的代碼量，從而提高開發效率。

圖片

Nue.js 通過加載更少的資源、在客戶端上實現即時頁面切換、顯著提高構建速度、提供緩存友好的分發以及使用更干凈的 CSS 構建更快的網站來提供終極性能。

Nue.js更接近標準，項目也比Next.js簡單，降低了抽象和學習的成本，減少了出錯的可能性。它實現了關注點分離，并為內容創建者、UX 開發人員和 JS 開發人員提供了明確的職責分工。

06：VanJS

VanJS 是一個基于純原生 JavaScript 和 DOM 的超輕量級、零依賴的響應式 UI 框架。

Github：https://github.com/vanjs-org/van

VanJS 最初于 2023 年 5 月發布，目前在 Github 上擁有 3,400 顆星。

圖片

VanJS 是一個基于純原生 JavaScript 和 DOM 的超輕量級、零依賴的響應式 UI 框架。它允許開發人員只需幾行代碼即可在任何設備上構建有用的 UI 應用程序，而不需要 React/JSX 或其他復雜的配置。

圖片

VanJS的特點如下：

• 超輕量級：VanJS是世界上最小的響應式UI框架，壓縮后僅1.0kB，比最流行的替代品小50~100倍，但獲得了現代Web框架的所有基本功能，例如DOM模板、狀態、狀態綁定、狀態推導、效果、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 提供一流的支持，允許開發人員利用類型檢查和 IntelliSense 等高級功能。

07：Waku

Waku 是一個輕量級的 React 框架，旨在加速初創公司和機構開發中小型 React 項目的工作。適合構建營銷網站、輕量級電子商務網站和Web應用程序。

Github：https://github.com/dai-shi/waku

最初發布于 2023 年 6 月，目前在 Github 上有 3700 顆星。

圖片

Waku 的目標是在現代 React 服務器端組件時代帶來快速的開發人員體驗，使 React 開發再次快速。需要說明的是，Waku目前正處于快速發展階段，部分功能可能還不完善。因此，建議用戶先在非生產項目上嘗試。