作者 | Bruno Couriol

譯者 | 田橙

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

 }

在 Ripple 中，開發(fā)者通過組件（例如 TodoList、Counter）來構(gòu)建界面。組件本質(zhì)是包含 DOM 表達(dá)式語句的函數(shù)，語法大量借鑒 TypeScript 與 JSX，同時(shí)統(tǒng)一描述界面的標(biāo)記結(jié)構(gòu)（DOM）、樣式（CSS）及交互行為。

界面標(biāo)記以原生語句形式直接表達(dá)，控制流邏輯（例如 if (todos.length > 0)、for (const todo of todos)）可以自然穿插在 JSX 風(fēng)格的結(jié)構(gòu)中。樣式默認(rèn)作用域隔離，僅對當(dāng)前組件生效。組件行為則由事件處理函數(shù)驅(qū)動，并依賴細(xì)粒度響應(yīng)系統(tǒng)，使其能像 Svelte 一樣精確更新真實(shí) DOM，而非重新計(jì)算整個(gè)虛擬 DOM。

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

Gannaway 在 Twitter 上解釋道：

Ripple 的響應(yīng)式系統(tǒng)既不是虛擬 DOM，也不是 signals，而是基于細(xì)粒度、惰性求值的機(jī)制，它更多依賴編譯器而非運(yùn)行時(shí)，實(shí)現(xiàn)上述響應(yīng)式能力。

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

}

Ripple 也允許以 effect 將副作用與狀態(tài)變化關(guān)聯(lián)：

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

Ripple 的目標(biāo)是為 Web 應(yīng)用開發(fā)者帶來更簡單的思維模型和更好的開發(fā)體驗(yàn)。例如，默認(rèn)不必使用 useMemo、CSS 自帶作用域、沒有額外抽象層隔離 DOM 與標(biāo)記。該語言設(shè)計(jì)與編譯器深度協(xié)作，使其能夠更好地理解 TypeScript 類型和響應(yīng)式狀態(tài)結(jié)構(gòu)，為智能補(bǔ)全、錯(cuò)誤檢查和工具鏈打下基礎(chǔ)。Ripple 團(tuán)隊(duì)也在探索在開發(fā)服務(wù)器中直接集成 AI 能力，實(shí)現(xiàn)主動式調(diào)試建議與問題診斷。

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

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

聲明：本文為 InfoQ 翻譯，未經(jīng)許可禁止轉(zhuǎn)載。