Svelte 团队成员开源新框架 Ripple，又一个想“改写前端”的框架？_linux资讯

Svelte 团队成员开源新框架 Ripple，又一个想“改写前端”的框架？

创始人

2025-12-17 10:15:10

0次

作者 | Bruno Couriol

译者 | 田橙

Ripple 是一款全新的开源前端框架，融合了 React、SolidJS 和 Svelte 的理念，采用 Type 优先的设计思路，以组件为中心，并提供类似 JSX 的编译式语言、细粒度响应式机制以及作用域 CSS。该框架由 Svelte 核心维护者 Dominic Gannaway 打造，其响应式系统支持自动依赖追踪，无需虚拟 DOM 即可直接更新 DOM 节点，同时计划通过 AI 智能代理为开发者提供更高效的调试能力。

import{ Button} from'./Button.ripple'; import{ track } from'ripple'; exportcomponent TodoList({ todos, addTodo }: Props) { <divclass="container"> <h2>{'Todo List'} h2> <ul> for (const todo of todos) { <li>{todo.text} li> } ul> if (todos.length > 0) { <p>{todos.length}{" items"} p> } <ButtononClick={addTodo}label={"AddTodo"} /> div> <style> .container{ text-align: center; font-family: "Arial", sans-serif; } style> } exportcomponent Counter{ letcount = track( 0); letdouble = track( =>@count* 2); <divclass='counter'> <h2>{'Counter'} h2> <p>{"Count: "}{@count} p> <p>{"Double: "}{@double} p> <ButtononClick={=>@count++} label={'Increment'} /> <ButtononClick={=>@count = 0} label={'Reset'} /> div> }

在 Ripple 中，开发者通过组件（例如 TodoList、Counter）来构建界面。组件本质是包含 DOM 表达式语句的函数，语法大量借鉴 Type 与 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 只能在其闭包范围内的组件使用，并且只能在组件上下文中读写，不能在事件处理器中进行读写操作。

import { Context } from'ripple'; constMyContext = newContext( null); component Child{ // 在子组件中读取 Context constvalue= MyContext. get; console.log( value); // "Hello from context!" } export component Parent{ constvalue= MyContext. get; // 初次读取时尚未设置，回退到初始值 null console.log( value); // 在父组件中设置 Context MyContext. set( "Hello from context!"); }

Ripple 也允许以 effect 将副作用与状态变化关联：

import{ track, effect } from'ripple'; exportcomponent App{ letcount = track( 0); effect( =>{ console. log( @count); }); @count++}>{ 'Increment'} }

Ripple 的目标是为 Web 应用开发者带来更简单的思维模型和更好的开发体验。例如，默认不必使用 useMemo、CSS 自带作用域、没有额外抽象层隔离 DOM 与标记。该语言设计与编译器深度协作，使其能够更好地理解 Type 类型和响应式状态结构，为智能补全、错误检查和工具链打下基础。Ripple 团队也在探索在开发服务器中直接集成 AI 能力，实现主动式调试建议与问题诊断。

Ripple 由 Dominic Gannaway 创建，他曾在 Meta 参与 React Hooks 开发，创建富文本编辑器框架 Lexical，编写过轻量级框架 Inferno，并是 Svelte 5 核心团队成员。虽然 Ripple 已经存在数年，但最近才以 MIT 许可正式开源。目前框架仍处于早期阶段，欢迎社区贡献，并应遵循其贡献指南。

>@count 状态 SolidJS Ripple Svelte todos track 框架组件 TodoList count

上一篇：AI赋能！海珠教育绘就智慧未来新图景

下一篇：DoorDash测试AI应用Zesty 12月17日旧金山纽约公测

Svelte 团队成员开源新框架 Ripple，又一个想“改写前端”的框架？

相关内容

热门资讯