Ripple: Um Novo Framework UI em TypeScript para Acompanhar

Se você já passou tempo lutando com useMemo, useCallback e bugs de closure obsoleto do React, você já conhece a sobrecarga mental que vem com o gerenciamento manual de reatividade. Ripple, um novo framework TypeScript criado por Dominic Gannaway (contribuidor do React Hooks, autor do Inferno, mantenedor principal do Svelte 5), adota uma abordagem completamente diferente: compilar a reatividade, e deixar o framework cuidar do resto.

Aqui está o que o torna tecnicamente interessante.

O Que É o Framework UI Ripple?

Ripple é um framework UI orientado por compilador construído em torno de arquivos .ripple — seu próprio formato de módulo, distinto de .tsx ou .jsx. Em vez de entregar um DOM virtual e algoritmo de diferenciação em tempo de execução, o compilador do Ripple analisa componentes e gera lógica de atualização de DOM refinada que é executada em tempo de execução.

Sem reconciliação. Sem re-execução de componentes. Apenas atualizações cirúrgicas nos nós exatos que mudaram.

O resultado é um framework que se posiciona conceitualmente entre Solid (sinais refinados) e Svelte (saída orientada por compilador), mas com TypeScript tratado como cidadão de primeira classe desde o início — não adicionado posteriormente.

Como Funciona a Reatividade Refinada do Ripple

O modelo de reatividade refinada do Ripple é centrado em duas primitivas:

• track() — cria um valor reativo ou computação derivada
• @ — o operador de acesso para leitura e escrita de valores rastreados

import { track } from 'ripple'

export component Counter() {
  let count = track(0)
  let double = track(() => @count * 2) // auto-derivado, sem array de dependências

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

Quando @count muda, apenas os nós do DOM que dependem dele são atualizados. double é recomputado automaticamente. Não há useMemo, nem array de dependências, nem closure obsoleto para depurar.

Isso difere significativamente do modelo do React, onde mudanças de estado disparam a re-execução completa do componente, e do createSignal do Solid, que o Ripple intencionalmente evita imitar. A nomenclatura track() sinaliza um modelo mental diferente: você está declarando uma relação rastreada, não conectando manualmente um grafo de sinais.

Para coleções reativas, Ripple introduz #[] (TrackedArray) e #{} (TrackedObject), que permitem mutação direta:

const todos = #[]
todos.push({ id: 1, text: 'Write docs', completed: false }) // UI atualiza automaticamente

Sem operadores spread. Sem setState. Apenas mude e siga em frente.

A Experiência do Desenvolvedor com o Framework Frontend Ripple TS

Ripple vem com uma história de ferramentas focada mas prática:

• Scaffolding CLI: npm create ripple my-app cria um projeto com Vite em segundos
• Extensão VSCode: IntelliSense, diagnósticos e destaque de erros dentro de arquivos .ripple
• Suporte Prettier e ESLint: Formatação e linting completos para módulos .ripple
• Estilos com escopo: Blocos <style> dentro de componentes são automaticamente isolados, sem necessidade de configuração de CSS Modules

Componentes usam a palavra-chave component em vez de function, e templates são declarações em vez de valores de retorno — uma mudança sutil que dá ao compilador mais espaço para otimizar:

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

O fluxo de controle usa JavaScript puro: loops for, blocos if/else e try/catch para error boundaries — sem ginástica com .map() ou componentes wrapper <Show> necessários.

Quanto à renderização no lado do servidor: a documentação do Ripple referencia APIs render (servidor) e hydrate (cliente), então SSR faz parte da direção do design. O ecossistema ao redor ainda é inicial e está evoluindo, e este não é um framework com o qual você enviaria um aplicativo de produção hoje.

Conclusão

Ripple é um experimento técnico genuíno de alguém com rara expertise em frameworks. As ideias centrais — avaliação reativa preguiçosa, rastreamento de dependências gerenciado pelo compilador, sintaxe nativa TypeScript — valem a pena entender mesmo que você nunca escreva uma linha de código Ripple para produção.

Se você está curioso, o repositório GitHub e a documentação são os pontos de partida certos. Inicie o starter Vite, construa um contador ou um pequeno formulário, e veja se o modelo mental faz sentido.

Os frameworks interessantes raramente se anunciam em voz alta. Eles apenas fazem você pensar diferente sobre aqueles que você já usa.

Perguntas Frequentes

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.