- Réunit les atouts de React, Solid et Svelte dans un framework UI type-safe qui construit des composants avec une conception JS/TS-first et son propre langage de modules
.ripple
- Variables/propriétés réactives avec le préfixe
$, templates de type JSX et rendu finement granulaire pour viser de hautes performances et une bonne efficacité mémoire
- Fournit une extension VS Code, l’intégration Prettier et TypeScript, ainsi qu’une DX moderne avec tableaux/maps/sets réactifs, effets basés sur
effect et décorateurs (@use)
- Actuellement en alpha très précoce, avec des limites comme l’absence de SSR et des types incomplets ; le projet est ouvert pour expérimenter des idées et recueillir des retours
- S’appuie sur une philosophie proche du runtime à signaux de Svelte 5 et laisse entrevoir l’évolution des frameworks frontend via son approche JS/TS-first et sa syntaxe pensée pour les LLM
What is Ripple?
- Ripple est un framework UI orienté TypeScript inspiré de React, Solid et Svelte, construit sur un langage surensemble utilisant sa propre extension
.ripple
- Avec une syntaxe bien adaptée à JSX, il n’utilise les templates qu’à l’intérieur du corps des composants et adopte des templates de type instruction au lieu d’expressions de retour JSX
- L’auteur a implémenté ces idées sous une forme expérimentale en s’appuyant sur son expérience avec Inferno, React Hooks, Lexical et Svelte 5
- Le projet en est encore à un stade de développement initial, avec beaucoup de bugs et de TODO, et il est déconseillé en production
- L’objectif est de partager des idées, les faire mûrir et explorer comment elles pourraient nourrir d’autres frameworks
- C’est aussi une tentative de vérifier l’hypothèse qu’une conception JS/TS-first offre une bonne DX à la fois pour les humains et les LLM
Features
- Reactive State Management : réactivité pour les variables et propriétés d’objet avec le préfixe
$, avec une notation naturelle également pour les valeurs dérivées
- Component-Based Architecture : déclaration explicite des composants avec le mot-clé
component, prise en charge de props/children et intégration de templates de style JSX
- Performance : rendu finement granulaire visant des performances et une efficacité mémoire au meilleur niveau du secteur
- Tooling : intégration TypeScript, IntelliSense/diagnostics/coloration dans VS Code, prise en charge du formatage Prettier
- DX renforcée : philosophie JS/TS-first, syntaxe compatible avec les LLM, structure SPA par défaut
Missing Features
- Absence de SSR : actuellement réservé aux SPA, le SSR n’a pas encore été implémenté
- Types incomplets : les définitions de types du codebase sont encore limitées et doivent être améliorées
Getting Started / Try Ripple
- Il est possible d’ouvrir le template de base dans StackBlitz ou de le cloner avec
degit, puis de le lancer avec le serveur de développement Vite
- Exemple de commandes :
npx degit trueadm/ripple/templates/basic my-app → npm i → npm run dev
- Un playground en ligne est prévu ultérieurement ; en attendant, des expérimentations locales sont possibles via le dossier
playground du dépôt
VSCode Extension
- Une extension Ripple for VS Code est disponible, avec coloration syntaxique, diagnostics en temps réel, intégration TS et autocomplétion (IntelliSense) pour les fichiers
.ripple
- Des liens sont fournis vers la version publiée sur le Marketplace ainsi que vers un package
.vsix pour installation manuelle
Mounting your app
- Le point d’entrée prend en charge le montage du composant racine sous la forme
mount(App, { props, target })
- Une API concise permet de spécifier un nœud DOM dans
target et d’injecter les propriétés initiales via props
Key Concepts
- Components
- Le mot-clé
component permet de définir des composants déclaratifs avec une signature proche d’une fonction, et d’écrire directement des templates de style JSX dans le corps
- Prise en charge d’une syntaxe familière comme la forme abrégée des propriétés (
{onClick}) et le spread ({...props})
- Reactive Variables
- Les variables et propriétés préfixées par
$ sont automatiquement réactives, et une simple incrémentation ou affectation déclenche un rerender
- L’état dérivé se déclare avec une notation intuitive comme
$double = $count * 2, avec possibilité de chaîner les dérivations
- Avec
untrack, il est possible de bloquer la propagation de la réactivité dans certaines sections, par exemple à l’initialisation
- Les variables réactives sont interdites au niveau global ou au sommet du module ; elles doivent être créées dans un contexte de composant actif
- Transporting Reactivity
- En enveloppant tableaux et objets, on peut transporter la réactivité au-delà des frontières, ce qui facilite composition et coexistence
- Le pattern recommandé consiste à faire accepter des valeurs
$ à une fonction factory, y créer des dérivations / effect, puis retourner à nouveau des valeurs $
- Reactive Arrays / Set / Map
RippleArray/Set/Map sont des collections réactives qui étendent les collections standard ; pour une réactivité correcte, la longueur/taille doit être lue via $length / $size- Les résultats de méthodes peuvent être utilisés directement ou affectés à des variables réactives comme
$has pour être exploités dans les templates
- Effects
effect(() => { ... }) déclare des effets de bord qui s’exécutent quand les valeurs $ dont ils dépendent changent, avec tracking automatique
- Control flow
- Les templates ne sont autorisés qu’à l’intérieur du corps des composants ; les fonctions ordinaires et les affectations de variables ne renvoient pas directement de JSX
- Dans les templates, on peut utiliser déclarations de variables / appels de fonctions /
debugger, avec un contrôle de flux centré sur les instructions
- Les chaînes littérales sont explicitées sous la forme
{ "…" } afin de les distinguer du code
- If / For / Try statements
if/else peut être utilisé dans les blocs de template pour construire un contrôle de flux lisiblefor...of permet le rendu de collections, avec une itération concise sans prop key- Les blocs
try/catch servent de frontières d’erreur (fallback UI) ; dans catch, on peut journaliser / reporter puis rendre une UI de remplacement
- Props
- Les props réactives utilisent le préfixe
$ ; pour les attributs DOM aussi, il faut préfixer, par exemple $class, $id, afin d’obtenir des mises à jour réactives
- Children
- Un slot de composant implicite
$children est fourni, permettant la composition via <$children />
- Il est aussi possible de déclarer explicitement des composants de slot pour gagner en lisibilité et en contrôle
- Events
- Prise en charge d’une API d’événements proche de React (
onClick, onKeyDown, …Capture), avec optimisation par délégation pour certains événements
- Decorators
- La syntaxe de décorateur
{@use fn} permet d’obtenir une référence au vrai nœud DOM et de retourner des hooks de montage / démontage
- Prise en charge de patterns de transmission de valeurs réactives via fonctions inline / factories, ainsi que de leur passage à des composants composites
- Styling
- Le CSS à portée locale du composant s’écrit dans un bloc de niveau supérieur
<style>, fournissant un style encapsulé
- Context
createContext permet de définir des valeurs partagées dans l’arborescence, avec get/set autorisés uniquement dans les composants pour préserver la prévisibilité
Playground
- Après avoir cloné le dépôt, il est possible de lancer le playground local avec
pnpm i && cd playground && pnpm dev
- Grâce au plugin Vite, on peut expérimenter facilement la syntaxe
.ripple dans playground/src
Why it matters
- Les éléments comme JS/TS-first, les templates de style instruction et la réactivité préfixée par
$ constituent une expérimentation visant à concilier structure de code adaptée aux LLM et lisibilité / facilité d’analyse statique
- La combinaison du rendu finement granulaire, de la réactivité des collections et du hooking DOM via décorateurs cherche à faire coexister micro-optimisation et DX
- Même encore en phase alpha, le projet croise le flux à base de signaux de Svelte 5 avec l’expérience de développement de l’écosystème React, et fournit des pistes de réflexion pour la conception des frameworks de nouvelle génération
3 commentaires
J’ai l’impression que c’est bien… ou peut-être pas.
J’ai fortement l’impression que ça fait très Svelte.
Après plusieurs détours, ça finira peut-être par devenir un truc à la React, haha
On dirait qu’il y a une tendance à éviter les nouveaux frameworks, probablement parce que la quantité de contenu sur laquelle l’IA a été entraînée est trop faible.
Je pense que Svelte a été le dernier à monter dans le train. Même avec Svelte, si on n’écrit pas bien le prompt, ça continue à foncer avec la syntaxe
$au lieu d’utiliser les runes, ce qui est gênant.