Intro RX Stream all the things 

Mark van straten @markvanstraten Q42 

“RX is a library for composing asynchronous and event-based programs by using observable sequences” 

Value Promise Enumerable ???? 

Value Promise Enumerable Observable (Subject/Observer is Dual to Iterator - Erik Meijer - http://csl.stanford.edu/~christos/pldi2010.fit/meijer.duality.pdf) 

A stream of future events is an Observable Listening to an observable is a Subscription State changes on an observable are done using Operators Concurrency is managed using Schedulers 

Promise { onResolved, onRejected } Observable { onNext, onError, onCompleted } 

SHOW ME CODE 

UI Interaction function onDoubleClick(target, callback) { let clicks = 0; let self = this; return target.on('click', () => { clicks++; if(clicks == 1) { setTimeout(() => { if(clicks === 2) { callback.call(self); } clicks = 0; }, 300); } }); const target = document.querySelector('body'); onDoubleClick(target, () => console.log(‘got doubleClick’) const target = document.querySelector('body'); const clickStream = Rx.Observable.fromEvent(target, 'click'); clickStream .buffer(clickStream.debounce(300)) .map(list => list.length) .filter(x => x == 2) .subscribe(doubleClick => console.log('got doubleClick')); 

API call retry logic // using observables function getUser(userId) { const getUserDetailsFallbacks = [ getUserFromServer(userId), getUserFromCache(userId), getEmptyUserObject(userId), ]; return Rx.Observable .catch(getUserDetailsFallbacks) .toPromise(); // optional } // using promises function getUser(userId) { return getUserFromServer(userId) .catch(err => getUserFromCache(userId) .catch(err => getEmptyUserObject(userId)) ); } 

REAL LIFE EXAMPLE 

I want to publish question(s) and retrieve my answer. If the answer is not in time throw an error. 

Match response to request const allAnswersStream = redis.subscribe(‘answers:*’) .map(parseAnswer); function getAnswerForQuestion(q) { const answerStream = allAnswersStream .filter(a => a.id === q.id); return redis.publish(‘question:${q.id}’,q) .zip(answerStream) .take(1) /* only need one answer */ .timeout(2 * 1000) /* ms */ .map(qa => qa[1]);//only need the answer } 

No content

OMG THE DOCUMENTATION 

“transform the items emitted by an Observable into Observables, then flatten the emissions from those into a single Observable” Also known as flatMap() (http://reactivex.io/documentation/operators/flatmap.html) 

No content

A LOT of operators (http://reactivex.io/documentation/operators.html) 

Start with these ● map ● filter ● scan ● mergeMap ● switchMap ● combineLatest ● concat ● do 

Find your RX Operator http://reactivex.io/rxjs/ 

No content

TESTING 

Seen this? describe('MyService', function() { // ... setup stuff it('Retrieves user details', function(done) { // increased timeout because getUser sometimes takes a long time to complete this.timeout(5000); const promise = service.getUser(1) .then(user => { expect(user).to.not.be.null; }); expect(promise).to. eventually.be.fulfilled.and.notify(done); }); }); 

RX lets you do async in virtual time for testing 

const scheduler = new Rx.TestScheduler(); const getUserFromServerStream = scheduler.createColdObservable( onNext(100, ({ id: 1, name: 'myUser' })), onCompleted(110) ); mocha.stub('getUserFromServer').returns(getUserFromServerStream); const results = scheduler.startScheduler( () => getUser(1) ); console.log(results.messages) // [0]=onNext(100, ({ id: 1, name: 'myUser' }))), [1]=onComplete(110) 

PITFALLS 

Most observables are lazy (cold) and only start when subscribed() to 

Observables might never complete. Use take(x) for clarity 

It’s easy to interleave Promises in Rx Use defer(() => myPromise()) to make them lazy 

Multiple subscribe() calls will (default) create their own observable. Use share() to make these multicast compatible. 

TAKEAWAYS 

Rx is a complex tool for reducing cognitive load when talking about the complex problem called asynchronicity 

Reference material RxJS 5 Thinking Reactively - Ben Lesh https://www.youtube.com/watch?v=3LKMwkuK0ZE http://reactivex.io http://rxmarbles.com/