Executando verificação de segurança...
3
n0n3br
5 min de leitura ·

Ripple: o framework JS que é uma mistura de React, Solid e Svelte (e que tá muito daora)

Vamos combinar uma coisa? Frameworks de front-end aparecem e somem rapidinho, tipo moda passageira. Um dia você tá todo animado com um novo React alternativo e, no outro, ninguém mais lembra dele.

Mas de vez em quando aparece algo que te faz parar e pensar: “Peraí, isso aqui é diferente.”

Esse é o Ripple. Criado pelo Dominic Gannaway — que é um dos caras que ajudaram a criar o React e também trabalhou no Svelte 5 —, o Ripple é um framework novinho, feito pra TypeScript, que junta o melhor de React, Solid e Svelte numa mistura que pode virar o próximo “hype” lá na frente.

Por que você devia dar uma moral pro Ripple?

Se você já tá cansado daqueles frameworks que:

  • Te obrigam a decorar linguagens esquisitas toda hora,
  • Trancam seu código em estruturas de arquivo que só dá dor de cabeça depois,
  • Ou fazem você escrever códigos doidos que parecem coisa de robô dos anos 90,

Então o Ripple pode ser o respiro que você precisava.

Ele é super flexível, voa no desempenho, e a galera dev que já testou não para de falar da experiência de desenvolvimento (ou DX pra quem curte siglas). Tá no começo ainda — tipo aquela banda indie que só os fãs conhecem — mas as vibes são muito boas.

O que faz o Ripple ser tão massa? (Com código de verdade, porque ninguém quer lenga lenga)

1. TS e JS na ação (sem linguagem esquisita)

Ao contrário do Vue ou Svelte, que te fazem aprender linguagens de template cheias de regras, o Ripple valoriza TypeScript e JavaScript de verdade. Você escreve a lógica e o markup no mesmo lugar, sem frescura.

Olha esse componente simples de todo list — você usa loop e condição direto no markup:

import { Button } from './Button.ripple';

export component TodoList({ todos, addTodo }: { todos: { text: string }[]; addTodo: () => void }) {
  <div class="container">
    <h2>{'Todo List'}</h2>
    <ul>
      for (const todo of todos) {
        <li>{todo.text}</li>
      }
    </ul>
    if (todos.length > 0) {
      <p>{todos.length} {"items"}</p>
    }
    <Button onClick={addTodo} label={"Add Todo"} />
  </div>

  <style>
    .container {
      text-align: center;
      font-family: "Arial", sans-serif;
    }
  </style>
}

Sim, você leu certo — nada de colchetes estranhos, só JS do jeitinho que você já sabe.

2. Reatividade fácil demais

Atualizar a interface quando o estado muda ficou moleza. Você põe um $ na frente da variável e pronto — reativo na hora. E pra criar valores derivados que mudam sozinhos? É só moleza.

Olha esse exemplo clássico de contador:

export component Counter() {
  let $count = 0;
  let $doubled = $count * 2;

  <div class='counter'>
    <h2>{'Counter'}</h2>
    <p>{`Count: ${$count}`}</p>
    <p>{`Doubled: ${$doubled}`}</p>
    <Button onClick={() => $count++} label={'Increment'} />
    <Button onClick={() => $count = 0} label={'Reset'} />
  </div>
}

Nem precisa de setter nem função estranha — mexe no $count que o resto o Ripple resolve rapidinho.

3. Controle total com JS no markup

Chega de ficar decorando diretivas doidas como v-if ou *ngFor. Ripple deixa você usar o JS puro — if, for e tudo mais — no próprio markup.

Se liga:

export component Condicional({ ativo }: { ativo: boolean }) {
  <div>
    if (ativo) {
      <p>O componente tá ativo! 🎉</p>
    } else {
      <p>Tá de boa por enquanto 😴</p>
    }
  </div>
}

export component ListaDeItens({ itens }: { itens: string[] }) {
  <ul>
    for (const item of itens) {
      <li>{item}</li>
    }
  </ul>
}

Seu cérebro agradece.

4. Performance de responsa

Ripple não é só um experimento. Dominic Gannaway já vem de React, Svelte 5 e Inferno — esse último conhecido por ser bem mais rápido que React em muitos testes. Ainda pega muita coisa do Solid e do Svelte, então já vem com DNA pra performance.

Ele atualiza só o que precisa, quando precisa — nada de renderizar código à toa, sistema tinindo.

5. Prettier e VSCode na faixa

Nada mais chato do que editor surtar quando você usa sintaxe nova. Ripple já chega pronto com Prettier configurado e integração legal com VSCode por uma extensão oficial, com destaque de sintaxe e autocomplete que facilitam sua vida.

Mas e o que ainda falta?

  • Ainda não tem Server-Side Rendering (SSR) — quem curte terá que esperar um pouco.
  • Projeto tá em alpha — bugs, mudanças e quebras são normais aqui.
  • Comunidade ainda pequenininha — mas tá crescendo rápido.

É tipo aquela startup que você torce pra dar certo, sabe?

Quer testar? Cola no repositório oficial

Aquele momento que você tava esperando:

https://github.com/trueadm/ripple

Lá no repo, você vai encontrar tudo para começar com Ripple. Além do que já colocamos aqui, tem muita coisa legal que já tá pronta:

  • Context para compartilhar dados e estado entre componentes, tipo um "estado global" leve, que evita os famosos problemas de props drilling.

  • Tratamento elegante de erros com try/catch direto dentro do markup, o que funciona como error boundaries para capturar falhas sem derrubar sua aplicação inteira.

  • Element hooks para pegar e manipular elementos DOM diretamente, parecido com os refs do React, só que de um jeito mais simples e integrado.

  • Mecanismos nativos para estilização inline dentro dos componentes, permitindo manter o CSS junto do seu código, com suporte para aninhamento sem complicação.

  • Controle de arrays reativos, facilitando a criação de listas dinâmicas que atualizam automaticamente sem dor de cabeça.

Baixa, mexe, faz uns testes e quem sabe cria um projetinho irado. Tem muito mais coisa já pronta, tipo Context

E não esquece de entrar no Discord oficial pra trocar ideia com a galera que tá começando a usar.

Pra fechar — por que o Ripple pode ser sua próxima paixão front-end

Se você curte código limpo, fácil de entender, odeia ficar aprendendo linguagens novas a cada framework e quer um framework TypeScript-first feito por quem entende do riscado — dá chance pro Ripple.

É novidade, tem potencial e é diferente do que você costuma ver.

Gostou? Então manda aquele upvote e compartilha!

Se curtiu o artigo, espalha pra rapaziada. Dá um upvote pra ajudar a divulgar aqui no TabNews. Quanto mais gente conhecer, maior a chance dele virar o próximo sucesso.

Bora ficar ligado, codar muito e lembrar que no front-end a parada nunca para — e a gente tem que estar sempre na frente!

🚀🌊✨

Carregando publicação patrocinada...