前端框架大洗牌！Qwik顛覆傳統(tǒng)，實(shí)現(xiàn)近零 JS 啟動；SolidJS以細(xì)粒度響應(yīng)式和極小體積著稱；SvelteKit編譯時優(yōu)化，提升全棧開發(fā)效率；Fresh原生支持 Deno，為邊緣計算而生。告別 React 一家獨(dú)大，選擇更適合團(tuán)隊的云原生框架！

譯自：JavaScript Framework Reality Check: What's Actually Working^[1]

作者：Alexander T Williams

在 JavaScript^[2] 生態(tài)系統(tǒng)中，存在著一種奇特的能量。它既有興奮，也有疲憊。每個月都有新的框架承諾更好的開發(fā)者體驗(yàn)、更小的包或更優(yōu)雅的 SSR（服務(wù)器端渲染）。但在 GitHub 的點(diǎn)贊和會議演講之間，問題依然存在：哪些框架真正在生產(chǎn)中使用？它們真的更好嗎？

我們已經(jīng)過了追逐最新工具的新鮮勁兒。今天的開發(fā)者會提出更尖銳的問題：它的擴(kuò)展性如何？生態(tài)系統(tǒng)是否穩(wěn)定？從長遠(yuǎn)來看，這些權(quán)衡是否值得？新興框架不僅面臨著創(chuàng)新的考驗(yàn)，還面臨著業(yè)務(wù)需求的嚴(yán)峻現(xiàn)實(shí)^[3]、長期開發(fā)者體驗(yàn)和遺留代碼集成。

因此，讓我們超越喧囂，清晰地審視一下 2024 年引起關(guān)注的框架。不是為了對它們進(jìn)行排名，也不是為了選出贏家，而是為了評估它們在最重要的地方——大規(guī)模交付代碼的團(tuán)隊中——所產(chǎn)生的實(shí)際影響。

Qwik：反 JavaScript 的 JavaScript 框架

Qwik^[4]，來自 Angular 的創(chuàng)建者 (Misko Hevery^[5])，它不僅僅是優(yōu)化性能，而是徹底地重新思考了范例。核心思想是？可恢復(fù)性。Qwik 不是水合，而是允許應(yīng)用程序從服務(wù)器停止的地方繼續(xù)運(yùn)行^[6]，將應(yīng)用程序狀態(tài)序列化到 HTML 有效負(fù)載中，并避免冗余的 JS 執(zhí)行。在實(shí)踐中，Qwik 實(shí)現(xiàn)了接近零 JavaScript 啟動，使其成為內(nèi)容豐富的網(wǎng)站和大型電子商務(wù)平臺的引人注目的選擇。事實(shí)證明，預(yù)先發(fā)送幾乎沒有 JS，并逐步加載交互性，這不僅僅是理想主義，而是切實(shí)的 UX 勝利。

但是，Qwik 也引入了新的思維模式^[7]，這可能會讓人感到不適應(yīng)。細(xì)粒度的加載、自定義語法以及圍繞可恢復(fù)性構(gòu)建應(yīng)用程序的需求，即使是經(jīng)驗(yàn)豐富的開發(fā)人員也可能會感到挑戰(zhàn)。工具正在改進(jìn)，但入門仍然很陡峭。

盡管如此，對于追求 SEO、time-to-interactive 和移動優(yōu)先性能的團(tuán)隊來說，Qwik 不是一種新奇事物，而是一種戰(zhàn)略杠桿。

SolidJS：細(xì)粒度的響應(yīng)式，最小的膨脹

SolidJS^[8] 通常被描述為“更換了內(nèi)臟的 React”，雖然 JSX 和組件感覺很熟悉，但在底層，它是一種完全不同的野獸。

它的獨(dú)特之處在于細(xì)粒度的響應(yīng)式。Solid 不是 VDOM^[9] 差異，而是使用真正的依賴跟蹤^[10]。這使其具有極快的更新速度、更少的重新渲染和令人震驚的小包。

在現(xiàn)實(shí)世界中，Solid 正在成為交互式儀表板、嵌入式小部件和需要微秒級響應(yīng)的應(yīng)用程序的首選——例如構(gòu)建文檔查看器^[11]和其他需要快速 UX 的交互式體驗(yàn)。

但是，Solid 并沒有試圖在企業(yè)規(guī)模上取代 React——至少目前還沒有^[12]。雖然它具有開發(fā)工具和 SSR 支持，但生態(tài)系統(tǒng)還很年輕，并且你在 React 中認(rèn)為理所當(dāng)然的一些抽象（如上下文 API、路由，甚至表單）可能需要第三方庫或自定義連接。

