Download to read offline
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1756998088)
Uploaded byMaurice De Beijer [MVP]
From zero to hero with the Reactive extensions for JavaScript
The document introduces Reactive Extensions for JavaScript (RxJS), a library for composing asynchronous and event-based programs using observable sequences. It covers key concepts such as creating observables, using operators for data manipulation, and the advantages of reactive programming in managing asynchronous data streams. The author emphasizes the power of RxJS in transforming and composing multiple streams efficiently.
From zero to hero with the Reactive extensions for JavaScript
- 1. From zero tohero 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 isRxJS? Why use it? How to create observables. Using operators with observables.
- 7.
- 8.
- 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.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. The RxJS Observable AnObservable is the object that emits a stream of event. The observer is the code that subscribes to the event stream.
- 21.
- 22.
- 23.
- 24.
- 25. RxJS operators Operatorsare 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 …
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. Combining streams Streams canbe combined in may ways: Switching Combine Merging Zip …
- 32.
- 33.
- 34. Conclusion Reactive programmingis very powerful. Compose multiple asynchronous data streams. Transform streams using operators as needed. Retry failures. Cancel subscriptions as needed.
- 35. Thank you Maurice deBeijer - @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/