Hello，大家好，我是 Sunday。

一說起框架，很多前端開發(fā)的同學(xué)第一時(shí)間想到的就是 “Vue || React”。但是，我們需要知道的是：除了這兩個(gè)老牌框架之外，還有很多非常優(yōu)秀的“后起之秀” 正在不斷地對這些王者發(fā)起挑戰(zhàn)。

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

01：Astro

Astro的使用場景包括：營銷網(wǎng)站、發(fā)布網(wǎng)站、文檔網(wǎng)站、博客、個(gè)人作品集、登陸頁面、社區(qū)網(wǎng)站、電子商務(wù)網(wǎng)站。

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

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

圖片

Astro 是一個(gè)專為內(nèi)容豐富的網(wǎng)站設(shè)計(jì)的一體化 Web 框架。它是最適合構(gòu)建 博客、營銷網(wǎng)站、電子商務(wù)網(wǎng)站 等內(nèi)容驅(qū)動型網(wǎng)站的Web框架。

圖片

Astro的特點(diǎn)如下：

• 框架兼容：可以使用 React、Svelte、Vue、Preact、Web Components 或純 HTML + JavaScript 來構(gòu)建網(wǎng)站。
• 默認(rèn)無 JavaScript：Astro 默認(rèn)將頁面呈現(xiàn)為 100% 靜態(tài) HTML，并默認(rèn)從最終版本中刪除 JavaScript，這有助于提高頁面加載速度和用戶體驗(yàn)。
• 按需加載組件：當(dāng)組件在頁面上可見時(shí)，Astro 會自動實(shí)現(xiàn)組件交互性（即“水合”組件）。如果用戶從未看到某個(gè)組件，那么該組件的 JavaScript 代碼也不會看到。加載，進(jìn)一步提高性能和效率。
• 功能全面：Astro 支持 TypeScript、Scoped CSS、CSS Modules、Sass、Tailwind 等。它還支持 Markdown、MDX 和任何 npm 包，這使得開發(fā)人員可以充分利用現(xiàn)有的工具和庫來構(gòu)建功能豐富的網(wǎng)站。
• 內(nèi)置SEO功能：為了簡化SEO和網(wǎng)站內(nèi)容分發(fā)，Astro內(nèi)置了自動生成站點(diǎn)地圖、RSS提要、分頁和集合的功能，幫助開發(fā)人員更輕松地優(yōu)化網(wǎng)站排名和在搜索引擎中的可見性。
• 文檔支持：Astro官方提供了詳細(xì)的文檔，并提供了中文版的文檔。

Astro創(chuàng)建了一種獨(dú)特的前端架構(gòu)，稱為“ Island ”。這種架構(gòu)旨在避免傳統(tǒng)的整體 JavaScript 模型，并通過自動從頁面中剝離所有非必要的 JavaScript 來顯著提高前端性能。

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

這些 islands 獨(dú)立運(yùn)作，互不干擾。多個(gè) islands 可以同時(shí)存在于一頁上。盡管單獨(dú)的 island 運(yùn)行在不同的組件環(huán)境中，但它們?nèi)匀荒軌蚬蚕頎顟B(tài)并相互通信，保持高度的靈活性和交互性。

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

自發(fā)布以來，Astro一直在快速更新迭代，也發(fā)布了一些周邊產(chǎn)品，例如：

• Astro DB：專為 Astro 設(shè)計(jì)的完全托管的 SQL 數(shù)據(jù)庫。
• Starlight：基于 Astro 框架構(gòu)建的全功能文檔主題。

02：Qwik

Qwik 適合需要快速加載和即時(shí)交互的Web應(yīng)用，尤其是對性能要求較高的場景，例如：移動應(yīng)用、動態(tài)內(nèi)容網(wǎng)站、實(shí)時(shí)交互應(yīng)用等。

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

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

圖片

Qwik 是一個(gè) Web 框架，其獨(dú)特之處在于它通過延遲 JavaScript 的執(zhí)行和下載以及序列化應(yīng)用程序的執(zhí)行狀態(tài)來實(shí)現(xiàn)即時(shí)啟動應(yīng)用程序的目標(biāo)。

圖片

Qwik 的功能包括：

