# React and Svelte had a secret love child…

Source: https://www.youtube.com/watch?v=IIj9UWpvSFI
Recap page: https://rapidrecap.app/video/IIj9UWpvSFI
Generated: 2025-11-06T18:32:44.811+00:00

---
## Quick Overview

The video explains that the new TypeScript UI framework, Ripple, created by Dominic Gannaway (former React and Svelte core team member), blends the clarity of specs (like SolidJS) with the syntax familiarity of React/JSX, using compiler-driven rendering and fine-grained reactivity via the 'track' function to offer a performance-focused alternative to existing frameworks.

**Key Points:**
- Dominic Gannaway, ex-React and Svelte core team member, created Ripple, a new compiler-driven TypeScript UI framework.
- Ripple uses a JSX-like syntax but allows statements (like if/for loops) directly in templates, unlike JSX expressions.
- Reactivity in Ripple is built-in using the 'track' function to create values that automatically update when changed.
- The video compares Ripple's approach to the "spec-driven development" methodology, balancing the flow of "vibe coding" with the clarity of specifications.
- Ripple incorporates strong tooling support, including full TypeScript integration, VSCode support, ESLint, and Prettier integration.
- The framework aims for fine-grained rendering performance, bundle size, and memory usage comparable to or better than industry leaders like React.

![Screenshot at 0:55: The introduction of the Ripple UI framework on its landing page, showcasing its logo and some example code, framed by shocked Wojak memes to emphasize its novelty and potential impact.](https://ss.rapidrecap.app/screens/IIj9UWpvSFI/00-00-55.png)

**Context:** The video discusses the landscape of modern JavaScript UI frameworks, referencing the 'JavaScript fatigue' phenomenon where developers face an overwhelming number of choices (React, Vue, Svelte, etc.). It positions Ripple, a new framework by Dominic Gannaway, as a potential solution that attempts to reconcile desirable features from established libraries like React (familiar syntax) and SolidJS (fine-grained reactivity) by leveraging TypeScript and a compiler-driven approach.

## Detailed Analysis

The video introduces Ripple, a new compiler-driven TypeScript UI framework developed by Dominic Gannaway, who previously worked on React and Svelte. Gannaway's career trajectory is humorously presented, showing his shift from React to Svelte and now to this new creation, which he claims is a cure for JavaScript fatigue. Ripple is described as a "compiler-driven view library" and a "Superset of JSX," leveraging TypeScript. Its syntax is similar to JSX, but it allows control flow statements (like 'if' and 'for') directly within the template, unlike the expression-only structure of JSX. Reactivity is handled via an imported 'track' function, which creates reactive values that update components surgically when changed, enabling fine-grained rendering. The video also highlights Ripple's strong tooling, including native CSS scoping via the '<style>' element, full TypeScript support, and integration with ESLint and Prettier. The methodology behind Ripple is framed as "Spec-Driven Development," finding the intersection between the "flow of vibe coding" and the "clarity of specs."

### Developer Context

- Dominic Gannaway's career trajectory shown moving from React (2016) to Svelte (2023)
- Gannaway's move to Svelte/Vercel is framed as reacting to React 'sucking'.

### Ripple Introduction

- Ripple is a new compiler-driven TypeScript UI library
- It is presented as a superset of JSX offering fine-grained rendering and performance.

### Syntax and Control Flow

- Ripple uses JSX-like syntax but permits control flow statements (if, for) directly in templates, unlike standard JSX expressions
- Reactivity uses a 'track' function for state management.

### Key Features

- Built-in reactivity with 'track' function
- Component-based architecture
- Native control flow (if, for, try) in templates
- Component-local CSS scoped via '<style>' elements
- Full TypeScript, ESLint, and Prettier support.

### Development Methodology

- Ripple embodies "Spec-Driven Development," balancing the 'flow of vibe coding' with the 'clarity of specs'
- Kiro, an AI IDE sponsored by AWS, is shown assisting in generating requirements and design documents for a new feature.

![Screenshot at 0:01: An older couple enjoying an outdoor moment, setting a nostalgic, pre-modern context contrasted with later tech topics.](https://ss.rapidrecap.app/screens/IIj9UWpvSFI/00-00-01.png)
![Screenshot at 0:03: Meme showing people at Area 51 protest with a "CLAP ALIEN CHEEKS" sign, symbolizing the chaotic or humorous side of current trends.](https://ss.rapidrecap.app/screens/IIj9UWpvSFI/00-00-03.png)
![Screenshot at 0:11: Visual representation of learning Backbone.js leading to a six-figure job, contrasting with current developer burnout.](https://ss.rapidrecap.app/screens/IIj9UWpvSFI/00-00-11.png)
![Screenshot at 0:38: A collage of numerous JavaScript frameworks \(React, Svelte, Angular, Vue, Ember, etc.\) overlaid with a large "PLEASE STOP" text, illustrating JavaScript fatigue.](https://ss.rapidrecap.app/screens/IIj9UWpvSFI/00-00-38.png)
![Screenshot at 0:55: The official landing page for Ripple, highlighting its name and tagline, "the elegant TypeScript UI Framework," surrounded by shocked meme faces.](https://ss.rapidrecap.app/screens/IIj9UWpvSFI/00-00-55.png)
![Screenshot at 1:20: Inferno JS homepage from 2016 burning in flames, representing older, potentially superseded technologies.](https://ss.rapidrecap.app/screens/IIj9UWpvSFI/00-01-20.png)
![Screenshot at 1:34: Mark Zuckerberg's surprised/disappointed face next to Dominic Gannaway's 2016 tweet about joining the React team, implying later dissatisfaction.](https://ss.rapidrecap.app/screens/IIj9UWpvSFI/00-01-34.png)
![Screenshot at 2:02: Ripple code example showing the use of the 'component' keyword and JSX-like syntax with an emoji pointing out the structure.](https://ss.rapidrecap.app/screens/IIj9UWpvSFI/00-02-02.png)
![Screenshot at 2:28: Ripple code snippet demonstrating the use of the '@' symbol \(e.g., '@count % 2 == 0'\) for conditional rendering statements directly in the template.](https://ss.rapidrecap.app/screens/IIj9UWpvSFI/00-02-28.png)
![Screenshot at 2:52: The Kiro AI IDE interface, showing its chat panel and file explorer, illustrating the AI-assisted development workflow being discussed.](https://ss.rapidrecap.app/screens/IIj9UWpvSFI/00-02-52.png)