Ripple – ein elegantes TypeScript-UI-Framework

• Ein typsicheres UI-Framework, das die Stärken von React, Solid und Svelte vereint und Komponenten mit einem JS/TS-first-Design sowie einer eigenen Modulsprache auf Basis von .ripple erstellt
• Setzt auf reaktive Variablen/Properties mit dem Präfix $, JSX-ähnliche Templates und feingranulares Rendering, um hohe Performance und Speichereffizienz zu erreichen
• Bietet eine VS Code-Erweiterung, Prettier und TypeScript-Integration und umfasst moderne DX wie reaktive Arrays, Maps und Sets, effect-basierte Side Effects sowie Dekoratoren (@use)
• Derzeit in einer frühen Alpha-Phase mit Einschränkungen wie fehlendem SSR und unvollständigen Typen; offen veröffentlicht zum Experimentieren mit Ideen und zum Teilen von Feedback
• Baut auf einer ähnlichen Philosophie wie die signalbasierte Runtime von Svelte 5 auf und zeigt mit seinem JS/TS-first-Ansatz und einer LLM-freundlichen Syntax, wohin sich Frontend-Frameworks entwickeln könnten

---

What is Ripple?

• Ripple ist ein von React, Solid und Svelte inspiriertes TypeScript-first-UI-Framework, das auf einer Superset-Sprache mit der eigenen Erweiterung .ripple aufbaut
  • Mit einer Syntax, die gut zu JSX passt, werden Templates nur innerhalb des Komponentenrumpfs verwendet; statt eines Rückgabeausdrucks (JSX-Return) setzt Ripple auf statement-basierte Templates
  • Der Autor hat die Ideen auf Basis seiner Erfahrungen mit Inferno, React Hooks, Lexical, Svelte 5 und anderen in experimenteller Form umgesetzt
• Aktuell befindet sich das Projekt in einer frühen Entwicklungsphase mit vielen Bugs und TODOs und wird nicht für den Produktionseinsatz empfohlen
  • Ziel ist das Teilen und Inkubieren von Ideen sowie die Erkundung, wie sie in andere Frameworks zurückfließen könnten
  • Es ist ein Versuch, die Hypothese zu prüfen, dass ein JS/TS-first-Design sowohl Menschen als auch LLMs eine gute DX bietet

Features

• Reactive State Management: Reaktivität für Variablen und Objekt-Properties mit dem Präfix $; auch abgeleitete Werte lassen sich natürlich als $-Variablen ausdrücken
• Component-Based Architecture: Explizite Komponentendeklaration mit dem Schlüsselwort component, Unterstützung für props/children und Kombination mit JSX-ähnlichen Templates
• Performance: Feingranulares Rendering zielt auf branchenführende Performance und Speichereffizienz
• Tooling: TypeScript-Integration, VS Code-IntelliSense/Diagnosen/Highlighting sowie Unterstützung für Prettier-Formatierung
• Verbesserte DX: JS/TS-first-Philosophie, LLM-freundliche Syntax und eine SPA-first-Struktur

Missing Features

• Kein SSR: Aktuell nur für SPA, an SSR wurde bisher noch nicht gearbeitet
• Unvollständige Typen: Die Typdefinitionen in der Codebasis sind noch begrenzt und sollen verbessert werden

Getting Started / Try Ripple

• Das Basistemplate kann in StackBlitz geöffnet oder mit degit geklont und dann über den Vite-Entwicklungsserver ausgeführt werden
  • Beispielablauf: npx degit trueadm/ripple/templates/basic my-app → npm i → npm run dev
• Ein Online-Playground ist geplant; lokales Experimentieren ist bereits über den Ordner playground im Repository möglich

VSCode Extension

• Es gibt die Erweiterung Ripple for VS Code mit Syntax-Highlighting, Live-Diagnosen, TS-Integration und Autovervollständigung (IntelliSense) für .ripple-Dateien
• Es werden Links sowohl zur Marketplace-Version als auch zum .vsix-Paket für die manuelle Installation bereitgestellt

Mounting your app

• Im Einstiegspunkt wird das Einhängen der Root-Komponente in der Form mount(App, { props, target }) unterstützt
  • Eine schlanke API erlaubt es, mit target einen DOM-Knoten festzulegen und über props anfängliche Eigenschaften zu injizieren

Key Concepts

• Components
  • Mit dem Schlüsselwort component werden deklarative Komponenten mit funktionsähnlicher Signatur definiert; JSX-ähnliche Templates werden direkt im Komponentenrumpf beschrieben
  • Unterstützt werden Kurzschreibweisen für Properties ({onClick}), Spread ({...props}) und andere vertraute Syntaxelemente
• Reactive Variables
  • Variablen und Properties mit dem Präfix $ sind automatisch reaktiv; Inkrementieren oder Zuweisen allein löst ein Re-Rendering aus
  • Abgeleiteter State wird mit intuitiver Schreibweise wie $double = $count * 2 deklariert; auch verkettete Ableitungen sind möglich
  • Mit untrack lässt sich in bestimmten Bereichen wie der Initialisierung die Ausbreitung von Reaktivität unterbinden
  • Auf globaler Ebene bzw. auf Modulebene sind reaktive Variablen verboten; sie müssen immer in einem aktiven Komponenten-Kontext erzeugt werden
