RxJS: reactive programming in JavaScript

RxJS (Reactive Extensions for JavaScript) brings observables, operators and a reactive paradigm. A key Angular 2 dependency and a powerful tool for asynchronous code.

Why reactive programming¶

Modern web applications are inherently asynchronous — user interactions, HTTP requests, WebSocket messages, timers. Callback hell and Promise chains become unmaintainable.

Reactive programming models asynchronous data as streams — sequences of values over time. RxJS provides tools for composing, filtering and transforming those streams.

Observables and operators¶

An Observable is a lazy push collection — it produces values over time:

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 waits 300ms after the last input. switchMap cancels the previous request when a new one arrives. An elegant solution to a complex problem.

RxJS in Angular 2¶

Angular 2 integrates RxJS deeply:

• HttpClient — returns Observable instead of Promise
• Router — route params as Observable
• Forms — valueChanges as Observable
• EventEmitter — Observable internally

The Angular team chose RxJS for its composability — combining HTTP requests, user input and route changes in one declarative pipeline.

When to use RxJS outside Angular¶

RxJS is not just for Angular — it makes sense anywhere with complex asynchronous logic:

• Real-time dashboards — combining WebSocket streams
• Autocomplete/typeahead — debouncing, cancellation
• Drag and drop — composing mouse events
• Polling with retry — interval + HTTP + error handling

For simple fetch requests RxJS is overkill — Promise is sufficient. RxJS shines in complex asynchronous scenarios.

Conclusion: a powerful tool with a learning curve¶

RxJS is the most advanced tool for asynchronous programming in JavaScript. The learning curve is steep — 200+ operators and a new mental model. But for complex real-time applications the return on investment is enormous. Start with simple scenarios and gradually expand.