• JavaScript 的延遲執(zhí)行和下載：通過盡可能延遲 JavaScript 代碼的執(zhí)行和下載，Qwik 能夠提供近乎即時(shí)的啟動性能，這是當(dāng)前一代 Web 框架無法比擬的。
• 執(zhí)行狀態(tài)的序列化和恢復(fù)：Qwik通過在服務(wù)器和客戶端之間序列化應(yīng)用程序的執(zhí)行狀態(tài)，包括監(jiān)聽器、內(nèi)部數(shù)據(jù)結(jié)構(gòu)和應(yīng)用程序狀態(tài)，實(shí)現(xiàn)應(yīng)用程序在客戶端繼續(xù)執(zhí)行的能力。

Qwik 解決了現(xiàn)代網(wǎng)站在啟動時(shí)需要大量 JavaScript 代碼，從而導(dǎo)致網(wǎng)絡(luò)帶寬和啟動時(shí)間瓶頸的問題。

Qwik 的設(shè)計(jì)目標(biāo)是最大限度地減少應(yīng)用程序需要下載和執(zhí)行的 JavaScript 代碼量，從而實(shí)現(xiàn)更快的頁面加載速度和更好的用戶交互體驗(yàn)。

通過Qwik，我們可以構(gòu)建性能優(yōu)異的Web應(yīng)用和用戶體驗(yàn)，滿足用戶在不同設(shè)備和網(wǎng)絡(luò)環(huán)境下的需求。

03：Remix

Remix是面向React開發(fā)者的全?？蚣埽cNext.js直接對接，旨在提供更好的開發(fā)體驗(yàn)和更高的性能。

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

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

圖片

Remix是面向React開發(fā)者的全?？蚣埽cNext.js直接對接，旨在提供更好的開發(fā)體驗(yàn)和更高的性能。該框架由 React Router 庫的作者 Ryan Florence 和 Michael Jackson 創(chuàng)建。 Remix 最初是一個(gè)名為 Remix Run 的付費(fèi)框架，它提供了一種構(gòu)建動態(tài)網(wǎng)站的新方法。 Remix Run 于 2021 年 3 月首次發(fā)布，最初是一款需要購買許可證才能使用的商業(yè)產(chǎn)品。

圖片

2021年10月，Remix團(tuán)隊(duì)宣布將Remix Run轉(zhuǎn)型為開源項(xiàng)目，并更名為Remix。通過開源，Remix團(tuán)隊(duì)希望能夠吸引更多的開發(fā)者，建立更加活躍的社區(qū)，從而推動框架的發(fā)展和完善。

圖片

Remix基于React Router構(gòu)建，通過以下四點(diǎn)實(shí)現(xiàn)高效靈活的全棧Web開發(fā)體驗(yàn)：

• 編譯器：Remix的核心在于它的編譯器。通過執(zhí)行remix vite:build諸如此類的命令，可以將這些工件直接部署到任何支持 JavaScript 的托管服務(wù)，從而大大簡化了部署過程。
• 服務(wù)器端 HTTP 處理程序和適配器：Remix 不是一個(gè)完整的服務(wù)器，而是提供了一組處理程序供實(shí)際運(yùn)行的 JavaScript 服務(wù)器使用。這些處理程序基于 Web Fetch API，因此它們可以在各種 Node.js 和非 Node.js 環(huán)境中運(yùn)行。適配器的引入使得Remix能夠在不同的服務(wù)器架構(gòu)之間無縫切換，通過將服務(wù)器的請求/響應(yīng)API轉(zhuǎn)換為Fetch API來確保跨平臺兼容性。
• 服務(wù)器端框架：Remix借鑒了傳統(tǒng)服務(wù)器端MVC框架的設(shè)計(jì)思想，但更注重UI呈現(xiàn)。它的路由模塊不僅承擔(dān)了視圖和控制器的角色，還提供了loader（用于數(shù)據(jù)加載）、action（用于處理POST等請求）和default（組件）導(dǎo)出，讓開發(fā)者能夠更高效地組織和管理代碼。
• 瀏覽器框架：在瀏覽器端，Remix使用JavaScript模塊來“水化”頁面，保證頁面的快速更新和優(yōu)異的性能。同時(shí)，Remix提供了客戶端導(dǎo)航優(yōu)化，通過預(yù)取頁面資源，極大提升了用戶體驗(yàn)。此外，Remix的客戶端API還為開發(fā)者提供了豐富的用戶體驗(yàn)改進(jìn)，例如提交表單時(shí)禁用按鈕、顯示動畫驗(yàn)證消息等。

