Ripple : un nouveau framework UI TypeScript à surveiller

Si vous avez passé du temps à vous débattre avec les useMemo, useCallback et les bugs de fermeture obsolète de React, vous connaissez déjà la charge mentale que représente la gestion manuelle de la réactivité. Ripple, un nouveau framework TypeScript créé par Dominic Gannaway (contributeur aux React Hooks, auteur d’Inferno, mainteneur principal de Svelte 5), adopte une approche totalement différente : compiler la réactivité et laisser le framework gérer le reste.

Voici ce qui le rend techniquement intéressant.

Qu’est-ce que le framework UI Ripple ?

Ripple est un framework UI piloté par compilateur construit autour de fichiers .ripple — son propre format de module, distinct de .tsx ou .jsx. Plutôt que de fournir un DOM virtuel et un algorithme de différenciation à l’exécution, le compilateur de Ripple analyse les composants et génère une logique de mise à jour du DOM à granularité fine qui s’exécute au runtime.

Pas de réconciliation. Pas de ré-exécution de composants. Juste des mises à jour chirurgicales des nœuds exactement concernés par les changements.

Le résultat est un framework qui se situe conceptuellement entre Solid (signaux à granularité fine) et Svelte (sortie pilotée par compilateur), mais avec TypeScript traité comme un citoyen de première classe dès le départ — et non ajouté après coup.

Comment fonctionne la réactivité à granularité fine de Ripple

Le modèle de réactivité à granularité fine de Ripple repose sur deux primitives :

• track() — crée une valeur réactive ou un calcul dérivé
• @ — l’opérateur d’accès pour lire et écrire des valeurs suivies

import { track } from 'ripple'

export component Counter() {
  let count = track(0)
  let double = track(() => @count * 2) // auto-dérivé, pas de tableau de dépendances

  <div>
    <p>{@count}</p>
    <p>{@double}</p>
    <button onClick={() => @count++}>{"Increment"}</button>
  </div>
}

Lorsque @count change, seuls les nœuds du DOM qui en dépendent sont mis à jour. double se recalcule automatiquement. Pas de useMemo, pas de tableau de dépendances, pas de fermeture obsolète à déboguer.

Cela diffère significativement du modèle de React, où les changements d’état déclenchent une ré-exécution complète du composant, et du createSignal de Solid, que Ripple évite intentionnellement d’imiter. Le nom track() signale un modèle mental différent : vous déclarez une relation suivie, plutôt que de câbler manuellement un graphe de signaux.

Pour les collections réactives, Ripple introduit #[] (TrackedArray) et #{} (TrackedObject), qui permettent une mutation directe :

const todos = #[]
todos.push({ id: 1, text: 'Write docs', completed: false }) // l'interface se met à jour automatiquement

Pas d’opérateurs de décomposition. Pas de setState. Juste muter et continuer.

L’expérience développeur du framework frontend Ripple TS

Ripple est livré avec une boîte à outils ciblée mais pratique :

• Scaffolding CLI : npm create ripple my-app vous permet d’obtenir un projet propulsé par Vite en quelques secondes
• Extension VSCode : IntelliSense, diagnostics et mise en évidence des erreurs dans les fichiers .ripple
• Support Prettier et ESLint : Formatage et linting complets pour les modules .ripple
• Styles scopés : les blocs <style> à l’intérieur des composants sont automatiquement scopés, sans configuration de CSS Modules requise

Les composants utilisent un mot-clé component au lieu de function, et les templates sont des instructions plutôt que des valeurs de retour — un changement subtil qui donne au compilateur plus de marge pour optimiser :

component Button(props: { text: string, onClick: () => void }) {
  <button onClick={props.onClick}>{props.text}</button>
}

Le flux de contrôle utilise du JavaScript pur : boucles for, blocs if/else et try/catch pour les limites d’erreur — pas de gymnastique avec .map() ni de composants wrapper <Show> requis.

Concernant le rendu côté serveur : la documentation de Ripple fait référence aux APIs render (serveur) et hydrate (client), donc le SSR fait partie de l’orientation de conception. L’écosystème autour de cela est précoce et en évolution, et ce n’est pas un framework avec lequel vous déploieriez une application en production aujourd’hui.

Conclusion

Ripple est une véritable expérimentation technique de la part de quelqu’un possédant un pedigree rare dans le domaine des frameworks. Les idées fondamentales — évaluation réactive paresseuse, suivi des dépendances géré par le compilateur, syntaxe native TypeScript — méritent d’être comprises même si vous n’écrivez jamais une ligne de code Ripple pour la production.

Si vous êtes curieux, le dépôt GitHub et la documentation sont les bons points de départ. Lancez le starter Vite, construisez un compteur ou un petit formulaire, et voyez si le modèle mental vous convient.

Les frameworks intéressants s’annoncent rarement bruyamment. Ils vous font simplement réfléchir différemment à ceux que vous utilisez déjà.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.