1.
Functional Reactive
Programming in JS
Mario Zupan
@mzupzup
Stefan Mayer
@stefanmayer13

2.
Who are we?
@stefanmayer13 @mzupzup

3.
Motivation
■ Technology stack re-evaluation
■ Lessons learned
■ Functional Programming
■ QCon NYC

4.
What is Functional Reactive
Programming?

5.
Reactive Manifesto

6.
Reactive Manifesto
? ?
? ?

7.
Functional Programming
■ Evaluation of mathematical functions
■ Avoid mutable state
■ Referential transparency
■ Avoid side-effects
■ Reusable functions over reusable object
■ Function composition over object
composition

8.
Functional Programming
■ map
■ filter
■ mergeAll
■ reduce
■ zip

9.
var data = [1, 2, 3, 4, 5];
var numbers = data.map(function (nr) {
return nr + 1;
});
//numbers = [2, 3, 4, 5, 6]

10.
var data = [1, 2, 3, 4, 5, 6, 7];
var numbers = data.filter(function (nr) {
return nr % 2 === 0;
});
// numbers = [2, 4, 6]

11.
var data = [1, 2, 3, 4, 5, 6, 7];
var numbers = data.map(function (nr) {
return nr + 1;
}).filter(function (nr) {
return nr % 2 === 0;
});
// numbers = [2, 4, 6, 8]

12.
var data = [[1, 2], [3, 4], 5, [6], 7, 8];
var numbers = data.mergeAll();
// numbers = [1, 2, 3, 4, 5, 6, 7, 8]

