This document introduces Reactive Extensions (RxJS) for JavaScript, which allows programming with asynchronous data streams. It discusses key RxJS concepts like Observables that emit event streams and Observers that subscribe to those streams. It provides examples of creating Observables from events, making Ajax requests, retrying failures, combining streams, and using various operators to transform and filter streams. The goal is to help developers learn how to use RxJS to compose asynchronous actions and events in a functional, reactive style.

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(console.log);

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(console.log)

14. Ajax
Rx.Observable
.fromEvent(document.getElementById('btnLoad'), 'click')
.switchMap(() => Rx.Observable.ajax.get('/package.json'))
.map(rsp => rsp.response)
.subscribe(console.log)

15. Retry failed
requests
Rx.Observable
.fromEvent(document.getElementById("btnLoad"), "click")
.switchMap(() => Rx.Observable.ajax.get("/no-package.json")
.retry(5))
.map(rsp => rsp.response)
.subscribe(console.log);

16. Retry with
backing off
Rx.Observable
.fromEvent(document.getElementById("btnLoad"), "click")
.switchMap(() =>
Rx.Observable.ajax
.get("/no-package.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);

17. Combining
streams
 Streams can be combined in may 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