Ripple: Un nuevo framework de UI en TypeScript que vale la pena observar

Si has pasado tiempo lidiando con useMemo, useCallback y bugs de closures obsoletos en React, ya conoces la carga mental que conlleva gestionar la reactividad manualmente. Ripple, un nuevo framework en TypeScript creado por Dominic Gannaway (colaborador de React Hooks, autor de Inferno, mantenedor principal de Svelte 5), adopta un enfoque completamente diferente: compilar la reactividad y dejar que el framework se encargue del resto.

Esto es lo que lo hace técnicamente interesante.

¿Qué es el framework de UI Ripple?

Ripple es un framework de UI impulsado por compilador construido alrededor de archivos .ripple — su propio formato de módulo, distinto de .tsx o .jsx. En lugar de distribuir un DOM virtual y un algoritmo de diferenciación en tiempo de ejecución, el compilador de Ripple analiza los componentes y genera lógica de actualización del DOM de grano fino que se ejecuta en tiempo de ejecución.

Sin reconciliación. Sin re-ejecuciones de componentes. Solo actualizaciones quirúrgicas exactamente en los nodos que cambiaron.

El resultado es un framework que se sitúa conceptualmente entre Solid (signals de grano fino) y Svelte (salida impulsada por compilador), pero con TypeScript tratado como ciudadano de primera clase desde el principio — no añadido posteriormente.

Cómo funciona la reactividad de grano fino de Ripple

El modelo de reactividad de grano fino de Ripple se centra en dos primitivas:

• track() — crea un valor reactivo o un cálculo derivado
• @ — el operador de acceso para leer y escribir valores rastreados

import { track } from 'ripple'

export component Counter() {
  let count = track(0)
  let double = track(() => @count * 2) // auto-derivado, sin array de dependencias

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

Cuando @count cambia, solo se actualizan los nodos del DOM que dependen de él. double se recalcula automáticamente. No hay useMemo, ni array de dependencias, ni closure obsoleto que depurar.

Esto difiere significativamente del modelo de React, donde los cambios de estado desencadenan la re-ejecución completa del componente, y del createSignal de Solid, que Ripple intencionalmente evita imitar. El nombre track() señala un modelo mental diferente: estás declarando una relación rastreada, no conectando manualmente un grafo de signals.

Para colecciones reactivas, Ripple introduce #[] (TrackedArray) y #{} (TrackedObject), que permiten mutación directa:

const todos = #[]
todos.push({ id: 1, text: 'Write docs', completed: false }) // La UI se actualiza automáticamente

Sin operadores spread. Sin setState. Solo muta y continúa.

La experiencia de desarrollo con el framework frontend Ripple TS

Ripple viene con un conjunto de herramientas enfocado pero práctico:

• Scaffolding CLI: npm create ripple my-app te proporciona un proyecto impulsado por Vite en segundos
• Extensión para VSCode: IntelliSense, diagnósticos y resaltado de errores dentro de archivos .ripple
• Soporte para Prettier y ESLint: Formateo y linting completo para módulos .ripple
• Estilos con ámbito: Los bloques <style> dentro de componentes tienen ámbito automático, sin necesidad de configurar CSS Modules

Los componentes usan la palabra clave component en lugar de function, y las plantillas son declaraciones en lugar de valores de retorno — un cambio sutil que le da al compilador más espacio para optimizar:

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

El flujo de control usa JavaScript plano: bucles for, bloques if/else y try/catch para límites de error — no se requieren acrobacias con .map() ni componentes envolventes como <Show>.

En cuanto al renderizado del lado del servidor: la documentación de Ripple hace referencia a las APIs render (servidor) y hydrate (cliente), por lo que SSR es parte de la dirección del diseño. El ecosistema alrededor de esto está en etapa temprana y evolucionando, y este no es un framework con el que enviarías una aplicación a producción hoy.

Conclusión

Ripple es un experimento técnico genuino de alguien con un pedigrí raro en frameworks. Las ideas centrales — evaluación reactiva perezosa, seguimiento de dependencias propiedad del compilador, sintaxis nativa de TypeScript — vale la pena entenderlas incluso si nunca escribes una línea de código Ripple para producción.

Si tienes curiosidad, el repositorio de GitHub y la documentación son los puntos de partida correctos. Inicia el starter de Vite, construye un contador o un formulario pequeño, y observa si el modelo mental hace clic.

Los frameworks interesantes rara vez se anuncian ruidosamente. Simplemente te hacen pensar diferente sobre los que ya usas.

Preguntas frecuentes

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.