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 翻译，未经许可禁止转载。