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

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

• 1.
  Reactive Programming with JavaScript
• 2.
  I am DucPham You can reach me at pngduc@gmail.com Hi! 2
• 3.
  Audiences 3
• 4.
  Outline 1. Introduction toReactive Programming 2. Reactive Extensions and RxJS 3. Showcase 4. Discussions 4
• 5.
  Introduction to Reactive Programming 5 1
• 6.
  Events ◉ DOM events,animations ◉ Asynchronous response events ◉ Time-related events 6
• 7.
  Problems 7 Upcoming events - Incomingmessages/calls - Friends online/offline - Friend is typing - Search for friends - Add reactions - Typing/Sending messages ...
• 8.
  Old ways 8
• 9.
  Reactive Programming (with streams) 9
• 10.
  Streams = Observables 10
• 11.
  “ Reactive programming is programmingwith asynchronous data streams 11
• 12.
  Reactive Extension 12 2 A librarythat brings Reactive Programming to many languages
• 13.
  Transforming events instreams Merging, mixing several streams Dealing with time delaying events, creating interval Reactive Extension Features 13
• 14.
  Observables Operators Reactive Extension -Models 14
• 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.
  Reactive Extension -Operators 16 ◉ map ◉ filter ◉ zip ◉ flatMap/concatMap ◉ reduce/scan ◉ debounce ◉ combineWithLatest ◉ merge ….many more https://rxmarbles.com
• 17.
  Showcase 17 3
• 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.
  Functional Less is more Concurrencymade easy Advantages of applying RxJS Better codebases 22
• 20.
  Memory consumption Long learningtime Debugging Overuse Disadvantages of applying RxJS 23
• 21.
  24 Who use ReactiveX?
• 22.
  Learning path Official document https://reactivex.io Resourcesand code sample for common use-cases https://learnrxjs.io 25
• 23.
  Any questions? Thanks! 26