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
3. Topics  What is RxJS?  Why use it?  How to create observables.  Using operators with observables.
4. Observer pattern
5. Iterator pattern
6. 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.
7. Filtering data
8. With array functions
9. With RxJS
10. Timer based
11. With imperative code
12. With RxJS
13. Fetching data
14. With promises
15. With RxJS
16. Observables
17. 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.
18. A simple clock
19. Unsubscribing
20. Creating observables
21. Operators
22. 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  …
23. RxMarbles Interactive diagrams of RxObservables
24. Events
25. Ajax
26. Retry failed requests
27. Retry with backing off
28. Combining streams  Streams can be combined in may ways:  Switching  Combine  Merging  Zip  …
29. Merge Example
30. Paint example
31. Conclusion  Reactive programming is very powerful.  Compose multiple asynchronous data streams.  Transform streams using operators as needed.  Retry failures.  Cancel subscriptions as needed.
32. Thank you Maurice de Beijer - @mauricedb

Editor's Notes

import { Observable } from 'rxjs';
const timer$ = Observable.create(subscriber => {
setInterval(() => subscriber.next(new Date().toLocaleTimeString()), 1000);
});
timer$.subscribe(e => console.log(e));

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);

import { interval } from 'rxjs';
const timer$ = interval(1000);
const subscription = timer$.subscribe(e => console.log(e));
setTimeout(() => subscription.unsubscribe(), 5000);

import { fromEvent } from 'rxjs';
fromEvent(document.getElementById('btnStart'), 'click').subscribe(
e => console.log(e)
);

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));

import { switchMap, retry, map } from 'rxjs/operators';
.pipe(
switchMap(() =>
ajax.get('http://TheProblemSolver.nl/not-found.json')
.pipe(retry(5))
),
map(rsp => rsp.response)
)
.subscribe(console.log);

import { fromEvent, timer } from 'rxjs';
import {
switchMap,
retryWhen,
map,
scan,
delayWhen,
take
} from 'rxjs/operators';
.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)
)

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)
)

https://www.flickr.com/photos/stevendepolo/4582437563/

From zero to hero with the Reactive extensions for JavaScript

You are reading a preview.

From zero to hero with the Reactive extensions for JavaScript

More Related Content

Similar to From zero to hero with the Reactive extensions for JavaScript

More from Maurice De Beijer [MVP]

Featured

Related Books

Related Audiobooks