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.

[DevDay 2019] Reactive Programming with JavaScript - By Pham Nguyen Duc, Web Developer at Agility IO

32 views

Published on

A quick introduction to Reactive Programming which is programming with asynchronous data streams. With RxJS you are given an amazing toolbox of functions to combine, create and filter any of those streams.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

[DevDay 2019] Reactive Programming with JavaScript - By Pham Nguyen Duc, Web Developer at Agility IO

  1. 1. Reactive Programming with JavaScript
  2. 2. I am Duc Pham You can reach me at pngduc@gmail.com Hi! 2
  3. 3. Audiences 3
  4. 4. Outline 1. Introduction to Reactive Programming 2. Reactive Extensions and RxJS 3. Showcase 4. Discussions 4
  5. 5. Introduction to Reactive Programming 5 1
  6. 6. Events ◉ DOM events, animations ◉ Asynchronous response events ◉ Time-related events 6
  7. 7. Problems 7 Upcoming events - Incoming messages/calls - Friends online/offline - Friend is typing - Search for friends - Add reactions - Typing/Sending messages ...
  8. 8. Old ways 8
  9. 9. Reactive Programming (with streams) 9
  10. 10. Streams = Observables 10
  11. 11. “ Reactive programming is programming with asynchronous data streams 11
  12. 12. Reactive Extension 12 2 A library that brings Reactive Programming to many languages
  13. 13. Transforming events in streams Merging, mixing several streams Dealing with time delaying events, creating interval Reactive Extension Features 13
  14. 14. Observables Operators Reactive Extension - Models 14
  15. 15. Reactive Extension - Observables 15 // From primitive data type Rx.Observable.just(12) // From array Rx.Observable.from([1, 2, 3, 4]) // From interval Rx.Observable.interval(10) // From promise Rx.Observable.fromPromise(promise) // From DOM events Rx.Observable.fromEvent( document.getElementById('keyword'), 'keyup' )
  16. 16. Reactive Extension - Operators 16 ◉ map ◉ filter ◉ zip ◉ flatMap/concatMap ◉ reduce/scan ◉ debounce ◉ combineWithLatest ◉ merge ….many more https://rxmarbles.com
  17. 17. Showcase 17 3
  18. 18. Showcases Instant Search - Codepen 19 const source = (term) => { const endpoint = `https://api.gh.com/s/repos?q=${term}`; return Rx.Observable.create(function(observer) { fetch(endpoint) .then(res => res.json()) .then(j => { observer.onNext(j.items); observer.onCompleted(); }) .catch(observer.onError); }); }; Rx.Observable.fromEvent(el, 'keyup') .map(e => e.target.value) .debounce(300) .distinctUntilChanged() .flatMapLatest(term => source(term)) .subscribe(function(data){ self.items = data; self.update(); });
  19. 19. Functional Less is more Concurrency made easy Advantages of applying RxJS Better codebases 22
  20. 20. Memory consumption Long learning time Debugging Overuse Disadvantages of applying RxJS 23
  21. 21. 24 Who use ReactiveX?
  22. 22. Learning path Official document https://reactivex.io Resources and code sample for common use-cases https://learnrxjs.io 25
  23. 23. Any questions? Thanks! 26

×