04：Refine

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

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

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

圖片

Refine的特點(diǎn)如下：

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

05：Nue

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

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

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

圖片

Nue.js是一個(gè)采用內(nèi)容優(yōu)先開發(fā)模式的Web框架。它使網(wǎng)站內(nèi)容編輯和創(chuàng)建更加優(yōu)化。通過簡單的語法和關(guān)注點(diǎn)分離，減少構(gòu)建相同功能所需的代碼量，從而提高開發(fā)效率。

圖片

Nue.js 通過加載更少的資源、在客戶端上實(shí)現(xiàn)即時(shí)頁面切換、顯著提高構(gòu)建速度、提供緩存友好的分發(fā)以及使用更干凈的 CSS 構(gòu)建更快的網(wǎng)站來提供終極性能。

Nue.js更接近標(biāo)準(zhǔn)，項(xiàng)目也比Next.js簡單，降低了抽象和學(xué)習(xí)的成本，減少了出錯(cuò)的可能性。它實(shí)現(xiàn)了關(guān)注點(diǎn)分離，并為內(nèi)容創(chuàng)建者、UX 開發(fā)人員和 JS 開發(fā)人員提供了明確的職責(zé)分工。

06：VanJS

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

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

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

圖片

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

圖片

VanJS的特點(diǎn)如下：

• 超輕量級：VanJS是世界上最小的響應(yīng)式UI框架，壓縮后僅1.0kB，比最流行的替代品小50~100倍，但獲得了現(xiàn)代Web框架的所有基本功能，例如DOM模板、狀態(tài)、狀態(tài)綁定、狀態(tài)推導(dǎo)、效果、SPA、客戶端路由甚至水合等。
• 零依賴：無需安裝、配置或依賴其他庫或工具，只需在腳本或 HTML 文件中添加一行代碼并開始編碼。
• 原生 JavaScript 和 DOM：使用 VanJS 編程感覺就像用腳本語言構(gòu)建 React 應(yīng)用程序，而不需要 JSX。它完全基于原生 JavaScript 和 DOM，無需轉(zhuǎn)譯或虛擬 DOM。
• 狀態(tài)管理：VanJS提供了簡單易用的狀態(tài)管理功能，讓開發(fā)者可以輕松管理UI的狀態(tài)和綁定。
• 簡單易學(xué)：核心功能簡單明了，只有5個(gè)主要功能。整個(gè)教程和API參考簡單易懂，可以在短時(shí)間內(nèi)掌握。
• 開箱即用：無需安裝、無需配置、無依賴項(xiàng)、無需翻譯、無需 IDE 設(shè)置。只需在腳本或 HTML 文件中添加一行代碼即可開始編碼。任何使用 VanJS 的代碼都可以直接粘貼并在瀏覽器的 Devtools 中執(zhí)行。 VanJS 允許您專注于應(yīng)用程序的業(yè)務(wù)邏輯，而不是陷入框架和工具的泥潭。
• 高性能：根據(jù)測試，VanJS 是最快的 Web 框架之一，在服務(wù)器端渲染（SSR）方面甚至比 React 還要高效。
• TypeScript 支持：VanJS 為 TypeScript 提供一流的支持，允許開發(fā)人員利用類型檢查和 IntelliSense 等高級功能。

07：Waku

Waku 是一個(gè)輕量級的 React 框架，旨在加速初創(chuàng)公司和機(jī)構(gòu)開發(fā)中小型 React 項(xiàng)目的工作。適合構(gòu)建營銷網(wǎng)站、輕量級電子商務(wù)網(wǎng)站和Web應(yīng)用程序。

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

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

圖片

Waku 的目標(biāo)是在現(xiàn)代 React 服務(wù)器端組件時(shí)代帶來快速的開發(fā)人員體驗(yàn)，使 React 開發(fā)再次快速。需要說明的是，Waku目前正處于快速發(fā)展階段，部分功能可能還不完善。因此，建議用戶先在非生產(chǎn)項(xiàng)目上嘗試。