From zero to hero with the reactive extensions for JavaScript
Download as PPTX, PDFā¢0 likesā¢485 views
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
The document introduces Reactive Extensions for JavaScript (RxJS), covering key concepts such as observables, the observer pattern, and how to create and manage asynchronous data streams. It highlights the utility of various RxJS operators for transforming, filtering, and handling streams, as well as practical examples of using observables with event handling, AJAX requests, and merging streams. The overall conclusion emphasizes the power of reactive programming in managing complex asynchronous behavior effectively.
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: [email protected] 2
- 3. Topics ļ What is RxJS? ļ Why use it? ļ How to create observables. ļ Using operators with observables.
- 7. 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.
- 8. 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.
- 9. A clock var timer$ = new Rx.Observable(function(subscriber) { setInterval(() => subscriber.next(new Date().toLocaleTimeString()), 1000); }); timer$.subscribe(e => console.log(e));
- 10. Unsubscribing var timer$ = new Rx.Observable(function(subscriber) { var handle = setInterval(() => subscriber.next(new Date().toLocaleTimeString()), 1000); return () => clearInterval(handle); }); var subscription = timer$.subscribe(console.log); setTimeout(() => subscription.unsubscribe(), 5000);
- 11. 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 ļ ā¦
- 14. Ajax Rx.Observable .fromEvent( document.getElementById('btnLoad'), 'click') .switchMap(() => Rx.Observable.ajax.get(ā/movies.json')) .map(rsp => rsp.response) .subscribe(movies => console.table(movies));
- 15. Retry failed requests Rx.Observable .fromEvent( document.getElementById("btnLoad"), "click") .switchMap(() => Rx.Observable.ajax.get("/no-movies.json") .retry(5)) .map(rsp => rsp.response) .subscribe(console.log, console.error);
- 16. Retry with backing off Rx.Observable .fromEvent(document.getElementById("btnLoad"), "click") .switchMap(() => Rx.Observable.ajax .get("/no-movies.json") .retryWhen(error$ => error$ .map(() => 1000) .scan((p, c) => p + c) .delayWhen(wait => Rx.Observable.timer(wait)) .take(5) ) ) .map(rsp => rsp.response) .subscribe(console.log, console.error);
- 17. Combining streams ļ Streams can be combined in many ways: ļ Switching ļ Combine ļ Merging ļ Zip ļ ā¦
- 18. Merge Example var add$ = Rx.Observable .fromEvent(document.getElementById('add'), 'click') .map(() => 1); var subtract$ = Rx.Observable .fromEvent( document.getElementById('subtract'), 'click') .map(() => -1); Rx.Observable.merge(add$, subtract$) .scan((p, c) => p + c) .filter(v => v >= 0) .subscribe(console.log);
- 19. Bundeling ļ RxJS is quite large. ļ Only import what you really need!
- 20. import rxjs from 'rxjs'; rxjs.Observable.from(data) .map(e => 2 * e) .subscribe(e => console.log(e)); ECMAScript imports import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/from'; import 'rxjs/add/operator/map'; Observable.from(data) .map(e => 2 * e) .subscribe(e => console.log(e)); Ā© ABL - The Problem Solver 20
- 21. Conclusion ļ Reactive programming is very powerful. ļ Compose multiple asynchronous data streams. ļ Transform streams using operators as needed. ļ Retry failures. ļ Cancel subscriptions as needed.
- 22. Thank you Maurice de Beijer - @mauricedb