Reactive Programming with RxJS

D079ae232a278250e36c264dfebe41d2?s=47 Hugo Cordier
February 25, 2015

Reactive Programming with RxJS

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

D079ae232a278250e36c264dfebe41d2?s=128

Hugo Cordier

February 25, 2015
Tweet

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)