對于性能至關(guān)重要的獨(dú)立開發(fā)者和初創(chuàng)公司來說，SolidJS 不僅僅是一種好奇心。它是實(shí)現(xiàn)精益、響應(yīng)式 UI 而無需 React 開銷的可行途徑。

SvelteKit：從玩具到工具箱

Svelte^[13] 的理念一直是激進(jìn)的：編譯掉框架。SvelteKit 將這種理念帶入了全棧領(lǐng)域^[14]。SSR、基于文件的路由、部署目標(biāo)適配器——應(yīng)有盡有。但它真正閃光的地方在于 DX：零配置、第一方工具和高度可讀的語法。

但是，SvelteKit 的突出之處^[15]在于你可以移動的速度。開發(fā)服務(wù)器速度很快，熱重載很清晰，動畫和過渡也很容易實(shí)現(xiàn)。對于推動頻繁更新的機(jī)構(gòu)和小型團(tuán)隊來說，這可以顯著降低認(rèn)知負(fù)荷。

也就是說，隨著項(xiàng)目規(guī)模的擴(kuò)大，SvelteKit 的一些決策可能會受到限制。TypeScript 支持很好但并不完美^[16]。一些運(yùn)行時錯誤的信息量較少。與 React 強(qiáng)大的生態(tài)系統(tǒng)相比，您可能會發(fā)現(xiàn)自己需要從頭開始構(gòu)建更多內(nèi)容。

然而，越來越多的中型團(tuán)隊正在押注 SvelteKit，因?yàn)樗哂芯o密的集成和開發(fā)者人體工程學(xué)。它不再只是一個周末項(xiàng)目工具，而是在生產(chǎn)中證明了自己。

Fresh：Deno 的 Edge-Native 挑戰(zhàn)者

Fresh^[17]是 Deno 生態(tài)系統(tǒng)的旗艦框架，正在悄然掀起波瀾。它默認(rèn)圍繞零 JavaScript 構(gòu)建，并為邊緣部署量身定制，帶來了一種超越傳統(tǒng) SPA^[18] 思想的視角。

Fresh 利用基于島嶼的架構(gòu)來實(shí)現(xiàn)選擇性交互^[19]，推送服務(wù)器渲染的 HTML，同時僅將所需內(nèi)容發(fā)送到客戶端。對于性能純粹主義者來說，這是黃金。結(jié)合 Deno 的現(xiàn)代運(yùn)行時——原生 TypeScript、安全沙箱和一流的 ES 模塊支持——Fresh 被定位為以 Node 為中心的堆棧的全新替代方案。

問題是？您正在提交給 Deno 運(yùn)行時。這意味著更小的生態(tài)系統(tǒng)、不太成熟的工具和偶爾的兼容性問題。但對于邊緣優(yōu)先的應(yīng)用程序，尤其是那些部署在 Deno Deploy 或 Cloudflare Workers 上的應(yīng)用程序^[20]，F(xiàn)resh 可以顯著簡化架構(gòu)并提高速度。

它并不適合每個團(tuán)隊，但它預(yù)示著全棧 JavaScript 可能的發(fā)展方向：更快、更小、更靠近邊緣。

框架炒作周期正在改變

我們過去常常純粹依靠創(chuàng)新來駕馭炒作浪潮。這里一個小一點(diǎn)的包，那里一個新的生命周期鉤子。但現(xiàn)在，開發(fā)人員正在提出更嚴(yán)峻、更成熟的問題：

? 這個框架有多穩(wěn)定？

? 這個堆棧的招聘情況如何？

? 是否有真正的公司在使用它，還是只是 GitHub 游樂場？

這就是關(guān)鍵所在。采用不僅僅是關(guān)于性能指標(biāo)——而是關(guān)于框架在團(tuán)隊環(huán)境中的可維護(hù)性、可教性和可擴(kuò)展性。

Qwik、SolidJS、SvelteKit 和 Fresh 各自以不同的方式解決這些問題。Qwik 加倍關(guān)注性能，即使它重塑了您的思維模式。SolidJS 優(yōu)化了反應(yīng)性，但依賴于熟悉的語法。SvelteKit 押注于樂趣和簡單性，以抽象深度為代價簡化了全棧應(yīng)用程序。Fresh 完全針對新的運(yùn)行時，無需傳統(tǒng)的膨脹即可實(shí)現(xiàn)邊緣原生應(yīng)用程序。

沒有什么是萬能的。但它們都標(biāo)志著一種轉(zhuǎn)變：框架不再只是開發(fā)人員的玩具^[21]。它們是影響速度、招聘、入職和產(chǎn)品迭代的架構(gòu)決策。

開發(fā)人員真正選擇的是什么

