大家好，我是 CUGGZ。

近年來(lái)，前端領(lǐng)域快速發(fā)展，新的框架不斷涌現(xiàn)，為開(kāi)發(fā)者提供了更多選擇和解決方案。盡管 React、Vue、Angular、Next.js、Preact 等老牌框架依然穩(wěn)坐市場(chǎng)主流，但新勢(shì)力前端框架的崛起也為特定場(chǎng)景帶來(lái)了更佳的適配和優(yōu)化。接下來(lái)，我們將一探近三年年出現(xiàn)的前端框架新勢(shì)力，深入了解它們的特點(diǎn)以及主要解決的問(wèn)題，共同探索這些新勢(shì)力框架如何為前端開(kāi)發(fā)注入新的活力與可能性。

Astro

Astro 最初于 2021 年 3 月發(fā)布，目前在 Github 上有 41.9k Star。

圖片

Astro 是一個(gè)集多功能于一體的 Web 框架，專為內(nèi)容豐富的網(wǎng)站而設(shè)計(jì)，是最適合構(gòu)建像博客、營(yíng)銷網(wǎng)站、電子商務(wù)網(wǎng)站這樣以內(nèi)容驅(qū)動(dòng)的網(wǎng)站的 Web 框架。

圖片

Astro 的特性如下：

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

Astro 獨(dú)創(chuàng)了一種前端架構(gòu)，名為“群島”。這種架構(gòu)旨在避免傳統(tǒng)的單體JavaScript模式，通過(guò)自動(dòng)剝離頁(yè)面中所有非必需的JavaScript，顯著提升了前端性能。所謂的“島嶼”，是指頁(yè)面上的每一個(gè)交互式UI組件。這些島嶼各自獨(dú)立運(yùn)行，互不干擾，一個(gè)頁(yè)面上可以同時(shí)存在多個(gè)島嶼。盡管島嶼在不同的組件環(huán)境中運(yùn)作，但它們之間仍然能夠共享狀態(tài)并相互通信，保持了高度的靈活性和交互性。這種設(shè)計(jì)使得Astro能夠輕松支持多種UI框架，如 React、Preact、Svelte、Vue 和 SolidJS。由于島嶼的獨(dú)立性，你甚至可以在同一個(gè)頁(yè)面上混合使用多種框架，實(shí)現(xiàn)前所未有的前端體驗(yàn)。

圖片

Astro 自發(fā)布之后，一直在快速的更新迭代，同時(shí)發(fā)布了一些周邊產(chǎn)品，如：

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

圖片

Astro 的使用場(chǎng)景包括：營(yíng)銷網(wǎng)站、出版網(wǎng)站、文檔網(wǎng)站、博客、個(gè)人作品集、落地頁(yè)、社區(qū)網(wǎng)站以及電子商務(wù)網(wǎng)站。無(wú)論是需要展示產(chǎn)品、發(fā)布內(nèi)容、分享知識(shí)還是促進(jìn)交易，只要有內(nèi)容需要快速傳遞給讀者，Astro 都是一個(gè)理想的選擇。它以其高效的性能和靈活的架構(gòu)，幫助用戶輕松構(gòu)建出高性能、內(nèi)容豐富的網(wǎng)站，滿足各種業(yè)務(wù)需求。

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

Qwik

Qwik 最初于 2021 年 5 月發(fā)布，目前在 Github 上有 20.1k Star。

圖片

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

圖片

Qwik的特點(diǎn)包括：

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

Qwik 解決了現(xiàn)代網(wǎng)站在啟動(dòng)時(shí)需要大量JavaScript代碼的問(wèn)題，這導(dǎo)致了網(wǎng)絡(luò)帶寬和啟動(dòng)時(shí)間上的瓶頸。Qwik的設(shè)計(jì)目標(biāo)是盡可能減少應(yīng)用需要下載和執(zhí)行的JavaScript代碼量，從而實(shí)現(xiàn)更快的頁(yè)面加載速度和更好的用戶交互體驗(yàn)。

Qwik適用于需要快速加載和即時(shí)交互的Web應(yīng)用程序，尤其適用于對(duì)性能要求較高的場(chǎng)景，如移動(dòng)應(yīng)用、動(dòng)態(tài)內(nèi)容網(wǎng)站、實(shí)時(shí)交互應(yīng)用等。通過(guò)Qwik，開(kāi)發(fā)者可以構(gòu)建出具有出色性能和用戶體驗(yàn)的Web應(yīng)用，滿足用戶在不同設(shè)備和網(wǎng)絡(luò)環(huán)境下的需求。

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

Remix

Remix 最初于 2021 年 10 月開(kāi)源，目前在 Github 上有 27.2k Star。

圖片

Remix 是一個(gè)面向 React 開(kāi)發(fā)者的全棧框架，直接對(duì)標(biāo) Next.js，其旨在提供更好的開(kāi)發(fā)體驗(yàn)和更高的性能。該框架由 Ryan Florence 和 Michael Jackson 創(chuàng)建，他們是 React Router 庫(kù)的作者。Remix 最初是一個(gè)收費(fèi)框架，名為 Remix Run，提供了一種新的方式來(lái)構(gòu)建動(dòng)態(tài)網(wǎng)站。Remix Run 于 2021 年 3 月首次發(fā)布，最初是商業(yè)產(chǎn)品，需要購(gòu)買(mǎi)許可證才能使用。

圖片

