Reactive JavaScript

2013-08-08 00:00:00 +0100 by Alex R. Young

As JavaScript developers, whether server-side, browser-based, or both, two things we love are composition and asynchronous APIs. Once you've got the hang of callbacks, promises aren't too difficult to master, which is when libraries like q and async come into their own.

Reactive programming offers a different approach. It gives us tools that attack composition and asynchronicity head-on by focusing on data flows. This is a declarative paradigm -- logic expressed through data flows. We're entirely familiar with this: you can't go far with Node or jQuery without thinking in terms of events. The difference, however, is a layer of formality that provides a richer language for expressing logic through change.

If you've ever worked with .NET, then you might have seen Reactive Extensions. There's also RxJS (GitHub: Reactive-Extensions / RxJS, CodePlex: Rx, License: Apache 2.0, npm: rxjs), a Microsoft Open Technologies project designed to help us compose asynchronous and event-based programs using observable collections, drawing on inspiration from LINQ:

One question you may ask yourself, is why RxJS? What about Promises? Promises are good for solving asynchronous operations such as querying a service with an XMLHttpRequest, where the expected behavior is one value and then completion. The Reactive Extensions for JavaScript unifies both the world of Promises, callbacks as well as evented data such as DOM Input, Web Workers, Web Sockets. Once we have unified these concepts, this enables rich composition.

The first example in the RxJS readme demonstrates how composition can be used:

/* Only get the value from each key up */
var keyups = Rx.Observable.fromEvent(input, 'keyup')
    .select(function(e) {
        return e.target.value;
    .where(function(text) {
        return text.length > 2;

/* Throttle/debounce the input for 500ms */
var throttled = keyups.throttle(500 /* ms */);

/* Get only distinct values, so we eliminate the arrows */
var distinct = keyups.distinctUntilChanged();

function searchWikipedia(term) {
    var url = 'http://en.wikipedia.org/w/api.php?action=opensearch'
        + '&format=json'
        + '&search=' + encodeURI(term);
    return Rx.Observable.getJSONPRequest(url);

Recently, Yang Zhang sent me Introducing reactive.coffee: reactive programming and declarative UIs in CoffeeScript, a blog post about reactive.coffee (GitHub: yang / reactive-coffee, License: MIT, bower: reactive-coffee). This is a library of reactive programming primitives -- it's not AngularJS or Knockout, but something different and more generic. It provides reactive data structures that can be used for many things, including declarative DOM construction.

It's also designed to work with jQuery, so normal jQuery objects can be manipulated using reactive programming.

There are dozens of reactive programming modules on npm, so check those out if you're interested in learning more. Also, if like me you're a Unix-focused web developer, don't underestimate Microsoft's resources on the topic because they've been doing this for a long time now.