RxJS: Reaktive Programmierung in JavaScript

RxJS (Reactive Extensions for JavaScript) bringt Observables, Operatoren und ein reaktives Paradigma. Eine Schlüsselabhängigkeit von Angular 2 und ein mächtiges Werkzeug für asynchronen Code.

Warum reaktive Programmierung¶

Moderne Webanwendungen sind inhärent asynchron — Benutzerinteraktionen, HTTP-Requests, WebSocket-Nachrichten, Timer. Callback Hell und Promise-Ketten werden unwartbar.

Reaktive Programmierung modelliert asynchrone Daten als Streams — Sequenzen von Werten über die Zeit. RxJS bietet Werkzeuge zum Komponieren, Filtern und Transformieren dieser Streams.

Observables und Operatoren¶

Ein Observable ist eine Lazy-Push-Collection — es produziert Werte über die Zeit:

import { Observable } from 'rxjs';
import { map, filter, debounceTime, switchMap } from 'rxjs/operators';

// Typeahead search
const search$ = Observable.fromEvent(searchInput, 'input')
  .pipe(
    map(e => e.target.value),
    debounceTime(300),
    filter(term => term.length > 2),
    switchMap(term => fetch('/api/search?q=' + term)
      .then(res => res.json()))
  );

search$.subscribe(results => {
  renderResults(results);
});

debounceTime wartet 300ms nach der letzten Eingabe. switchMap bricht den vorherigen Request ab, wenn ein neuer kommt. Eine elegante Lösung für ein komplexes Problem.

RxJS in Angular 2¶

Angular 2 integriert RxJS tief:

• HttpClient — gibt Observable statt Promise zurück
• Router — Route-Parameter als Observable
• Forms — valueChanges als Observable
• EventEmitter — intern Observable

Das Angular-Team wählte RxJS wegen seiner Kompositionsfähigkeit — Kombination von HTTP-Requests, Benutzereingaben und Route-Änderungen in einer deklarativen Pipeline.

Wann RxJS außerhalb von Angular einsetzen¶

RxJS ist nicht nur für Angular — es ergibt überall Sinn, wo es komplexe asynchrone Logik gibt:

• Echtzeit-Dashboards — Kombination von WebSocket-Streams
• Autocomplete/Typeahead — Debouncing, Abbruch
• Drag and Drop — Komposition von Maus-Events
• Polling mit Retry — Intervall + HTTP + Fehlerbehandlung

Für einfache Fetch-Requests ist RxJS Overkill — Promise genügt. RxJS glänzt in komplexen asynchronen Szenarien.

Fazit: Ein mächtiges Werkzeug mit Lernkurve¶

RxJS ist das fortschrittlichste Werkzeug für asynchrone Programmierung in JavaScript. Die Lernkurve ist steil — über 200 Operatoren und ein neues mentales Modell. Aber für komplexe Echtzeit-Anwendungen ist der Return on Investment enorm. Beginnen Sie mit einfachen Szenarien und erweitern Sie schrittweise.