Svelte 團隊成員開源新框架 Ripple，又一個想“改寫前端”的框架？

作者 | Bruno Couriol

譯者 | 田橙

Ripple 是一款全新的開源前端框架，融合了 React、SolidJS 和 Svelte 的理念，采用 TypeScript 優先的設計思路，以組件為中心，并提供類似 JSX 的編譯式語言、細粒度響應式機制以及作用域 CSS。該框架由 Svelte 核心維護者 Dominic Gannaway 打造，其響應式系統支持自動依賴追蹤，無需虛擬 DOM 即可直接更新 DOM 節點，同時計劃通過 AI 智能代理為開發者提供更高效的調試能力。

 }

在 Ripple 中，開發者通過組件（例如 TodoList、Counter）來構建界面。組件本質是包含 DOM 表達式語句的函數，語法大量借鑒 TypeScript 與 JSX，同時統一描述界面的標記結構（DOM）、樣式（CSS）及交互行為。

界面標記以原生語句形式直接表達，控制流邏輯（例如 if (todos.length > 0)、for (const todo of todos)）可以自然穿插在 JSX 風格的結構中。樣式默認作用域隔離，僅對當前組件生效。組件行為則由事件處理函數驅動，并依賴細粒度響應系統，使其能像 Svelte 一樣精確更新真實 DOM，而非重新計算整個虛擬 DOM。

track 原語用于定義獨立響應式變量（如 count），其值通過 @ 運算符讀取。計算型響應式變量（如 double）可通過 track(() => @count * 2) 聲明依賴關系。Ripple 的響應系統會確保這些變量始終保持同步。同時，它也保證 DOM 元素的狀態隨依賴變化自動更新。例如，點擊按鈕會讓 count 自增，從而同步更新段落中的文本內容。

Gannaway 在 Twitter 上解釋道：

Ripple 的響應式系統既不是虛擬 DOM，也不是 signals，而是基于細粒度、惰性求值的機制，它更多依賴編譯器而非運行時，實現上述響應式能力。

Ripple 雖然不支持全局狀態，但支持 Context，用于在組件間共享必要的應用狀態。不過，Context 只能在其閉包范圍內的組件使用，并且只能在組件上下文中讀寫，不能在事件處理器中進行讀寫操作。

}

Ripple 也允許以 effect 將副作用與狀態變化關聯：

@count++}>{'Increment'} }

Ripple 的目標是為 Web 應用開發者帶來更簡單的思維模型和更好的開發體驗。例如，默認不必使用 useMemo、CSS 自帶作用域、沒有額外抽象層隔離 DOM 與標記。該語言設計與編譯器深度協作，使其能夠更好地理解 TypeScript 類型和響應式狀態結構，為智能補全、錯誤檢查和工具鏈打下基礎。Ripple 團隊也在探索在開發服務器中直接集成 AI 能力，實現主動式調試建議與問題診斷。

Ripple 由 Dominic Gannaway 創建，他曾在 Meta 參與 React Hooks 開發，創建富文本編輯器框架 Lexical，編寫過輕量級框架 Inferno，并是 Svelte 5 核心團隊成員。雖然 Ripple 已經存在數年，但最近才以 MIT 許可正式開源。目前框架仍處于早期階段，歡迎社區貢獻，并應遵循其貢獻指南。

https://www.infoq.com/news/2025/12/ripple-front-end-framework-open/

聲明：本文為 InfoQ 翻譯，未經許可禁止轉載。