在實(shí)踐中，大多數(shù)團(tuán)隊仍然默認(rèn)使用 React。生態(tài)系統(tǒng)的慣性很強(qiáng)——招聘更容易，文檔很豐富，并且第三方集成經(jīng)過了實(shí)戰(zhàn)檢驗(yàn)。

但有動靜。

具有對性能有嚴(yán)格要求的初創(chuàng)公司正在選擇 SolidJS^[22]。專注于快速交付的機(jī)構(gòu)正在傾向于 SvelteKit。內(nèi)容平臺和 SEO 繁重的應(yīng)用程序正在試驗(yàn) Qwik。以邊緣為中心的應(yīng)用程序越來越多地認(rèn)真考慮 Fresh。

這些不是副項(xiàng)目。它們是打破 React 單一文化的深思熟慮的決定。它們正在產(chǎn)生可衡量的結(jié)果——更快的加載時間、更快樂的開發(fā)人員和更簡單的代碼庫。

結(jié)論：真正的考驗(yàn)是時間

框架的勝出不是因?yàn)榛鶞?zhǔn)測試。它們之所以勝出，是因?yàn)檎嬲娜藗兛梢栽诟偻纯嗟那闆r下隨著時間的推移構(gòu)建真正的東西。新興框架的實(shí)際影響不是在 Hello World 應(yīng)用程序中衡量的，而是在代碼審查、錯誤票證、速度指標(biāo)和事后分析中感受到的。

React 不會消失。挑戰(zhàn)者也不會。在 2024 年，我們看到了十多年來最強(qiáng)大的可行替代方案浪潮。不是因?yàn)樗鼈兏W亮，而是因?yàn)樗鼈冋诮鉀Q實(shí)際的、有形的問題。

炒作很有趣。但重要的是您的團(tuán)隊是否可以更快地構(gòu)建、更長時間地維護(hù)和更清潔地擴(kuò)展。這是真正的考驗(yàn)。新興框架正開始通過這一考驗(yàn)。

未來不是選擇贏家。而是選擇合適的工具來完成工作——并知道何時轉(zhuǎn)換方向。

引用鏈接

[1] JavaScript Framework Reality Check: What's Actually Working:https://thenewstack.io/javascript-framework-reality-check-whats-actually-working/

[2]JavaScript:https://thenewstack.io/javascript/

[3]面臨著業(yè)務(wù)需求的嚴(yán)峻現(xiàn)實(shí):https://thenewstack.io/frontend-strategies-frameworks-or-pure-javascript/

[4]Qwik:https://qwik.dev/

[5]Misko Hevery:https://www.linkedin.com/in/misko-hevery-3883b1/

[6]允許應(yīng)用程序從服務(wù)器停止的地方繼續(xù)運(yùn)行:https://thenewstack.io/take-a-qwik-break-from-react-with-astro/[7]Qwik 也引入了新的思維模式:https://www.builder.io/blog/qwik-next-leap

[8]SolidJS:https://www.solidjs.com/

[9]VDOM:https://www.sanity.io/glossary/virtual-dom

[10]使用真正的依賴跟蹤:https://www.solidjs.com/guides/comparison

[11]構(gòu)建文檔查看器:https://www.atlantic.net/gpu-server-hosting/

[12]Solid 并沒有試圖在企業(yè)規(guī)模上取代 React——至少目前還沒有:https://www.toptal.com/react/solidjs-vs-react[13]Svelte:https://thenewstack.io/youll-write-less-code-with-svelte-5-0-promises-rich-harris/

[14]SvelteKit 將這種理念帶入了全棧領(lǐng)域:https://cprimozic.net/blog/trying-out-sveltekit/

[15]SvelteKit 的突出之處:https://thenewstack.io/rich-harris-talks-sveltekit-and-whats-next-for-svelte/

[16]很好但并不完美:https://svelte.dev/docs/typescript

[17]Fresh:https://thenewstack.io/denos-fresh-uses-server-side-rendering-for-faster-apps/

[18]SPA:https://thenewstack.io/spas-and-react-you-dont-always-need-server-side-rendering/

[19]利用基于島嶼的架構(gòu)來實(shí)現(xiàn)選擇性交互:https://fresh.deno.dev/docs/concepts/islands

[20]尤其是那些部署在 Deno Deploy 或 Cloudflare Workers 上的應(yīng)用程序:https://docs.deno.com/examples/cloudflare_workers_tutorial/

[21]框架不再只是開發(fā)人員的玩具:https://www.spicyweb.dev/the-great-gaslighting-of-the-js-age/

[22]正在選擇 SolidJS:https://thenewstack.io/solidjs-creator-on-confronting-web-framework-complexity/