• Transporting Reactivity
  • Durch das Wrappen von Arrays und Objekten lässt sich Reaktivität über Grenzen hinweg transportieren, wodurch Komposition und Koexistenz möglich werden
  • Empfohlen wird ein Muster, bei dem Factory-Funktionen $-Werte annehmen, intern Ableitungen/effect erzeugen und dann erneut $-Werte zurückgeben
• Reactive Arrays / Set / Map
  • RippleArray/Set/Map sind reaktive Collections, die Standard-Collections erweitern; auf Länge bzw. Größe muss über $length/$size zugegriffen werden, damit es reaktiv bleibt
  • Methodenergebnisse können direkt verwendet oder wie bei $has reaktiven Variablen zugewiesen und dann im Template genutzt werden
• Effects
  • Mit effect(() => { ... }) werden Side Effects deklariert, die bei Änderungen abhängiger $-Werte ausgeführt werden; das Tracking erfolgt automatisch
• Control flow
  • Templates sind nur innerhalb des Komponentenrumpfs erlaubt; normale Funktionen oder Variablenzuweisungen geben JSX nicht direkt zurück
  • Innerhalb von Templates sind Variablendeklarationen, Funktionsaufrufe und debugger erlaubt; der Kontrollfluss ist statement-zentriert
  • String-Literale werden explizit als { "…" } geschrieben, um sie von Code zu unterscheiden
• If / For / Try statements
  • if/else kann innerhalb von Template-Blöcken verwendet werden, um gut lesbare Kontrollflüsse zu bilden
  • for...of unterstützt das Rendern von Collections in einer knappen Form ohne key-Prop
  • Mit try/catch lassen sich Error Boundaries (Fallback-UI) aufbauen; in catch kann nach Logging/Reporting eine alternative UI gerendert werden
• Props
  • Reaktive Props verwenden das Präfix $; auch DOM-Attribute wie $class und $id müssen das Präfix tragen, damit reaktive Updates funktionieren
• Children
  • Es gibt einen impliziten $children-Komponenten-Slot; mit <$children /> lässt sich Komposition umsetzen
  • Auch explizite Slot-Komponenten können deklariert werden, was Lesbarkeit und Kontrolle verbessert
• Events
  • Unterstützt wird eine React-ähnliche Event-API (onClick, onKeyDown, …Capture); einige Events sind per Delegation optimiert
• Decorators
  • Mit der Dekorator-Syntax {@use fn} lässt sich eine Referenz auf den echten DOM-Knoten erhalten und es können Mount-/Unmount-Hooks zurückgegeben werden
  • Unterstützt werden Muster zur Weitergabe reaktiver Werte über Inline-Funktionen/Factorys sowie deren Weitergabe an zusammengesetzte Komponenten
• Styling
  • Lokal gescoptes CSS einer Komponente wird in einem Top-Level-Block <style> geschrieben und bietet gekapseltes Styling
• Context
  • Mit createContext lassen sich Werte im Komponentenbaum teilen; get/set ist nur innerhalb von Komponenten erlaubt, was die Vorhersagbarkeit erhöht

Playground

• Nach dem Klonen des Repos kann mit pnpm i && cd playground && pnpm dev ein lokaler Playground gestartet werden
  • Mit dem Vite-Plugin lassen sich in playground/src bequem Experimente mit der .ripple-Syntax durchführen

Why it matters

• JS/TS-first, statement-basierte Templates und $-präfixierte Reaktivität sind ein Experiment, das zugleich LLM-freundliche Code-Strukturen sowie Lesbarkeit und einfache statische Analyse anstrebt
• Die Kombination aus feingranularem Rendering, Reaktivität für Collections und DOM-Hooking über Dekoratoren ist ein Versuch, mikrooptimierte Performance und DX zusammenzubringen
• Obwohl sich Ripple noch in der Alpha-Phase befindet, liefert es durch die Gegenüberstellung des signalbasierten Ansatzes von Svelte 5 mit der Developer Experience des React-Ökosystems interessante Anhaltspunkte für das Design der nächsten Framework-Generation

[aabb2467]

Scheint gut zu sein, aber irgendwie auch nicht.

[ng0301]

Irgendwie hat es für mich stark dieses Svelte-Gefühl.
Am Ende landet man dann nach einigen Umwegen vielleicht doch wieder bei etwas React-Ähnlichem, haha

[click]

Es scheint einen Trend zu geben, dass alle neuen Frameworks eher meiden, weil die Menge an Material, mit dem die AI trainiert wurde, zu gering ist.
Ich denke, Svelte hat gerade noch den letzten Zug erwischt. Sogar bei Svelte ist es problematisch, weil es ohne gut formulierte Prompts ständig ohne rune auskommen will und stattdessen mit der $-Syntax ankommt.