2021 年 10 月，Remix團(tuán)隊(duì)宣布將Remix Run轉(zhuǎn)變?yōu)橐粋€(gè)開(kāi)源項(xiàng)目，并更名為 Remix。通過(guò)開(kāi)源，Remix團(tuán)隊(duì)希望能夠吸引更多的開(kāi)發(fā)者并建立一個(gè)更加活躍的社區(qū)，從而推動(dòng)框架的發(fā)展和改進(jìn)。

圖片

Remix 構(gòu)建在 React Router 之上，通過(guò)以下以下四點(diǎn)實(shí)現(xiàn)了一種高效且靈活的全棧Web開(kāi)發(fā)體驗(yàn)：

• 編譯器：：Remix的核心在于其編譯器，通過(guò)執(zhí)行如remix vite:build的命令，Remix能夠生成服務(wù)器端HTTP處理程序、瀏覽器版本和資產(chǎn)清單。這些生成物可直接部署至任何支持JavaScript的托管服務(wù)，極大地簡(jiǎn)化了部署流程。
• 服務(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ú)縫切換，通過(guò)轉(zhuǎn)換服務(wù)器的請(qǐng)求/響應(yīng)API至Fetch API，確保了跨平臺(tái)的兼容性。
• 服務(wù)端框架：Remix借鑒了傳統(tǒng)服務(wù)器端MVC框架的設(shè)計(jì)思路，但更側(cè)重于UI的呈現(xiàn)。其路由模塊不僅承擔(dān)了視圖和控制器的角色，還提供了loader（用于數(shù)據(jù)加載）、action（處理POST等請(qǐng)求）和default（組件）導(dǎo)出，使得開(kāi)發(fā)者能夠更高效地組織和管理代碼。
• 瀏覽器框架：在瀏覽器端，Remix利用JavaScript模塊實(shí)現(xiàn)頁(yè)面的“水合”，確保了頁(yè)面的快速更新和出色的性能。同時(shí)，Remix提供了客戶端導(dǎo)航優(yōu)化，通過(guò)預(yù)取頁(yè)面資源等方式，極大地提升了用戶體驗(yàn)。此外，Remix的客戶端API也為開(kāi)發(fā)者提供了豐富的用戶體驗(yàn)改進(jìn)手段，如表單提交時(shí)禁用按鈕、顯示動(dòng)畫(huà)驗(yàn)證消息等。

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

Refine

最初于 2021 年 4 月發(fā)布，目前在 Github 上有 23.9k Star。

圖片

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

圖片

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

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

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

Nue

Nue 最初于 2023 年 9 月發(fā)布，目前在 Github 上有 5.7k Star。

圖片

Nue.js 是一款采用內(nèi)容優(yōu)先開(kāi)發(fā)模型的 Web 框架，它使網(wǎng)站內(nèi)容編輯和創(chuàng)建更加優(yōu)化，通過(guò)簡(jiǎn)單的語(yǔ)法和關(guān)注點(diǎn)分離，減少了構(gòu)建同樣功能的代碼量，從而提高了開(kāi)發(fā)效率。Nue.js 的創(chuàng)作者 Tero Piirainen 表示，Nue.js 是 React、Vue、Next.js、Svelte 和 Astro 的替代品。

圖片

Nue.js 表現(xiàn)出極致的性能，通過(guò)加載更少的資源、實(shí)現(xiàn)客戶端的即時(shí)頁(yè)面切換、顯著提升構(gòu)建速度、提供緩存友好的分發(fā)方式以及使用更簡(jiǎn)潔的 CSS 來(lái)構(gòu)建更快的網(wǎng)站。

Nue.js 更加貼近標(biāo)準(zhǔn)，項(xiàng)目比 Next.js 更簡(jiǎn)潔，減少了抽象和學(xué)習(xí)的成本，降低了出錯(cuò)的可能性。它實(shí)現(xiàn)了關(guān)注點(diǎn)分離，為內(nèi)容創(chuàng)作者、UX 開(kāi)發(fā)人員和 JS 開(kāi)發(fā)人員提供了明確的職責(zé)劃分。此外，Nue.js 堅(jiān)持使用經(jīng)久不衰的標(biāo)準(zhǔn)，而非短暫流行的 CSS-in-JS，確保代碼經(jīng)受住時(shí)間的考驗(yàn)。

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

VanJS

VanJS 最初于 2023 年 5 月發(fā)布，目前在 Github 上有 3.4k Star。

圖片

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

圖片

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

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

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

Waku

最初于 2023 年 6 月發(fā)布，目前在 Github 上有 3.7k Star。

圖片

Waku 是一個(gè)輕量級(jí)的 React 框架，設(shè)計(jì)用于加速初創(chuàng)公司和機(jī)構(gòu)開(kāi)發(fā)小型到中型React項(xiàng)目的工作。它適用于構(gòu)建營(yíng)銷網(wǎng)站、輕量級(jí)電商網(wǎng)站和Web應(yīng)用。Waku 的目標(biāo)是在現(xiàn)代 React 服務(wù)端組件時(shí)代帶來(lái)快速的開(kāi)發(fā)者體驗(yàn)，讓React開(kāi)發(fā)再次變得快速。需要注意的是，Waku目前正處于快速發(fā)展階段，一些功能可能還不完善。因此，建議用戶先在非生產(chǎn)項(xiàng)目上進(jìn)行嘗試。

圖片

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