A talk on FRP with JS and RxJS introducing the general paradigm as well as showing some examples and real world use-cases.

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