From zero to hero with the reactive extensions for JavaScript
Download as PPTX, PDF0 likes198 views
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
This document introduces Reactive Extensions for JavaScript (RxJS) and outlines concepts like observable creation, the observer pattern, and reactive programming. It emphasizes the power of RxJS in composing and transforming asynchronous data streams through various operators. The author, Maurice de Beijer, highlights practical applications, such as handling events and data fetching, alongside the benefits of retrying and canceling subscriptions.
From zero to hero with the reactive extensions for JavaScript
- 1. From zero to hero with the Reactive Extensions forJavaScript Maurice de Beijer @mauricedb
- 2. Who am I? Maurice de Beijer The Problem Solver MicrosoftAzure MVP Freelance developer/instructor Twitter: @mauricedb and @React_Tutorial Web: http://www.TheProblemSolver.nl E-mail: maurice.de.beijer@gmail.com 2
- 4. Topics What is RxJS? Why use it? How to create observables. Using operators with observables.
- 9. Why? Reactive programming. Programming with asynchronous data streams. Most actions are not standalone occurrences. Example: A mouse click triggers an Ajax request which triggers a UI update. RxJS composes these streams in a functional style.
- 10. Filtering data
- 12. With RxJS
- 13. Fetching data
- 14. With promises
- 15. With RxJS
- 16. Timer based
- 18. With RxJS
- 19. Observables
- 20. The RxJS Observable An Observable is the object that emits a stream of event. The observer is the code that subscribes to the event stream.
- 21. A simple clock
- 22. Unsubscribing
- 24. Operators
- 25. RxJS operators Operators are used to operate on the event stream between the source and the subscriber. There are many operators for all sorts of purposes: Transforming Filtering Combining Error handling Aggregate …
- 27. Events
- 28. Ajax
- 31. Combining streams Streams can be combined in may ways: Switching Combine Merging Zip …
- 32. Merge Example
- 33. Paint example
- 34. Conclusion Reactive programming is very powerful. Compose multiple asynchronous data streams. Transform streams using operators as needed. Retry failures. Cancel subscriptions as needed.
- 35. Thank you Maurice de Beijer - @mauricedb
Editor's Notes
- #22: import { Observable } from 'rxjs'; const timer$ = Observable.create(subscriber => { setInterval(() => subscriber.next(new Date().toLocaleTimeString()), 1000); }); timer$.subscribe(e => console.log(e));
- #23: import { Observable } from 'rxjs'; const timer$ = Observable.create(subscriber => { const handle = setInterval( () => subscriber.next(new Date().toLocaleTimeString()), 1000 ); return () => clearInterval(handle); }); const subscription = timer$.subscribe(e => console.log(e)); setTimeout(() => subscription.unsubscribe(), 5000);
- #24: import { interval } from 'rxjs'; const timer$ = interval(1000); const subscription = timer$.subscribe(e => console.log(e)); setTimeout(() => subscription.unsubscribe(), 5000);
- #28: import { fromEvent } from 'rxjs'; fromEvent(document.getElementById('btnStart'), 'click').subscribe( e => console.log(e) );
- #29: import { fromEvent } from 'rxjs'; import { ajax } from 'rxjs/ajax'; import { switchMap } from 'rxjs/operators'; fromEvent(document.getElementById('btnStart'), 'click') .pipe(switchMap(() => ajax.get('http://TheProblemSolver.nl'))) .subscribe(e => console.log(e));
- #30: import { fromEvent } from 'rxjs'; import { ajax } from 'rxjs/ajax'; import { switchMap, retry, map } from 'rxjs/operators'; fromEvent(document.getElementById('btnStart'), 'click') .pipe( switchMap(() => ajax.get('http://TheProblemSolver.nl/not-found.json') .pipe(retry(5)) ), map(rsp => rsp.response) ) .subscribe(console.log);
- #31: import { fromEvent, timer } from 'rxjs'; import { ajax } from 'rxjs/ajax'; import { switchMap, retryWhen, map, scan, delayWhen, take } from 'rxjs/operators'; fromEvent(document.getElementById('btnStart'), 'click') .pipe( switchMap(() => ajax.get('http://TheProblemSolver.nl/not-found.json').pipe( retryWhen(error$ => error$.pipe( map(() => 1000), scan((p, c) => p + c), delayWhen(wait => timer(wait)), take(5) ) ) ) ), map(rsp => rsp.response) ) .subscribe(e => console.log(e));
- #33: import { fromEvent, merge } from 'rxjs'; import { map, scan, filter } from 'rxjs/operators'; const add$ = fromEvent(document.getElementById('add'), 'click').pipe( map(() => 1) ); const subtract$ = fromEvent(document.getElementById('subtract'), 'click').pipe( map(() => -1) ); merge(add$, subtract$) .pipe( scan((previous, current) => previous + current), filter(value => value >= 0) ) .subscribe(e => console.log(e));
- #36: https://www.flickr.com/photos/stevendepolo/4582437563/