Functional Reactive Programming with RxJS 

RxJS I am Hugo Cordier CTO at Melusyn Javascript developer Java/Groovy developer You can find me at: @HugoCrd With a lot of non related stock photos 

Melusyn helps film makers to manage and organize their productions We are hiring! Drop me a line at [email protected] ♥ 

➜ Callbacks, Promises and Rx ➜ Rx, brief introduction ➜ Use cases and demo ➜ Rx world 

Callbacks & Promises This guy with an iPhone has nothing to do with FRP. But look at this beautiful slide! 

Callbacks - Welcome to hell getAsync1(function (r1, e) { if (er) return error(e) getAsync2(function (r2, e) { if (er) return error(e) getAsync3(function (r3, e) { if (er) return error(e) getAsync4(function (r4, e) { doSomething(r1, r2, r3, r4) }) }) }) }) Error handling becomes messy Hard to understand what the developer intended to do 

Promises - Good answer to callbacks var promisedR1 = getAsync1() var promisedR2 = getAsync2() var promisedR3 = getAsync3() Promise .all([promisedR1,promisedR2,promisedR3]) .then(function(results) { doSomething(results) }) That’s neat! But... 

Promises - But... You can’t use Promises to ➜ Process events (UI, Push from server, Angular-style $watch, ...) ➜ Use time-related logic (Timeout, Delay, Debounce, …) ➜ Compose async sources together 

Introducing Observables Rx 

Rx - Observables An Observable can : ➜ emit events (0 to ∞) ➜ emit an Error ➜ complete stream Once an Error has been emitted, no further events can be. An Observable could not complete. 

Rx - Graphic representation Marble Diagrams Live exemples : http://rxmarbles.com 

Rx - Observable are asynchronous Iterables Single return value Mutiple return values Synchronous Object Iterables(Array | Set | Map) Asynchronous Promise Observable 

Rx - Array/Observable parallel Iterable (Array) [1,2,3,4] .map(v => v+1) .filter(v => v>2) .forEach(v => { console.log(v) }) Observable observableSource .map(v => v+1) .filter(v => v>2) .subscribe(v => { console.log(v) }) This is asynchronous 

Rx - Create an Observable // Manually var source = Rx.Observable.create(function (observer) { observer.onNext(12); observer.onNext(34); observer.onNext(5); observer.onNext(8); observer.onCompleted(); //or observer.onError(“Oops”); }); 

Rx - Create an Observable // From object Rx.Observable.just(12) // From array Rx.Observable.from([12,34,5,6]) // From interval Rx.Observable.interval(100) // From promise Rx.Observable.fromPromise(promise) // From DOM event Rx.Observable.fromEvent(document.getElementById ('searchField'), 'keyup') 

Rx - Create an Observable // From Node.js Callback, Events, Streams Rx.Node.fromNodeCallback(fs.stat)('file.txt') Rx.Node.fromEvent(eventEmitter, 'eventName') Rx.Node.fromStream(process.stdin) Rx.Node.fromReadableStream(process.stdin) Rx.Node.fromTransformStream(getTransformStreamSomehow()) // From Angular $watch Rx.Observable.$watch(scope, 'search') .flatMap(search => $http.get('api/search/'+search)) .subscribe(result => console.log(result)) 

➜ map, filter, reduce, skip, take ➜ zip, merge, concat ➜ repeat, retry ➜ delay, debounce, interval ➜ window, buffer ➜ flatmap https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/observable.md Rx - Operators 

Rx - Understanding Flatmap 

Real world use cases 

➜ Live search http://codepen.io/HugoCrd/pen/VYxBXW ➜ Composed search http://codepen.io/HugoCrd/pen/azGxdW ➜ Server monitoring http://codepen.io/HugoCrd/pen/dPeaLY Rx - Use cases 

➜ Rx.NET ➜ RxJava, RxScala, RxGroovy, RxJRuby, RxNetty, RxAndroid ➜ Rx.rb ➜ Rx.py ➜ RxClojure ➜ RxCpp ➜ RxKotlin Reactive Extensions world 

Javascript : ➜ Bacon.js ➜ Kefir ➜ ELM (language) Not javascript : ➜ Reactive-banana, Frappuccino, React4j, ReactiveCocoa, Sodium Other FRP libraries 

Thanks! Any questions? You can find me at: @HugoCrd [email protected] Did I tell you we’re hiring? 

CREDITS Special thanks to all the people who made and released these awesome resources for free: ➜ Simple line icons by Mirko Monti ➜ E-commerce icons by Virgil Pana ➜ Streamline iconset by Webalys ➜ Presentation template by SlidesCarnival ➜ Photographs by Death to the Stock Photo (license)