From zero to hero with the reactive extensions for JavaScript at the Munich Web Developer Conference 2017. http://www.web-developer-conference.de

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.

5. Observer
pattern

6. Iterator
pattern

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
 …

12. RxMarbles
Interactive diagrams of
RxObservables

13. Events
Rx.Observable
.fromEvent(
document.getElementById('btnLoad’),
'click’)
.subscribe(e => console.log(e));

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