Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Andrii Datsenko «Practical RxJS»

222 views

Published on

Reactive programming demystified

Published in: Software
  • Be the first to comment

  • Be the first to like this

Andrii Datsenko «Practical RxJS»

  1. 1. www.luxoft.com Reactive programming demystified Datsenko Andrii <ASDatsenko@luxoft.com> 16 February 2017 PRACTICAL RXJS
  2. 2. www.luxoft.com Who is that guy?  Andrii Datsenko  Luxoft  Senior JavaScript Developer  5+ years experience  AngularJS, React lover  http://github.com/andrewdacenko
  3. 3. www.luxoft.com WHAT IS FRONT-END ABOUT?
  4. 4. www.luxoft.com REACT TO USER ACTIONS
  5. 5. www.luxoft.com Actions  Mouse events  Keyboard events  Data loading events  Animation events  File processing events  Socket events  Web Workers events
  6. 6. www.luxoft.com WHAT IS THE KEY?
  7. 7. www.luxoft.com EVENTS
  8. 8. www.luxoft.com Events love callbacks
  9. 9. www.luxoft.com Handling Events  Callbacks  Promises  …  Better way?  Callback Hell  Single value  …  Zero or more future values
  10. 10. www.luxoft.com RXJS IS LODASH FOR EVENTS
  11. 11. www.luxoft.com Array Like const x = list .map(x => x.prop) .filter(x => x > 2); console.log(x) list .map(x => x.prop) .filter(x => x > 2) .subscribe(x => console.log(x) );
  12. 12. www.luxoft.com Events Example var button = document.querySelector('button'); button.addEventListener('click', () => console.log('Clicked!')); var button = document.querySelector('button'); Rx.Observable.fromEvent(button, 'click') .subscribe(() => console.log('Clicked!'));
  13. 13. www.luxoft.com Observables Observables are lazy Push collections of multiple values. Single Multiple Pull Function Iterator Push Promise Observable
  14. 14. www.luxoft.com Observable Creation
  15. 15. www.luxoft.com Observable Creation
  16. 16. www.luxoft.com Observable Complete
  17. 17. www.luxoft.com Observable Error
  18. 18. www.luxoft.com Observable Dispose
  19. 19. www.luxoft.com Same with JS
  20. 20. www.luxoft.com HOT VS COLD
  21. 21. www.luxoft.com U Hot & U Cold
  22. 22. www.luxoft.com Hot vs Cold Cold Hot
  23. 23. www.luxoft.com Hot vs Cold Cold Hot
  24. 24. www.luxoft.com Hot
  25. 25. www.luxoft.com SUBJECT
  26. 26. www.luxoft.com
  27. 27. www.luxoft.com Subject  Observable  Observer
  28. 28. www.luxoft.com Behavior Subject
  29. 29. www.luxoft.com Behavior Subject
  30. 30. www.luxoft.com Replay Subject
  31. 31. www.luxoft.com Replay Subject
  32. 32. www.luxoft.com OPERATORS
  33. 33. www.luxoft.com OPERATORS BE LIKE
  34. 34. www.luxoft.com Operators Creation Operators  create  of  empty  fromEvent  fromPromise  interval  … Transform Operators  map  mergeMap  pluck  window  buffer  scan  … Filtering Operators  filter  take  last  debounce  throttle  distinctUntillChanged  …
  35. 35. www.luxoft.com Operators Combination Operators  combine  concat  merge  race  zip  … Multicasting Operators  cache  multicast  publish  share  … Error Handling Operators  catch  retry  retryWhen
  36. 36. www.luxoft.com Marbles
  37. 37. www.luxoft.com SCHEDULERS
  38. 38. www.luxoft.com Schedulers Scheduler Purpose null Constant-time operations or tail recursive operations Rx.Scheduler.queue Current event frame for iteration operations Rx.Scheduler.asap Micro task queue, which uses the fastest transport mechanism available Rx.Scheduler.async setInterval for time-based operations
  39. 39. www.luxoft.com REAL USE AND LIBS
  40. 40. www.luxoft.com WebSockets make ws emit message close connection make it hot close socket create socket create socket
  41. 41. www.luxoft.com Real Project External updates Internal filters Internal sorting
  42. 42. www.luxoft.com Real Project External updates Internal sorting Internal filtering Cancel existing request Change to other Observable Don’t fail when error occurs And we can subscribe
  43. 43. www.luxoft.com Angular
  44. 44. www.luxoft.com Redux
  45. 45. www.luxoft.com Resources  http://rxmarbles.com  https://www.learnrxjs.io  http://reactivex.io/rxjs/  https://egghead.io/technologies/rx
  46. 46. www.luxoft.com THANK YOU

×