New Front-End Framework Ripple Blends React and Svelte Together

"Ripple is a new open-source front-end framework taking ideas from React, SolidJS, and Svelte into a TypeScript-first, component-oriented, JSX-like compiled language with fine-grained reactivity and scoped CSS. Created by Svelte maintainer Dominic Gannaway, Ripple offers a reactivity system with automatic dependency tracking, and direct DOM updates without a virtual DOM. Ripple aims to support better debugging through AI agents. The following code sample exemplifies many of the core Ripple features:"

"The user interface markup is directly expressed as statements with natural interleaving of control flow (e.g., if (todos.length > 0), for (const todo of todos)) and JSX markup. Styles are scoped to the component. Behavior is driven by event handlers leveraging a fine-grained reactivity system that, as Svelte does, surgically updates the real DOM (vs. recomputing the component's entire virtual DOM markup) in response to changes to independent and computed variables."

"The track primitive describes an independent variable (e.g., count) whose value is obtained with the @ operator. Computed variables can express their dependencies to independent variables (e.g., let double = track(() => @count * 2);). Ripple's reactive system ensures that computed variables are kept in sync with their dependencies. Ripple's reactive system also ensures that DOM elements' state is kept in sync with their dependencies (e.g., clicking the button will increment count, which will in turn update the textContent property of both paragraphs)."

Ripple is an open-source, TypeScript-first front-end framework that combines ideas from React, SolidJS, and Svelte into a component-oriented, JSX-like compiled language. Components are functions that contain DOM expressions as statements, interleaving control flow and JSX, with scoped component CSS. Ripple uses a fine-grained reactivity system with automatic dependency tracking and a track primitive for independent variables; computed variables express dependencies and stay synchronized. The system updates the real DOM surgically without a virtual DOM. Event handlers drive behavior, and Ripple aims to support improved debugging through AI agents.

Read at InfoQ