Reactive Programming with RxJS

Introduction to the Reactive Extensions.
What's an Observable?
In which use cases should I use it?

Transcript

1. Functional Reactive Programming with RxJS
2. 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
3. Melusyn helps film makers to manage and organize their productions We are hiring! Drop me a line at hugo@melusyn.com ♥
4. ➜ Callbacks, Promises and Rx ➜ Rx, brief introduction ➜ Use cases and demo ➜ Rx world
5. Callbacks & Promises This guy with an iPhone has nothing to do with FRP. But look at this beautiful slide!
6. 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
7. 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...
8. 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
9. Introducing Observables Rx
10. 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.
11. Rx - Graphic representation Marble Diagrams Live exemples : http://rxmarbles.com
12. Rx - Observable are asynchronous Iterables Single return value Mutiple return values Synchronous Object Iterables(Array | Set | Map) Asynchronous Promise Observable
13. 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
14. 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”); });
15. 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')
16. 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))
17. ➜ 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
18. Rx - Understanding Flatmap
19. Real world use cases
20. ➜ 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
21. ➜ Rx.NET ➜ RxJava, RxScala, RxGroovy, RxJRuby, RxNetty, RxAndroid ➜ Rx.rb ➜ Rx.py ➜ RxClojure ➜ RxCpp ➜ RxKotlin Reactive Extensions world
22. Javascript : ➜ Bacon.js ➜ Kefir ➜ ELM (language) Not javascript : ➜ Reactive-banana, Frappuccino, React4j, ReactiveCocoa, Sodium Other FRP libraries
23. Thanks! Any questions? You can find me at: @HugoCrd hugo@melusyn.com Did I tell you we’re hiring?
24. 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)