- Combina las fortalezas de React, Solid y Svelte para construir componentes con un diseño JS/TS-first y su propio lenguaje de módulos
.ripple, como un framework de UI con seguridad de tipos
- Apunta a alto rendimiento y eficiencia de memoria con variables/propiedades reactivas usando el prefijo
$, plantillas similares a JSX y renderizado granular
- Ofrece extensión para VS Code, Prettier e integración con TypeScript, e incluye DX moderna como arreglos/mapas/sets reactivos, efectos basados en
effect y decoradores (@use)
- Actualmente está en alfa temprana y tiene limitaciones como sin soporte para SSR y tipado incompleto; fue abierto para experimentar ideas y compartir feedback
- Basado en una filosofía similar al runtime basado en señales de Svelte 5, permite ver la evolución de los frameworks frontend al experimentar con un enfoque JS/TS-first y una sintaxis amigable para LLM
What is Ripple?
- Ripple es un framework de UI orientado a TypeScript inspirado en React, Solid y Svelte, construido sobre un lenguaje superconjunto que usa su propia extensión
.ripple
- Con una sintaxis que encaja bien con JSX, usa plantillas solo dentro del cuerpo del componente y adopta plantillas en forma de sentencias en lugar de expresiones de retorno (return de JSX)
- El autor implementó estas ideas en una forma experimental a partir de su experiencia con Inferno, React Hooks, Lexical y Svelte 5
- Por ahora está en una fase inicial de desarrollo, con muchos bugs y TODOs, y no se recomienda para producción
- Su objetivo es compartir e incubar ideas y explorar la posibilidad de que estas regresen a otros frameworks
- Es un intento de comprobar la hipótesis de que un diseño JS/TS-first ofrece una buena DX tanto para personas como para LLM
Features
- Reactive State Management: ofrece reactividad para variables y propiedades de objetos con el prefijo
$, y los valores derivados también se expresan naturalmente como variables $
- Component-Based Architecture: declaración explícita de componentes con la palabra clave
component, soporte para props/children y combinación con plantillas similares a JSX
- Performance: busca rendimiento y eficiencia de memoria de primer nivel en la industria mediante renderizado granular (fine-grained)
- Tooling: integración con TypeScript, IntelliSense/diagnósticos/highlighting en VS Code y soporte de formateo con Prettier
- DX reforzada: filosofía JS/TS-first, sintaxis amigable para LLM y una estructura SPA por defecto
Missing Features
- Sin SSR: por ahora es solo para SPA; SSR todavía no se ha trabajado
- Tipado incompleto: las definiciones de tipos en el codebase son limitadas, con mejoras previstas
Getting Started / Try Ripple
- Se puede abrir la plantilla base en StackBlitz o clonar con
degit y ejecutarla con el servidor de desarrollo de Vite
- Ejemplo de comandos:
npx degit trueadm/ripple/templates/basic my-app → npm i → npm run dev
- El playground online está pendiente, pero se puede experimentar localmente con la carpeta
playground del repo
VSCode Extension
- Hay una extensión Ripple for VS Code con soporte para resaltado de sintaxis, diagnósticos en tiempo real, integración con TS y autocompletado (IntelliSense) en archivos
.ripple
- Se ofrecen enlaces al paquete publicado en el Marketplace y al paquete
.vsix para instalación manual
Mounting your app
- Desde la entrada se puede montar el componente raíz con la forma
mount(App, { props, target })
- Ofrece una API simple para indicar el nodo DOM en
target e inyectar propiedades iniciales con props
Key Concepts
- Components
- Define componentes declarativos con una firma similar a función usando la palabra clave
component, y escribe directamente la plantilla similar a JSX dentro del cuerpo
- Soporta sintaxis abreviada de propiedades (
{onClick}), spread ({...props}) y otras formas familiares
- Reactive Variables
- Las variables y propiedades con prefijo
$ tienen reactividad automática y provocan rerender con solo incrementar o asignar
- El estado derivado se declara con una notación intuitiva como
$double = $count * 2, y permite derivaciones encadenadas
- Con
untrack se puede bloquear la propagación de reactividad en secciones concretas, como durante la inicialización
- No se permiten variables reactivas en el ámbito global o en el nivel superior del módulo; deben crearse dentro de un contexto activo de componente
- Transporting Reactivity
- Al envolver arreglos y objetos, se puede transportar la reactividad más allá de los límites para permitir composición y coexistencia
- Se recomienda el patrón en el que una factory function recibe valores
$, crea internamente derivaciones/effect y luego devuelve valores $
- Reactive Arrays / Set / Map
RippleArray/Set/Map son colecciones reactivas que extienden las colecciones estándar; para que longitud/tamaño sean reactivos hay que acceder mediante $length/$size- Los resultados de métodos pueden usarse directamente o asignarse a variables reactivas como
$has para usarlos en plantillas
- Effects
- Con
effect(() => { ... }) se declaran side effects que se ejecutan cuando cambian los valores $ de los que dependen, con tracking automático
- Control flow
- Las plantillas se permiten solo dentro del cuerpo del componente y no devuelven JSX como funciones normales o expresiones de asignación
- Dentro de las plantillas se pueden usar declaraciones de variables/llamadas a funciones/
debugger, con un control de flujo centrado en sentencias
- Adopta la regla de marcar los literales de cadena como
{ "…" } para distinguirlos del código
- If / For / Try statements
- Usa
if/else dentro de bloques de plantilla para construir un control de flujo legible
- Con
for...of permite renderizar colecciones y repetir de forma simple sin necesidad de key prop
- Los bloques
try/catch permiten construir error boundaries (UI de fallback); en catch se puede registrar/reportar el error y luego renderizar una UI alternativa
- Props
- Las props reactivas usan prefijo
$, y los atributos DOM también deben llevarlo, como $class, $id, para que haya actualizaciones reactivas
- Children
- Proporciona un slot implícito de componente
$children, permitiendo composición con <$children />
- También permite declarar componentes de slot explícitos para ganar legibilidad y control
- Events
- Soporta una API de eventos similar a React (
onClick, onKeyDown, …Capture) y algunos eventos se optimizan mediante delegación
- Decorators
- La sintaxis de decoradores
{@use fn} permite obtener una referencia al nodo real del DOM y devolver hooks de mount/unmount
- Soporta patrones de paso de valores reactivos mediante funciones inline o factories, y su propagación a componentes compuestos
- Styling
- El CSS de ámbito local al componente se escribe en el bloque superior
<style>, ofreciendo estilos encapsulados
- Context
- Con
createContext se configuran valores compartidos en el árbol, y get/set solo se permite dentro de componentes para mantener la previsibilidad
Playground
- Después de clonar el repo, se puede ejecutar el playground local con
pnpm i && cd playground && pnpm dev
- Usando el plugin de Vite, se puede experimentar fácilmente con la sintaxis
.ripple en playground/src
Why it matters
- Elementos como JS/TS-first, plantillas estilo sentencias y reactividad con prefijo
$ son un experimento que busca a la vez una estructura de código amigable para LLM y legibilidad/facilidad de análisis estático
- La combinación de renderizado granular, reactividad de colecciones y hooking del DOM mediante decoradores busca compatibilizar microoptimizaciones y DX
- Aunque sigue en fase alfa, cruza la arquitectura basada en señales de Svelte 5 con la experiencia de desarrollo del ecosistema React, aportando referencias para el diseño de frameworks de próxima generación
3 comentarios
Parece bueno, pero a la vez no tanto.
Me da mucho la sensación de que es algo muy al estilo de Svelte.
Después de dar tantas vueltas, capaz que al final termina yéndose por algo tipo React jajaja
Parece que, como la cantidad de contenido con la que se entrenó la IA es poca, se está generando una tendencia en la que todos evitan los frameworks nuevos.
Creo que Svelte fue el último en subirse al tren. Incluso con Svelte, si no escribes bien el prompt, sigue insistiendo en usar la sintaxis con
$en lugar derune, y eso complica las cosas.