Dealing with streams using RxJs

Transcript

1. 1.

   Dealing with Streams using RxJS

2. 2.

   Hello! I am Hugo Cordier Developer and CTO at Melusyn

   Melusyn helps film makers to manage and organize their productions. You can find me at : @HugoCrd We are hiring! Drop me a line at hugo@melusyn.com ♥
3. 3.

   1. What’s an event? Javascript is about events

4. 4.

   What’s an event? DOM events clicks, moves, focuses, drags events

5. 5.

   What’s an event? Async response Ajax, Websocket events

6. 6.

   What’s an event? Timeout, interval Time related events

7. 7.

   What’s an event? Solution Callbacks & Promises

8. 8.

   2. What’s a stream? Give me use-cases!

9. 9.

   What’s a stream? A stream is a group of events

10. 10.

    What’s a stream? Double clicks How fast can you click?

11. 11.

    What’s a stream? Keyboard Konami code is a must have

    feature
12. 12.

    What’s a stream? Synchronizing async responses Requesting several services

13. 13.

    What’s a stream? Solution Reactive Extensions

14. 14.

    3. What to do with it?

15. 15.

    What to do with it? Transforming events in the Stream

16. 16.

    What to do with it? Merging, mixing Several streams

17. 17.

    What to do with it? Dealing with time Delaying events,

    creating interval, ...
18. 18.

    4. The Rx Model Observables and Operators

19. 19.

    The Rx Model A stream is an Observable An Observable

    push down events through Operators
20. 20.

    The Rx Model Operators transform a stream They can be

    used to transform, filter and mix events from an Observable
21. 21.

    The Rx Model

22. 22.

    The Rx Model

23. 23.

    The Rx Model myObservable .map(value => value+1) .filter(value => value

    > 2) Finally some code!
24. 24.

    The Rx Model

25. 25.

    The Rx Model myObservable .merge(anotherObservable) .map(value => value+1) .filter(value =>

    value > 2)
26. 26.

    The Rx Model

27. 27.

    The Rx Model myObservable .flatMap(anotherObservable) .map(value => value+1)//Values from anotherObservable

    .filter(value => value > 2)
28. 28.

    There’s a whole bunch of Operators The Rx Model http://reactivex.io/documentation/operators.html

29. 29.

    5. The Rx Model Subscribing and dealing with errors

30. 30.

    An Observable needs to be subscribed The Rx Model The

    stream will flow once it has been subscribed
31. 31.

    The Rx Model myObservable .subscribe( value => console.log(“Event”+value), e =>

    console.error(e) )
32. 32.

    6. The Rx Model Creating Observables

33. 33.

    How to create an Observable? The Rx Model

34. 34.

    The Rx Model Rx.Observable .just(1) .from([1,5,0,12,4]) .fromEvent(domElement, event) .fromNodeCallback(nodeFct) .fromPromise(promise)

    .interval(2000)
35. 35.

    The Rx Model Rx.Observable.create(s => { for (value in values)

    { s.onNext(value) } s.onCompleted() })
36. 36.

    7. In real life

37. 37.

    In real life Live search Using Google Geocoder and RxJS

    http://codepen.io/HugoCrd/pen/vOxQvM
38. 38.

    In real life Composing streams Aggregate data from several requests

    http://codepen.io/HugoCrd/pen/azGxdW
39. 39.

    In real life Realtime statistics Ping a server each x

    seconds and diplay results http://codepen.io/HugoCrd/pen/dPeaLY
40. 40.

    8. In real life RxJS is just a library. Use

    it with whatever you want
41. 41.

    In real life with... Node.js Node uses Callbacks. They can

    easily be used as a stream var rename = Rx.Observable.fromNodeCallback(fs.rename); rename('file1.txt', 'file2.txt') .map(...) .subscribe(...)
42. 42.

    In real life with... Angular.js Angular $watch is a stream

    of model changes Angular also has an eventbus system : events on a handler are a stream Rx.Observable.$watch(scope, 'name') .map(...) .subscribe(...)
43. 43.

    In real life with... Backbone.js Binding to an object is

    listening to it’s changes. This could be used as a stream. Rx.Observable.fromEvent(object, ‘click’) .map(...) .subscribe(...)
44. 44.

    In real life with... JS Wokers A worker could post

    messages to into stream Rx.DOM.fromWebWorker('worker.js') .map(...) .subscribe(...)
45. 45.

    Thanks! Any questions? We are hiring! Drop me a line

    at hugo@melusyn.com or @HugoCrd ♥
46. 46.

    This template is from SlidesCarnival