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