前端又出新玩具了，你知道嗎？
最近，前端圈出現(xiàn)了很多全新的輪子，本文將精選三個(gè)熱門的新輪子，看看它們各自都有什么特點(diǎn)！
實(shí)際上，面對新出現(xiàn)的輪子，我們也不必畏懼。新輪子的出現(xiàn)很大概率是因?yàn)楝F(xiàn)有工具無法滿足個(gè)性化需求，因此才決定開發(fā)新輪子。對于這些新輪子，我們只需保持開放的心態(tài)去了解，也借此機(jī)會洞察前端技術(shù)的發(fā)展趨勢與方向。
TanStack Start
對于有 React 項(xiàng)目開發(fā)經(jīng)驗(yàn)的同學(xué)來說，React Query 或許并不陌生，它隸屬于功能強(qiáng)大的 TanStack 工具系列。TanStack 是一個(gè)全面的前端工具集合，涵蓋了 TanStack Query、TanStack Router、TanStack Table、TanStack Form 及 TanStack Virtual 等多個(gè)實(shí)用工具。
近期，TanStack 又推出了其最新的力作——TanStack Start，這是一個(gè)基于 TanStack Router、Vinxi 和 Vite 的全棧 React 框架。以下是其主要特點(diǎn)：
- 全棧路由：利用 TanStack Router 提供企業(yè)級路由系統(tǒng)，支持全棧類型安全和強(qiáng)大的路由功能。
- 服務(wù)端渲染 (SSR)、流式傳輸和服務(wù)器 RPC：支持全文檔服務(wù)端渲染、流式傳輸、服務(wù)器函數(shù)和遠(yuǎn)程過程調(diào)用 (RPC)，無需在服務(wù)器端渲染和客戶端交互性之間做出選擇。
- 客戶端優(yōu)先，100% 服務(wù)器端能力：在保持前端社區(qū)多年來培養(yǎng)的客戶端應(yīng)用體驗(yàn)的同時(shí)，提供全功能的服務(wù)端能力，不犧牲用戶體驗(yàn)。
- 可部署性：借助 Vinxi 和 Vite，TanStack Start 可以部署在任何可以運(yùn)行 JavaScript 的地方，無論是傳統(tǒng)服務(wù)器、無服務(wù)器平臺還是 CDN，都能輕松構(gòu)建、打包和部署應(yīng)用。
雖然目前官網(wǎng)對 TanStack Start 的介紹并不多，但是已經(jīng)有開源項(xiàng)目的作者認(rèn)為，這才是 React 的未來，并且已經(jīng)將其開源項(xiàng)目從 Next.js 遷移到了 TanStack Start。
該項(xiàng)目在 Github 上有 16k Star，鏈接：https://github.com/learn-anything/learn-anything。
圖片
注意：目前 TanStack Start 仍處于 Alpha 測試階段，不建議在生產(chǎn)環(huán)境使用。
TanStack Start 官網(wǎng)：https://tanstack.com/start/latest。
Brisa
Brisa 是一個(gè)全棧 Web 框架，它允許開發(fā)者混合使用服務(wù)器組件（Server Components）+ 服務(wù)器操作（Server Actions）與 Web Components + 信號（Signals），全部采用 JSX 編寫。
import type { WebContext } from 'brisa';
export default function Counter({ name }: { name: string }, { state }: WebContext) {
const count = state(0);
return (
<p>
<button onClick={() => count.value++}>+</button>
<span> {name} {count.value} </span>
<button onClick={() => count.value--}>-</button>
</p>
)
}Brisa 的特點(diǎn)如下：
- 服務(wù)端渲染（SSR）：頁面入口點(diǎn)在服務(wù)器上渲染并流式傳輸?shù)娇蛻舳耍ㄊ褂寐暶魇?Shadow DOM 進(jìn)行 Web 組件的服務(wù)端渲染。
- 靜態(tài)站點(diǎn)生成：可以在構(gòu)建時(shí)生成靜態(tài)頁面，并與動態(tài)頁面混合。
- 部分預(yù)渲染：可以在構(gòu)建時(shí)預(yù)渲染特定頁面組件，而頁面的其余部分在服務(wù)端渲染。
- 響應(yīng)性：由于信號（Signals）的存在，Web Components 的屬性（props）和狀態(tài)是完全響應(yīng)式的。屬性在構(gòu)建時(shí)被優(yōu)化，因此可以像在 React 等框架中一樣編寫屬性，控制它們的默認(rèn)值、解構(gòu)等，而不會失去響應(yīng)性。
- 功能全面：Brisa 支持 TypeScript、CSS、Tailwind、中間件、API 路由、國際化（路由 + 翻譯）、WebSocket、Suspense、服務(wù)器動作、測試、Tauri 2.x 等。
- 統(tǒng)一工具鏈：除了Brisa外，只需 Bun 來管理所有工具鏈。Brisa通過添加匹配器豐富了Bun的測試功能，并且無需Webpack、Vite，因?yàn)锽un也可以完成這些工作。盡管推薦 Bun 作為運(yùn)行時(shí)，但也可以使用Node.js作為運(yùn)行時(shí)。
- HTML 流式傳輸：Brisa 通過 HTTP 傳輸 HTML，Web Components響應(yīng)其屬性的變化或新的“動作信號”，服務(wù)器動作可以觸發(fā) Web 組件的反應(yīng)，無需服務(wù)器重新渲染。
- 性能優(yōu)化：Brisa 旨在最小化客戶端的 JS 代碼，盡可能利用 Web 平臺，避免不必要的客戶端負(fù)載。
- 國際化：Brisa 提供了與框架完全集成的路由和翻譯，使用 ECMAScript Intl 以及一個(gè)僅在 Web 組件中使用時(shí)才添加到客戶端的 800 字節(jié)實(shí)現(xiàn)。
Github：https://github.com/brisa-build/brisa。
One
One 是一個(gè)基于 React 的跨平臺開發(fā)框架，旨在簡化 Web 和原生應(yīng)用開發(fā)，其特點(diǎn)如下：
- 類型化的文件系統(tǒng)路由：One提供了基于文件系統(tǒng)的路由定義方式，支持嵌套布局和分組，并且完全類型化，增強(qiáng)了開發(fā)時(shí)的類型安全和自動補(bǔ)全功能，使得路由管理更加直觀和高效。
- 靈活的路由模式：One 支持單頁應(yīng)用（SPA）、服務(wù)端渲染（SSR）和靜態(tài)站點(diǎn)生成（SSG）等多種路由模式，允許全局設(shè)置或?yàn)槊總€(gè)頁面單獨(dú)設(shè)置。
- 類型化的加載器：One提供了類型化的加載器，簡化了數(shù)據(jù)的引入和從其他框架遷移的過程。
- 跨平臺開發(fā)：One支持同時(shí)為Web和Native平臺開發(fā)應(yīng)用。
- 完全基于Vite：One完全基于Vite構(gòu)建，摒棄了Metro，使用一個(gè)Vite插件、一個(gè)Vite服務(wù)器和一個(gè)端口來支持三個(gè)平臺（Web、iOS、Android）的開發(fā)。
- 集成Zero數(shù)據(jù)解決方案：One與Zero集成，提供了一個(gè)默認(rèn)的、可彈出的數(shù)據(jù)解決方案，以改善Web開發(fā)中的數(shù)據(jù)管理問題。
- 簡化的代碼：One旨在通過簡化代碼來提高開發(fā)效率和應(yīng)用性能，減少不必要的代碼冗余和復(fù)雜性，讓開發(fā)者能夠更專注于業(yè)務(wù)邏輯的實(shí)現(xiàn)。
- 專注于本地開發(fā)體驗(yàn)：One強(qiáng)調(diào)改善本地開發(fā)體驗(yàn)，通過優(yōu)化開發(fā)工具和流程，使得開發(fā)過程更加直觀、高效和愉悅。
One 由 Tamagui 項(xiàng)目團(tuán)隊(duì)開發(fā)：
Github：https://github.com/onejs/one。
