O que é Programação Reativa?

Programação reativa é um paradigma de programação focado em fluxos de dados e propagação de mudanças. Em vez de escrever código que busca e processa dados passo a passo, você descreve como os dados devem fluir e se transformar ao longo do tempo. Quando os valores mudam, as atualizações são propagadas automaticamente pela sua aplicação. Pense nisso como uma planilha: ao atualizar a célula A1, todas as células que referenciam A1 são recalculadas automaticamente. Essa abordagem se destaca no tratamento de eventos assíncronos, como interações do usuário, respostas HTTP, mensagens WebSocket e timers.

Como o RxJS funciona?

RxJS (Reactive Extensions for JavaScript) implementa programação reativa através de Observables — objetos que emitem valores ao longo do tempo. Os conceitos principais são:

  1. Observable: Uma fonte de dados que emite valores (como um fluxo de eventos de clique ou respostas de API)
  2. Observer: Um consumidor que reage aos valores emitidos por meio de callbacks (next, error, complete)
  3. Subscription: A conexão entre um Observable e um Observer
  4. Operators: Funções que transformam, filtram, combinam ou manipulam fluxos de dados
  5. Subjects: Observables especiais que atuam tanto como fonte de dados quanto como consumidor, permitindo multicast

Você cria pipelines de dados encadeando operadores com o método pipe(), transformando fluxos brutos na forma exata que sua aplicação necessita.

Descrição da Ferramenta

O RxJS Playground é um sandbox interativo baseado no navegador para experimentar conceitos de programação reativa com RxJS. Escreva e execute código RxJS diretamente no editor com acesso total à biblioteca RxJS e a todos os operadores. O playground executa seu código automaticamente enquanto você digita (com debounce), exibindo a saída do console em um painel estilo terminal. É perfeito para aprender conceitos de RxJS, prototipar transformações de dados, depurar pipelines de Observable e testar combinações de operadores sem precisar configurar um ambiente de desenvolvimento.

Recursos

  • Acesso completo à biblioteca RxJS: Todas as funções de criação (of, from, interval, fromEvent, etc.) e operadores disponíveis
  • Execução em tempo real: O código roda automaticamente com debounce de 500 ms enquanto você digita
  • Saída no terminal: Logs, erros e avisos são exibidos em um terminal estilizado
  • Realce de sintaxe: Editor de código JavaScript com realce de sintaxe adequado
  • Exibição do valor de retorno: Valores de expressões finais são registrados automaticamente com notação de seta
  • Tratamento de erros: Mensagens de erro claras para problemas de sintaxe e tempo de execução
  • Módulo de operadores: Acesso direto a rxjs/operators para transformações baseadas em pipe

Exemplos

Criação Básica de Observable:

const { of, from, interval } = rxjs;

// Emite valores individuais
of(1, 2, 3).subscribe((x) => console.log(x));

// Converte array em Observable
from([10, 20, 30]).subscribe((x) => console.log(x));

Usando Operadores:

const { of } = rxjs;
const { map, filter, take } = operators;

of(1, 2, 3, 4, 5)
  .pipe(
    filter((x) => x % 2 === 0),
    map((x) => x * 10),
  )
  .subscribe((x) => console.log(x));
// Saída: 20, 40

Combinando Fluxos:

const { of, merge, concat } = rxjs;

const stream1 = of("A", "B");
const stream2 = of("X", "Y");

merge(stream1, stream2).subscribe((x) => console.log("merge:", x));
concat(stream1, stream2).subscribe((x) => console.log("concat:", x));

Subjects para Multicast:

const { Subject, BehaviorSubject } = rxjs;

const subject = new Subject();
subject.subscribe((v) => console.log("Observer 1:", v));
subject.subscribe((v) => console.log("Observer 2:", v));
subject.next(1);
subject.next(2);

Pipeline de Transformação:

const { from } = rxjs;
const { map, reduce, toArray } = operators;

from([1, 2, 3, 4, 5])
  .pipe(
    map((x) => x * 2),
    toArray(),
  )
  .subscribe((arr) => console.log("Doubled:", arr));

Módulos Disponíveis

rxjs (módulo principal):

  • Criação: of, from, interval, timer, range, generate, defer, iif
  • Combinação: merge, concat, combineLatest, forkJoin, zip, race
  • Subjects: Subject, BehaviorSubject, ReplaySubject, AsyncSubject
  • Utilitários: firstValueFrom, lastValueFrom, isObservable

operators (operadores pipeáveis):

  • Transformação: map, pluck, scan, reduce, buffer, switchMap, mergeMap, concatMap
  • Filtragem: filter, take, takeUntil, skip, debounceTime, throttleTime, distinctUntilChanged
  • Combinação: withLatestFrom, combineLatestWith, mergeWith, startWith
  • Tratamento de erros: catchError, retry, retryWhen
  • Utilitários: tap, delay, timeout, toArray, share, shareReplay

Casos de Uso

  • Aprender RxJS: Entenda os conceitos de Observable por meio de experimentação prática
  • Prototipar fluxos de dados: Desenhe e teste pipelines reativos antes da implementação
  • Depurar operadores: Isole e verifique o comportamento de operadores com exemplos simplificados
  • Preparação para entrevistas: Pratique padrões de programação reativa e problemas comuns
  • Demonstrações de ensino: Mostre conceitos reativos com exemplos ao vivo e interativos