¿Qué es la programación reactiva?

La programación reactiva es un paradigma de programación centrado en flujos de datos y la propagación de cambios. En lugar de escribir código que obtenga y procese datos paso a paso de forma explícita, describes cómo deben fluir y transformarse los datos a lo largo del tiempo. Cuando los valores cambian, las actualizaciones se propagan automáticamente a través de tu aplicación. Piénsalo como una hoja de cálculo: cuando actualizas la celda A1, todas las celdas que hacen referencia a A1 se recalculan automáticamente. Este enfoque sobresale al manejar eventos asíncronos como interacciones de usuario, respuestas HTTP, mensajes WebSocket y temporizadores.

¿Cómo funciona RxJS?

RxJS (Reactive Extensions for JavaScript) implementa la programación reactiva mediante Observables—objetos que emiten valores a lo largo del tiempo. Los conceptos clave son:

  1. Observable: Una fuente de datos que emite valores (como un flujo de eventos de clic o respuestas de API)
  2. Observer: Un consumidor que reacciona a los valores emitidos mediante callbacks (next, error, complete)
  3. Subscription: La conexión entre un Observable y un Observer
  4. Operators: Funciones que transforman, filtran, combinan o manipulan flujos de datos
  5. Subjects: Observables especiales que actúan como fuente de datos y consumidor, permitiendo la multidifusión

Creas pipelines de datos encadenando operadores con el método pipe(), transformando flujos crudos en la forma exacta que tu aplicación necesita.

Descripción de la herramienta

RxJS Playground es un sandbox interactivo basado en el navegador para experimentar con los conceptos de programación reactiva de RxJS. Escribe y ejecuta código RxJS directamente en el editor con acceso completo a la biblioteca RxJS y todos sus operadores. El playground ejecuta tu código automáticamente mientras escribes (con debouncing), mostrando la salida de la consola en un panel estilo terminal. Es perfecto para aprender conceptos de RxJS, prototipar transformaciones de datos, depurar pipelines de Observables y probar combinaciones de operadores sin configurar un entorno de desarrollo.

Características

  • Acceso completo a la biblioteca RxJS: Todas las funciones de creación (of, from, interval, fromEvent, etc.) y operadores disponibles
  • Ejecución en tiempo real: El código se ejecuta automáticamente con un debounce de 500 ms mientras escribe
  • Salida de terminal: Registros de consola, errores y advertencias mostrados en un panel estilo terminal
  • Resaltado de sintaxis: Editor de código JavaScript con resaltado de sintaxis adecuado
  • Visualización del valor de retorno: Los valores de la expresión final se registran automáticamente con notación de flecha
  • Manejo de errores: Mensajes de error claros para problemas de sintaxis y tiempo de ejecución
  • Módulo de operadores: Acceso directo a rxjs/operators para transformaciones basadas en pipe

Ejemplos

Creación básica de Observable:

const { of, from, interval } = rxjs;

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

// Convertir un arreglo a Observable
from([10, 20, 30]).subscribe((x) => console.log(x));

Uso de 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));
// Salida: 20, 40

Combinación de flujos:

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 multidifusión:

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 transformación:

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 disponibles

rxjs (módulo principal):

  • Creación: of, from, interval, timer, range, generate, defer, iif
  • Combinación: merge, concat, combineLatest, forkJoin, zip, race
  • Subjects: Subject, BehaviorSubject, ReplaySubject, AsyncSubject
  • Utilidades: firstValueFrom, lastValueFrom, isObservable

operators (operadores encadenables):

  • Transformación: map, pluck, scan, reduce, buffer, switchMap, mergeMap, concatMap
  • Filtrado: filter, take, takeUntil, skip, debounceTime, throttleTime, distinctUntilChanged
  • Combinación: withLatestFrom, combineLatestWith, mergeWith, startWith
  • Manejo de errores: catchError, retry, retryWhen
  • Utilidad: tap, delay, timeout, toArray, share, shareReplay

Casos de uso

  • Aprender RxJS: Entender los conceptos de Observable mediante experimentación práctica
  • Prototipado de flujos de datos: Diseñar y probar pipelines de datos reactivos antes de la implementación
  • Depuración de operadores: Aislar y verificar el comportamiento de los operadores con ejemplos simplificados
  • Preparación para entrevistas: Practicar patrones de programación reactiva y problemas comunes
  • Demostraciones docentes: Mostrar conceptos reactivos con ejemplos en vivo e interactivos