Cos'è la programmazione reattiva?

La programmazione reattiva è un paradigma di programmazione incentrato su flussi di dati e propagazione dei cambiamenti. Invece di scrivere codice che recupera ed elabora esplicitamente i dati passo dopo passo, si descrive come i dati devono fluire e trasformarsi nel tempo. Quando i valori cambiano, gli aggiornamenti si propagano automaticamente attraverso l'applicazione. È simile a un foglio di calcolo: quando si aggiorna la cella A1, tutte le celle che fanno riferimento a A1 ricalcolano automaticamente. Questo approccio eccelle nella gestione di eventi asincroni come interazioni dell'utente, risposte HTTP, messaggi WebSocket e timer.

Come funziona RxJS?

RxJS (Reactive Extensions for JavaScript) implementa la programmazione reattiva attraverso Observables—oggetti che emettono valori nel tempo. I concetti chiave sono:

  1. Observable: una sorgente di dati che emette valori (ad esempio un flusso di eventi di click o risposte API)
  2. Observer: un consumatore che reagisce ai valori emessi tramite callback (next, error, complete)
  3. Subscription: la connessione tra un Observable e un Observer
  4. Operators: funzioni che trasformano, filtrano, combinano o manipolano i flussi di dati
  5. Subjects: Observable speciali che fungono sia da sorgente di dati sia da consumatore, abilitando il multicasting

Si creano pipeline di dati concatenando gli operatori con il metodo pipe(), trasformando i flussi grezzi nella forma esatta di dati di cui l'applicazione ha bisogno.

Descrizione dello strumento

Il RxJS Playground è un sandbox interattivo basato sul browser per sperimentare i concetti della programmazione reattiva RxJS. Scrivi ed esegui codice RxJS direttamente nell'editor con pieno accesso alla libreria RxJS e a tutti gli operatori. Il playground esegue automaticamente il tuo codice mentre digiti (con debounce), mostrando l'output della console in un pannello in stile terminale. È perfetto per apprendere i concetti di RxJS, prototipare trasformazioni di dati, fare debugging di pipeline Observable e testare combinazioni di operatori senza configurare un ambiente di sviluppo.

Caratteristiche

  • Accesso completo alla libreria RxJS: tutte le funzioni di creazione (of, from, interval, fromEvent, ecc.) e gli operatori disponibili
  • Esecuzione in tempo reale: il codice viene eseguito automaticamente con debounce di 500 ms mentre digiti
  • Output del terminale: log della console, errori e avvisi visualizzati in un terminale stilizzato
  • Evidenziazione della sintassi: editor di codice JavaScript con corretta evidenziazione della sintassi
  • Visualizzazione del valore di ritorno: i valori delle espressioni finali vengono registrati automaticamente con notazione a freccia
  • Gestione degli errori: messaggi di errore chiari per problemi di sintassi e runtime
  • Modulo degli operatori: accesso diretto a rxjs/operators per trasformazioni basate su pipe

Esempi

Creazione di Observable di base:

const { of, from, interval } = rxjs;

// Emissione di valori individuali
of(1, 2, 3).subscribe((x) => console.log(x));

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

Utilizzo degli operatori:

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));
// Risultato: 20, 40

Combinazione di flussi:

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 per il multicasting:

const { Subject, BehaviorSubject } = rxjs;

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

Pipeline di trasformazione:

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

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

Moduli disponibili

rxjs (modulo principale):

  • Creazione: of, from, interval, timer, range, generate, defer, iif
  • Combinazione: merge, concat, combineLatest, forkJoin, zip, race
  • Subjects: Subject, BehaviorSubject, ReplaySubject, AsyncSubject
  • Utility: firstValueFrom, lastValueFrom, isObservable

operators (operatori pipeabili):

  • Trasformazione: map, pluck, scan, reduce, buffer, switchMap, mergeMap, concatMap
  • Filtraggio: filter, take, takeUntil, skip, debounceTime, throttleTime, distinctUntilChanged
  • Combinazione: withLatestFrom, combineLatestWith, mergeWith, startWith
  • Gestione degli errori: catchError, retry, retryWhen
  • Utilità: tap, delay, timeout, toArray, share, shareReplay

Casi d'uso

  • Imparare RxJS: comprendere i concetti di Observable tramite sperimentazione pratica
  • Prototipazione dei flussi di dati: progettare e testare pipeline reattive prima dell'implementazione
  • Debug degli operatori: isolare e verificare il comportamento degli operatori con esempi semplificati
  • Preparazione per colloqui: esercitarsi con pattern di programmazione reattiva e problemi comuni
  • Dimostrazioni didattiche: mostrare concetti reattivi con esempi interattivi in tempo reale