Why RxJS?

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.

To give you an idea about rich composition, we can create an autocompletion service which takes the user input from a text input and then query a service, making sure not to flood the service with calls for every key stroke, but instead allow to go at a more natural pace.

First, we'll reference the JavaScript files, including jQuery, although RxJS has no dependencies on jQuery...

<script src="http://code.jquery.com/jquery.js"></script>
<script src="rx.lite.js"></script>

Next, we'll get the user input from an input, listening to the keyup event by using the Rx.Observable.fromEvent method. This will either use the event binding from jQuery, Zepto, AngularJS and Ember.js if available, and if not, falls back to the native event binding. This gives you consistent ways of thinking of events depending on your framework, so there are no surprises.

part1.js

var $input = $('#input'),
    $results = $('#results');

/* Only get the value from each key up */
var keyups = Rx.Observable.fromEvent($input, 'keyup')
    .map(e => e.target.value)
    .filter(text => text.length > 2);

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

/* Now get only distinct values, so we eliminate the arrows and other control characters */
var distinct = throttled.distinctUntilChanged();

Now, let's query Wikipedia! In RxJS, we can instantly bind to any Promises A+ implementation through the Rx.Observable.fromPromise method or by just directly returning it, and we wrap it for you.

function searchWikipedia (term) {
    return $.ajax({
        url: 'http://en.wikipedia.org/w/api.php',
        dataType: 'jsonp',
        data: {
            action: 'opensearch',
            format: 'json',
            search: term
        }
    }).promise();
}

Once that is created, now we can tie together the distinct throttled input and then query the service. In this case, we'll call flatMapLatest to get the value and ensure that we're not introducing any out of order sequence calls.

var suggestions = distinct.flatMapLatest(searchWikipedia);

Finally, we call the subscribe method on our observable sequence to start pulling data.

suggestions.subscribe(data => {
    var res = data[1];

    /* Do something with the data like binding */
    $results.empty();

    $.each(res, (_, value) => $('<li>' + value + '</li>').appendTo($results));
}, error => {
    /* handle any errors */
    $results.empty();

    $('<li>Error: ' + error + '</li>').appendTo($results);
});