[DevDay 2019] Reactive Programming with JavaScript - By Pham Nguyen Duc, Web Developer at Agility IO
0 likes205 views
The document provides an introduction to reactive programming using JavaScript, specifically focusing on reactive extensions and RxJS. It covers concepts like observables, streams, and operators, along with practical examples such as instant search functionality. Additionally, it discusses the advantages and disadvantages of using RxJS, along with resources for further learning.
![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'
)](https://image.slidesharecdn.com/ducn-190408082709/85/DevDay-2019-Reactive-Programming-with-JavaScript-By-Pham-Nguyen-Duc-Web-Developer-at-Agility-IO-15-320.jpg)
[DevDay 2019] Reactive Programming with JavaScript - By Pham Nguyen Duc, Web Developer at Agility IO
- 2. I am Duc Pham You can reach me at pngduc@gmail.com Hi! 2
- 3. Audiences 3
- 4. Outline 1. Introduction to Reactive Programming 2. Reactive Extensions and RxJS 3. Showcase 4. Discussions 4
- 6. Events ◉ DOM events, animations ◉ Asynchronous response events ◉ Time-related events 6
- 7. Problems 7 Upcoming events - Incoming messages/calls - Friends online/offline - Friend is typing - Search for friends - Add reactions - Typing/Sending messages ...
- 8. Old ways 8
- 11. “ Reactive programming is programming with asynchronous data streams 11
- 12. Reactive Extension 12 2 A library that brings Reactive Programming to many languages
- 13. Transforming events in streams 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 Concurrency made easy Advantages of applying RxJS Better codebases 22
- 20. Memory consumption Long learning time Debugging Overuse Disadvantages of applying RxJS 23
- 22. Learning path Official document https://reactivex.io Resources and code sample for common use-cases https://learnrxjs.io 25