13.
var data = [{
numbers: [1, 2]
}, {
numbers: [3, 4]
};
var numbersFlatMap = data.flatMap(function (object) {
return object.numbers;
});
// numbersMap = [[1, 2], [3, 4]]
// numbersFlatMap = [1, 2, 3, 4]

14.
var data = [1, 2, 3, 4];
var sum = data.reduce(function(acc, value) {
return acc + value;
});
// sum = 10

15.
var data = [5, 7, 3, 4];
var min = data.reduce(function(acc, value) {
return acc < value ? acc : value;
});
// min = 3

16.
var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var array = Array.zip(array1, array2,
function(left, right) {
return [left, right];
});
// array = [[1, 4], [2, 5], [3, 6]]

17.
Reactive Programming
■ Asynchronous data streams
■ Everything is a stream
● click events
● user inputs
● data from a server
■ streams rock!

18.
Reactive Programming

19.
F + R + P
■ Powerful Composition and Aggregation of
streams
■ Good fit for concurrent and event-driven
systems
■ Declarative
■ Easy to test

20.
Observables
■ Stream of data over time
■ Hot vs Cold Observables
■ Asynchronous
■ Lazy
■ queryable, bufferable, pausable…
■ more than 120 operations

21.
Observable Creation
Rx.Observable.fromArray([1, 2, 3]);
Rx.Observable.fromEvent(input, 'click');
Rx.Observable.fromEvent(eventEmitter, 'data', fn);
Rx.Observable.fromCallback(fs.exists);
Rx.Observable.fromNodeCallback(fs.exists);
Rx.Observable.fromPromise(somePromise);
Rx.Observable.fromIterable(function*() {yield 20});

22.
var range = Rx.Observable.range(1, 3); // 1, 2, 3
var range = range.subscribe(
function(value) {},
function(error) {},
function() {}
);
Observable Basics
optional

23.
var range = Rx.Observable.range(1, 10) // 1, 2, 3 ...
.filter(function(value) { return value % 2 === 0; })
.map(function(value) { return "<span>" + value + "</span>"; })
.takeLast(1);
var subscription = range.subscribe(
function(value) { console.log("last even value: " + value); });
// "last even value: <span>10</span>"
Observable Basics

24.
Cold Observables

25.
Hot Observables

26.
Autocomplete
● Multiple requests
● Async results
● Race conditions
● State
● ...

27.
Autocomplete 1/2
var keyup = Rx.Observable.fromEvent(input, 'keyup')
.map(function (e) {
return e.target.value; // map to text
})
.filter(function (input) {
return input.length > 2; // filter relevant values
})
.debounce(250)

28.
.distinctUntilChanged() // only if changes
.flatMapLatest(doAsyncSearch() // do async search on server
.retry(3))
.takeUntil(cancelStream) // chancel stream
.subscribe(
function (data) { // do UI stuff },
function (error) { // do error handling }
);
Autocomplete 2/2

29.
Drag & Drop 1/2
var mousedown = Rx.Observable.fromEvent(dragTarget, 'mousedown');
var mousemove = Rx.Observable.fromEvent(document, 'mousemove');
var mouseup = Rx.Observable.fromEvent(dragTarget, 'mouseup');

30.
mousedown.flatMap(function (md) {
// get starting coordinates
var startX = md.offsetX, startY = md.offsetY;
return mousemove.map(function (mm) {
// return the mouse distance from start
return {left: mm.clientX - startX, top: mm.clientY - startY };
}).takeUntil(mouseup);
}).subscribe(function (pos) {
// do UI stuff
});

31.
Some Cool Stuff on Observables
.bufferWithTime(500)
.pausable(pauser), .pausableBuffered(..)
.repeat(3)
.skip(1), skipUntilWithTime(..)
.do() // for side-effects like logging
.onErrorResumeNext(second) // resume with other obs
.window() // project into windows
.timestamp() // add time for each value
.delay()

32.
RxJS
Supported
■ IE6+
■ Chrome 4+
■ FireFox 1+
■ Node.js v0.4+
Size (minified & gzipped):
■ all - 23,1k
■ lite - 13,5k
■ compat - 12,5k
■ ES5 core - 12k

33.
Framework Bridges
■ AngularJS
■ ReactJS
■ jQuery
■ ExtJS
■ NodeJS
■ Backbone
■ ...

34.
Companies using Rx in Production

35.
Alternatives to RxJS
■ BaconJS
■ Kefir
■ (Elm)

36.
Conclusion
■ There is a learning curve
■ Great abstraction for async & events
■ Improves
● Readability
● Reusability
● Scalability
■ Both on the front- and backend

37.
Image references
■ KefirJS - https://camo.githubusercontent.com/
■ BaconJS - http://baconjs.github.io
■ data stream - http://www.pharmmd.com/
■ Elm - http://elm-lang.org
■ Browsers - http://www.thechrisyates.com/
■ websocket logo - http://blog.appharbor.com/
■ drag n drop - http://dockphp.com/
■ f(x) - http://www.ylies.fr/
■ qcon - https://qconsf.com/
■ check sign - http://www.cclscorp.com
■ map - http://reactivex.io/
■ reactivex logo - http://reactivex.io
■ chuck norris - http://www.quickmeme.com/
■ sencha - http://www.sencha.com/
■ reactive companies - http://www.reactivex.io
■ filter reactive - https://raw.githubusercontent.com/wiki/ReactiveX/RxJava/
■ node logo - http://calebmadrigal.com/
■ extjs - http://marceloagustini.files.wordpress.com/
■ hot observables - http://blogs.msdn.com/
■ cold observables - http://blogs.msdn.com/
■ backbone - http://2.bp.blogspot.com/
■ reactjs - http://moduscreate.com/
■ angular - http://www.w3schools.com/
■ reactive diagram observables - http://buildstuff14.sched.org/event/9ead0e99b3c1c0edddec6c7c8d526125#.VHEgq5PF-kQ
■ reactivemanifesto - http://www.reactivemanifesto.org

38.
Learning RxJS
■ RxKoans
○ https://github.com/Reactive-Extensions/RxJSKoans
■ learnRx
○ https://github.com/jhusain/learnrx
■ The Introduction to Reactive Programming you've been
missing
○ https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
■ rxMarbles
○ http://rxmarbles.com/

39.
Thank you
@stefanmayer13
@mzupzup