Qu'est-ce que la programmation réactive ?

La programmation réactive est un paradigme de programmation centré sur les flux de données et la propagation des changements. Au lieu d’écrire du code qui récupère et traite les données étape par étape, vous décrivez comment les données doivent circuler et se transformer au fil du temps. Lorsque les valeurs changent, les mises à jour se propagent automatiquement à travers votre application. Pensez à une feuille de calcul : lorsque vous modifiez la cellule A1, toutes les cellules qui référencent A1 se recalculent automatiquement. Cette approche excelle dans la gestion d’événements asynchrones tels que les interactions utilisateur, les réponses HTTP, les messages WebSocket et les minuteries.

Comment RxJS fonctionne‑t‑il ?

RxJS (Reactive Extensions for JavaScript) implémente la programmation réactive via les Observables — des objets qui émettent des valeurs au fil du temps. Les concepts clés sont :

  1. Observable : une source de données qui émet des valeurs (comme un flux d’événements de clic ou des réponses d’API)
  2. Observateur : un consommateur qui réagit aux valeurs émises via des callbacks (next, error, complete)
  3. Abonnement : la connexion entre un Observable et un Observateur
  4. Opérateurs : fonctions qui transforment, filtrent, combinent ou manipulent les flux de données
  5. Subjects : Observables spéciaux qui agissent à la fois comme source de données et consommateur, permettant la diffusion multiple

Vous créez des pipelines de données en chaînant des opérateurs avec la méthode pipe(), transformant les flux bruts en la forme exacte requise par votre application.

Description de l'outil

Le RxJS Playground est un bac à sable interactif basé sur le navigateur pour expérimenter les concepts de programmation réactive RxJS. Écrivez et exécutez du code RxJS directement dans l’éditeur avec un accès complet à la bibliothèque RxJS et à tous les opérateurs. Le playground exécute votre code automatiquement au fur et à mesure que vous tapez (avec débounce), affichant la sortie console dans un panneau de type terminal. C’est idéal pour apprendre les concepts RxJS, prototyper des transformations de données, déboguer des pipelines d’Observables et tester des combinaisons d’opérateurs sans installer d’environnement de développement.

Fonctionnalités

  • Accès complet à la bibliothèque RxJS : toutes les fonctions de création (of, from, interval, fromEvent, etc.) et tous les opérateurs disponibles
  • Exécution en temps réel : le code s’exécute automatiquement avec un débounce de 500 ms pendant la saisie
  • Sortie terminal : logs console, erreurs et avertissements affichés dans un terminal stylisé
  • Coloration syntaxique : éditeur de code JavaScript avec coloration syntaxique appropriée
  • Affichage de la valeur de retour : les valeurs d’expression finale sont automatiquement journalisées avec une notation flèche
  • Gestion des erreurs : messages d’erreur clairs pour les problèmes de syntaxe et d’exécution
  • Module des opérateurs : accès direct à rxjs/operators pour les transformations basées sur pipe

Exemples

Création d’Observable de base :

const { of, from, interval } = rxjs;

// Émettre des valeurs individuelles
of(1, 2, 3).subscribe((x) => console.log(x));

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

Utilisation des opérateurs :

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

Combinaison de flux :

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 pour la diffusion multiple :

const { Subject, BehaviorSubject } = rxjs;

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

Pipeline de transformation :

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

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

Modules disponibles

rxjs (module principal) :

  • Création : of, from, interval, timer, range, generate, defer, iif
  • Combinaison : merge, concat, combineLatest, forkJoin, zip, race
  • Subjects : Subject, BehaviorSubject, ReplaySubject, AsyncSubject
  • Utilitaires : firstValueFrom, lastValueFrom, isObservable

operators (opérateurs chaînables) :

  • Transformation : map, pluck, scan, reduce, buffer, switchMap, mergeMap, concatMap
  • Filtrage : filter, take, takeUntil, skip, debounceTime, throttleTime, distinctUntilChanged
  • Combinaison : withLatestFrom, combineLatestWith, mergeWith, startWith
  • Gestion des erreurs : catchError, retry, retryWhen
  • Utilitaire : tap, delay, timeout, toArray, share, shareReplay

Cas d’utilisation

  • Apprendre RxJS : comprendre les concepts d’Observable grâce à une expérimentation pratique
  • Prototyper des flux de données : concevoir et tester des pipelines réactifs avant leur implémentation
  • Déboguer des opérateurs : isoler et vérifier le comportement des opérateurs avec des exemples simplifiés
  • Préparer un entretien : s’exercer aux modèles de programmation réactive et aux problèmes courants
  • Démonstrations pédagogiques : illustrer les concepts réactifs avec des exemples interactifs en direct