Was ist Reactive Programmierung?

Reactive Programmierung ist ein Programmierparadigma, das sich auf Datenströme und Änderungspropagation konzentriert. Anstatt Code zu schreiben, der Daten Schritt für Schritt explizit abruft und verarbeitet, beschreiben Sie, wie Daten im Laufe der Zeit fließen und transformiert werden sollen. Wenn Werte sich ändern, werden Updates automatisch durch Ihre Anwendung propagiert. Denken Sie dabei an eine Tabellenkalkulation: Wenn Sie Zelle A1 aktualisieren, berechnen alle Zellen, die A1 referenzieren, automatisch neu. Dieser Ansatz eignet sich besonders für die Handhabung asynchroner Ereignisse wie Benutzerinteraktionen, HTTP‑Antworten, WebSocket‑Nachrichten und Timer.

Wie funktioniert RxJS?

RxJS (Reactive Extensions for JavaScript) implementiert Reactive Programmierung über Observables — Objekte, die im Zeitverlauf Werte emittieren. Die Kernkonzepte sind:

  1. Observable: Eine Datenquelle, die Werte emittiert (wie ein Strom von Klick‑Events oder API‑Antworten)
  2. Observer: Ein Verbraucher, der auf emittierte Werte über Callbacks (next, error, complete) reagiert
  3. Subscription: Die Verbindung zwischen einem Observable und einem Observer
  4. Operators: Funktionen, die Datenströme transformieren, filtern, kombinieren oder manipulieren
  5. Subjects: Spezielle Observables, die sowohl als Datenquelle als auch als Verbraucher fungieren und Multicasting ermöglichen

Sie erstellen Datenpipelines, indem Sie Operators mit der Methode pipe() verketten und Rohströme in exakt die Datenform transformieren, die Ihre Anwendung benötigt.

Werkzeugbeschreibung

Der RxJS Playground ist ein interaktiver, browserbasierter Sandbox‑Bereich zum Experimentieren mit Reactive‑Programmierungskonzepten von RxJS. Schreiben und führen Sie RxJS‑Code direkt im Editor aus, mit vollem Zugriff auf die RxJS‑Bibliothek und alle Operators. Der Playground führt Ihren Code automatisch beim Tippen aus (mit Debounce) und zeigt die Konsolenausgabe in einem terminalähnlichen Panel an. Ideal zum Lernen von RxJS‑Konzepten, Prototypisieren von Daten­transformationen, Debuggen von Observable‑Pipelines und Testen von Operator‑Kombinationen, ohne eine Entwicklungsumgebung einrichten zu müssen.

Funktionen

  • Vollständiger RxJS‑Bibliothekszugriff: Alle Erzeugungsfunktionen (of, from, interval, fromEvent usw.) und Operators verfügbar
  • Echtzeit‑Ausführung: Code läuft automatisch mit 500 ms Debounce, während Sie tippen
  • Terminalausgabe: Console‑Logs, Fehler und Warnungen werden in einem stilisierten Terminal angezeigt
  • Syntax‑Highlighting: JavaScript‑Code‑Editor mit korrekter Syntax‑Hervorhebung
  • Rückgabewert‑Anzeige: Endgültige Ausdruckswerte werden automatisch mit Pfeilnotation protokolliert
  • Fehlerbehandlung: Klare Fehlermeldungen für Syntax‑ und Laufzeitprobleme
  • Operators‑Modul: Direkter Zugriff auf rxjs/operators für pipe‑basierte Transformationen

Beispiele

Einfaches Observable erstellen:

const { of, from, interval } = rxjs;

// Einzelne Werte emittieren
of(1, 2, 3).subscribe((x) => console.log(x));

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

Operators verwenden:

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

Ströme kombinieren:

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 für Multicasting:

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);

Transformationspipeline:

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));

Verfügbare Module

rxjs (Hauptmodul):

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

operators (pipe‑bare Operators):

  • Transformation: map, pluck, scan, reduce, buffer, switchMap, mergeMap, concatMap
  • Filterung: filter, take, takeUntil, skip, debounceTime, throttleTime, distinctUntilChanged
  • Kombination: withLatestFrom, combineLatestWith, mergeWith, startWith
  • Fehlerbehandlung: catchError, retry, retryWhen
  • Dienstprogramme: tap, delay, timeout, toArray, share, shareReplay

Anwendungsfälle

  • RxJS lernen: Observable‑Konzepte durch praktische Experimente verstehen
  • Datenflüsse prototypisieren: Reactive Datenpipelines designen und testen, bevor sie implementiert werden
  • Operators debuggen: Operator‑Verhalten isoliert prüfen mit vereinfachten Beispielen
  • Interview‑Vorbereitung: Reactive‑Programmierungsmuster und gängige Probleme üben
  • Lehrdemonstrationen: Reactive Konzepte mit Live‑, interaktiven Beispielen zeigen