v135 · dom

Observable API

Observables are a popular reactive-programming paradigm to handle an asynchronous stream of push-based events. They can be thought of as Promises but for multiple events, and aim to do what Promises did for callbacks/nesting. That is, they allow ergonomic event handling by providing an Observable object that represents the asynchronous flow of events.

concepts

  1. EventTarget.when().map().filter()

    Observable as a first-class platform primitive — EventTarget.when("pointermove") chained with map and filter. Pointer events become subscribable streams.

  2. Search-as-you-type with takeUntil

    The canonical Observable use case from the WICG explainer: a search box that cancels any in-flight request the moment a newer keystroke arrives. Promises need bolt-on AbortControllers; Observables make cancellation the default shape.

  3. Operator playground

    Three stacked marble diagrams — source, after op 1, after op 2. Pick from map, filter, take, scan, and see how Observable’s chainable operators reshape a stream live.

  4. IntersectionObserver as Observable

    Convert IntersectionObserver into an Observable, then bridge with filter + take(1) so each card fires only once when it first crosses 50% visibility. Analytics impressions and lazy-load reduced to one pipeline.

  5. Drag as Observable

    Mouse drag is three events — pointerdown, pointermove, pointerup — that form a natural stream. flatMap opens a pointermove sub-stream on each down; takeUntil closes it on the first pointerup. Three draggable cards, a drop zone, and a live event log showing every next/complete signal — compared side-by-side with the imperative listener-bookkeeping equivalent.

why it shipped

Promises gave web developers a synchronously-available handle representing a single value that will be available asynchronously later. This lets developers write linear, declarative-style flows that outline how an asynchronous value will eventually be handled, avoiding "callback" hell.

references