Reactive Programming

with RxJS

by Daniel Bachler

A short introduction to

my last big project

• Windows desktop app (C#)
• Used by analysts to examine statistical data
• UI highly context sensitive

• Common case: one Checkbox.Enabled depends on 7 other elements. A bit like this, only more so:

Why is this bad?

• Relationship is expressed twice (event wiring & update method)
• Hard to reason about interdependencies, prone to errors
• Events are not composeable

We need "pipelines" for events

• maybe a bit like the pipelines we build with functional style libraries like underscore et al?

• functional style is declarative
• tends to express the What instead of the How

Hello reactive programming!

var checkShowVariable = document.getElementById("checkShowVariable");
var checkShowValue    = document.getElementById("checkShowValue");
var checkShowOperator = document.getElementById("checkShowOperator");

// Create Observables for the events, map the stream of data to just the checked value
var showVariableObs = Rx.Observable.fromEvent(checkShowVariable, 'change')
                        .map(e => e.target.checked)
                        .startWith(checkShowVariable.checked);
var showValueObs    = Rx.Observable.fromEvent(checkShowValue, 'change')
                        .map(e => e.target.checked)
                        .startWith(checkShowValue.checked);

// An Observable is an object that represents a stream of async event data

// Merge the two observables and specify a combination function
var combinedObs = Rx.Observable.combineLatest(showVariableObs, 
                                              showValueObs, 
                                              (showVar, showVal) => showVar && showVal);

// subscribe to the combined observable to activate it and perform the "side effect"
combinedObs.subscribe(shouldEnable => {
  if (shouldEnable)
    checkShowOperator.removeAttribute("disabled");    
  else
    checkShowOperator.setAttribute("disabled",true);    
});

code is here

What have we gained?

• Relationship expressed only once (combineLatest)
• Composition of events possible
• More declarative approach

var combinedObs = Rx.Observable.combineLatest(showVariableObs, 
                                              showValueObs, 
                                              (showVar, showVal) => showVar && showVal);

This is just the beginning

The real power of RxJS is complex interactions of async things

Promises

• Great for async operations
• Can handle errors
• Become cumbersome to handle when you have a lot of them

Example: Autocomplete

• Search field should have autocomplete (wikipedia articles)
• After the 2nd character, send an XHR to the suggestion API for every keystroke
• Throttle results
• Results may arrive out of order

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

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

// Get all distinct key up events from the input and only fire if long enough and distinct
var keyup = Rx.Observable.fromEvent($input, 'keyup')
  .map(function (e) {
    return e.target.value; // Project the text from the input
  })
  .filter(function (text) {
    return text.length > 2; // Only if the text is longer than 2 characters
  })
  .debounce(750 /* Pause for 750ms */ )
  .distinctUntilChanged(); // Only if the value has changed

var searcher = keyup.flatMapLatest(searchWikipedia);

var subscription = searcher.subscribe(
// ...
);

Observable operators hide state

• E.g. debounce needs to keep some state
• Nicely hidden from consumer

Observables are testable

it("should be able to complete", function() {
        var invoked = 0;
        xs = scheduler.createHotObservable(
            onNext(180, 1),
            onNext(210, 2),
            onNext(240, 3),
            onNext(290, 4),
            onNext(350, 5),
            onCompleted(400)
        );

        results = scheduler.startWithCreate(function () {
            return xs.map(function (x) {
                invoked++;
                return x + 1;
            });
        });

        expect(results.messages).toHaveEqualElements(
            onNext(210, 3),
            onNext(240, 4),
            onNext(290, 5),
            onNext(350, 6),
            onCompleted(400)
        );

        expect(xs.subscriptions).toHaveEqualElements(subscribe(200, 400));

        expect(invoked).toEqual(4);
    });

Sounds cool?

• Reactive programming is very powerful
• Learning curve is a little bumpy in the beginning
• Can be introduced into existing code bases in only a few places at first where it makes most sense
• But even whole app/library designs based on reactive are possible (compare Cycle JS)

Further recommended reading

• Introduction Article by André Staltz
• RxJS Getting Started
• ReactiveX Docs
• Rx Roans - Zen Koans for reactive padawans
• Rx Marbles - Visualisation of various operators
• Visualizing Hot and Cold Observables by Jared Forsyth

Thank you!

follow me on twitter: @danyx23