Reactive Programming

with RxJS

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:

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

function updateShowOperatorEnabled() {
  var enabled = (checkShowVariable.checked && checkShowValue.checked);

  if (enabled )
    checkShowOperator.removeAttribute("disabled");    
  else
    checkShowOperator.setAttribute("disabled",true);
}

checkShowVariable.onchange = updateShowOperatorEnabled;
checkShowValue.onchange    = updateShowOperatorEnabled;

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?

const source = [1, 2, 3, 4, 5];
const filtered = [];

for (let i = 0; i < source.length; i++)
  if (source[i] % 2 === 0)
    filtered.push(source[i]);

for (let x of filtered)
  console.log(x);

const filtered = _([1, 2, 3, 4, 5])
                  .filter(x => x % 2 === 0);

for (let x of filtered.value())
    console.log(x);

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);

What is this Observable again?

"Object that can be observed by an Observer"

Something that:

will produce values in the future
can be chained together with other Observables (to form "pipelines")
has a subscribe method. Values will be pushed to anything that subscribes

Observables are push based!

Nothing "happens" when the Observable is created
Only the call to subscribe activates the originating event subscription
subscribe returns a Disposable, used to (optionally) unsubscribe and release the underlying resources

subscribe(

onNext, // next element

onError, // canceled with error (~ exception)

onCompleted // completed (only applies to some sources)

) // -> returns a Disposable

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(
// ...
);

flatMap

flatMapLatest

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