Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Functional Reactive Programming with RxJS

Talk by @mzupzup and @stefanmayer13 about Functional Reactive Programming in JavaScript at the 4th grazjs meetup (http://www.meetup.com/grazjs/).

  • Identifiez-vous pour voir les commentaires

Functional Reactive Programming with RxJS

  1. 1. Functional Reactive Programming in JS Mario Zupan @mzupzup Stefan Mayer @stefanmayer13
  2. 2. Who are we? @stefanmayer13 @mzupzup 2
  3. 3. Motivation ■ Technology stack re-evaluation ■ Lessons learned ■ Functional Programming ■ QCon NYC [1] 3
  4. 4. What is Functional Reactive Programming? 4
  5. 5. Reactive Manifesto [2] 5
  6. 6. Reactive Manifesto ? ? ? ? [2] 6
  7. 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 [1] 7
  8. 8. Functional Programming ■ map ■ filter ■ mergeAll ■ reduce ■ zip [3] [4] 8
  9. 9. var data = [1, 2, 3, 4, 5]; var numbers = data.map(function (nr) { return nr + 1; }); // numbers = [2, 3, 4, 5, 6] 9
  10. 10. var data = [1, 2, 3, 4, 5, 6, 7]; var numbers = data.filter(function (nr) { return nr % 2 === 0; }); // numbers = [2, 4, 6] 10
  11. 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] 11
  12. 12. var data = [[1, 2], [3, 4], 5, [6], 7, 8]; var numbers = data.mergeAll(); // numbers = [1, 2, 3, 4, 5, 6, 7, 8] 12
  13. 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] 13
  14. 14. var data = [1, 2, 3, 4]; var sum = data.reduce(function(acc, value) { return acc + value; }); // sum = 10 14
  15. 15. var data = [5, 7, 3, 4]; var min = data.reduce(function(acc, value) { return acc < value ? acc : value; }); // min = 3 15
  16. 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]] 16
  17. 17. Reactive Programming ■ Asynchronous data streams ■ Everything is a stream ● click events ● user inputs ● data from a server ■ streams rock! 17
  18. 18. Reactive Programming [5] 18
  19. 19. F + R + P ■ Powerful composition and aggregation of streams ■ Good fit for concurrent and event-driven systems ■ Declarative ■ Easy to test [6] 19
  20. 20. Observables ■ Stream of data over time ■ Hot vs cold observables ■ Asynchronous ■ Lazy ■ queryable, bufferable, pausable… ■ more than 120 operations [7] 20
  21. 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}); 21
  22. 22. Observable Basics var range = Rx.Observable.range(1, 3); // 1, 2, 3 var range = range.subscribe( function(value) {}, function(error) {}, function() {} ); optional 22
  23. 23. Observable Basics 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>" 23
  24. 24. Cold Observables [8] 24
  25. 25. Hot Observables [9] 25
  26. 26. Autocomplete ● Multiple requests ● Async results ● Race conditions ● State ● ... [10] 26
  27. 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) 27
  28. 28. Autocomplete 2/2 .distinctUntilChanged() // only if changes .flatMapLatest(doAsyncSearch() // do async search on server .retry(3)) .takeUntil(cancelStream) // cancel stream .subscribe( function (data) { // do UI stuff }, function (error) { // do error handling } ); 28
  29. 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'); [11] 29
  30. 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 }); [11] 30
  31. 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() 31
  32. 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 [12] 32
  33. 33. Framework Bridges ■ AngularJS ■ ReactJS ■ jQuery ■ ExtJS ■ NodeJS ■ Backbone ■ ... 33
  34. 34. Companies using Rx in Production [13] 34
  35. 35. Alternatives to RxJS ■ BaconJS ■ Kefir ■ (Elm) 35
  36. 36. Conclusion ■ There is a learning curve ■ Great abstraction for async & events ■ Improves ● Readability ● Reusability ● Scalability ■ Both on the front- and backend 36
  37. 37. 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/ 37
  38. 38. Image references ■ 1 - http://www.ylies.fr/ ■ 2 - http://www.reactivemanifesto.org ■ 3 - http://reactivex.io/ ■ 4 - https://raw.githubusercontent.com/wiki/ReactiveX/RxJava/ ■ 5 - http://buildstuff14.sched.org/event/9ead0e99b3c1c0edddec6c7c8d526125#.VHEgq5PF-kQ ■ 6 - http://www.cclscorp.com ■ 7 - http://www.pharmmd.com/ ■ 8 - http://blogs.msdn.com/ ■ 9 - http://blogs.msdn.com/ ■ 10 - https://www.google.at ■ 11 - http://dockphp.com/ ■ 12 - http://www.thechrisyates.com/ ■ 13 - http://www.reactivex.io ■ 14 - http://www.quickmeme.com/ 38
  39. 39. Thank you @stefanmayer13 @mzupzup [14] 39

×