Connect.Tech 2017: Dive into RxJS Observables

1.

Dive into RxJS Jeremy Fairbank @elpapapollo / jfairbank Observables

2.

Software is broken. We are here to fix it. Say
hi@testdouble.com

3.

Async

4.

Async API Callback

5.

Callback fetchUserById(1, function(err, user) { if (err) { console.error('Could not
retrieve user'); } else { console.log(user); } });

6.

}); }); }); }); }); }); Callback Callback Callback Callback
Callback Callback

7.

function fetchCustomerNameForOrder(orderId, done, fail) { fetchOrder(orderId, function(err, order) { if
(err) { logError(err); fail(err); } else { fetchCustomer( order.customerId, function(err, customer) { if (err) { logError(err); fail(err); } else { done(customer.name); } } ); } }); }

8.


9.


10.

Async API ?

11.

Promise function fetchCustomerNameForOrder(orderId) { return fetchOrder(orderId) .then(order => fetchCustomer(order.customerId)) .then(customer
=> customer.name); }

12.

.then(...) .then(...) .then(...) .then(...) .then(...) .then(...) .then(...) .then(...)

13.

Error Error Error Error

14.

function fetchCustomerNameForOrder(orderId) { return fetchOrder(orderId) .then(order => fetchCustomer(order.customerId)) .then(customer =>
customer.name) .catch(err => { logError(err); throw err; }); }

15.

Getting there…

16.

• More readable and maintainable async code • Better error
handling • More declarative and versatile syntax • Capable of handling events, streams, and HTTP

17.

RxJS Observables

18.

Arrays [ 1, 2, 3, 4, 5 ] Sequences in
space

19.

Observables Sequences in time 1 2 3 4 5

20.

Reactive

21.

Reactive 3

22.

const { Observable } = require('rxjs'); const source = Observable.of(1,
2, 3); source.subscribe(x => console.log(x)); // 1 // 2 // 3

23.


24.


25.


26.

Observable.of(1, 2, 3) .subscribe(x => console.log(x)); console.log subscribe

27.

Observable.of(1, 2, 3) .subscribe(x => console.log(x)); console.log subscribe 1

28.


29.


30.


31.


32.


33.


34.


35.

Declarative Transformation Operate on events

36.

Observable.of(1, 2, 3) .map(n => n * 2) .subscribe(x =>
console.log(x)); // 2 // 4 // 6

37.

console.log(x)); // 2 // 4 // 6

38.

Observable.of(1, 2, 3) console.log n * 2 map subscribe

39.

Observable.of(1, 2, 3) console.log n * 2 map subscribe 1

40.


41.


42.


43.


44.


45.


46.


47.


48.


49.


50.


51.


52.


53.

Lazy Transformation Do only as much work as needed

54.

Observable.range(1, 100) .map(n => n * 2) .filter(n => n
> 4) .take(2) .subscribe(x => console.log(x)); // 6 // 8

55.


56.


57.


58.


59.

console.log n * 2 map subscribe n > 4 Observable.range(1,
100) filter 2 take

60.

console.log n * 2 map subscribe n > 4 1
Observable.range(1, 100) filter 2 take

61.


62.


63.


64.

Observable.range(1, 100) filter 2 take ×

65.

100) filter 2 take

66.


67.


68.


69.

100) filter 2 take 4

70.

100) filter 2 take 4 ×

71.

100) filter 2 take

72.


73.


74.


75.


76.

✓ console.log n * 2 map subscribe n > 4
Observable.range(1, 100) filter 2 take 6

77.


78.


79.

100) filter 1 take

80.


81.


82.


83.


84.

✓ console.log n * 2 map subscribe n > 4
Observable.range(1, 100) filter 1 take 8

85.


86.


87.

DOM Events

88.

let counter = 0; function updateCounter(n) { counter += n;
counterEl.innerHTML = counter; } incrementBtn.addEventListener('click', () => { updateCounter(1); }); decrementBtn.addEventListener('click', () => { updateCounter(-1); });

89.

let counter = 0; function updateCounter(n) { counter += n;
counterEl.innerHTML = counter; } incrementBtn.addEventListener('click', () => { updateCounter(1); }); decrementBtn.addEventListener('click', () => { updateCounter(-1); });

90.

Observable.fromEvent(incrementBtn, 'click') .mapTo(1) .scan((acc, curr) => acc + curr, 0)
.subscribe((counter) => { counterEl.innerHTML = counter; });

91.


92.


93.


94.


95.


96.


97.

.scan((acc, curr) => acc + curr, 0) Accumulated counter value

98.

.scan((acc, curr) => acc + curr, 0) Current event value
(1)

99.

.scan((acc, curr) => acc + curr, 0) Return new accumulated
counter value

100.

.scan((acc, curr) => acc + curr, 0) Initial counter value

101.

counterEl.innerHTML = counter acc + curr 1 mapTo subscribe 0
scan

102.

acc + curr 1 mapTo subscribe e scan 0 counterEl.innerHTML
= counter

103.

1 mapTo subscribe e scan acc + curr 0 counterEl.innerHTML
= counter

104.

1 mapTo subscribe 1 scan acc + curr 0 counterEl.innerHTML
= counter

105.

1 mapTo subscribe scan 1 acc + curr 0 counterEl.innerHTML
= counter

106.

1 mapTo subscribe scan 1 acc + curr 1 Counter
value counterEl.innerHTML = counter

107.

= counter

108.

acc + curr 1 mapTo subscribe scan 1 counterEl.innerHTML =
counter

109.

acc + curr 1 mapTo subscribe e scan 1 counterEl.innerHTML
= counter

110.

1 mapTo subscribe e scan acc + curr 1 counterEl.innerHTML
= counter

111.

1 mapTo subscribe 1 scan acc + curr 1 counterEl.innerHTML
= counter

112.

= counter

113.

1 mapTo subscribe scan 2 acc + curr 2 Counter
value counterEl.innerHTML = counter

114.

= counter

115.

const source = Observable.merge( Observable.fromEvent(incrementBtn, 'click').mapTo(1), Observable.fromEvent(decrementBtn, 'click').mapTo(-1), ); source
.scan((acc, curr) => acc + curr, 0) .subscribe((counter) => { counterEl.innerHTML = counter; });

116.


117.


118.


119.


120.

acc + curr 1 mapTo subscribe 0 scan -1 mapTo
Increment Decrement counterEl.innerHTML = counter

121.

Increment Decrement e counterEl.innerHTML = counter

122.


123.

Increment Decrement 1 counterEl.innerHTML = counter

124.


125.


126.


127.

Increment Decrement counterEl.innerHTML = counter

128.


129.


130.

Increment Decrement -1 counterEl.innerHTML = counter

131.

Increment Decrement -1 counterEl.innerHTML = counter

132.


133.


134.

Async HTTP

135.

Promise fetchOrders() .then((orders) => { orders.forEach((order) => { console.log(order); });
});

136.

Promise fetchOrders() .then((orders) => { orders.forEach((order) => { console.log(order); });
});

137.

Observable fetchOrders() .subscribe((orders) => { orders.forEach((order) => { console.log(order); });
});

138.

Why Observables?

139.

Promise fetchOrders() .then(orders => orders.filter( order => order.customerName === 'Tucker'
)) .then(orders => orders.map(order => order.id)) .then((orderIds) => { orderIds.forEach(id => console.log(id)); });

140.


141.


142.


143.

fetchOrders() .mergeAll() .filter( order => order.customerName === 'Tucker' ) .map(order
=> order.id) .subscribe(id => console.log(id)); Observable

144.


145.


146.


147.


148.

Cancellation

149.

const promise = fetchOrders() .then((orders) => { orders.forEach((order) => {
console.log(order); }); }); promise.cancel(); Promise

150.

console.log(order); }); }); promise.cancel(); Promise

151.

console.log(order); }); }); promise.cancel(); Promise ×

152.

const subscription = fetchOrders() .subscribe((orders) => { orders.forEach((order) => {
console.log(order); }); }); subscription.unsubscribe(); Observable

153.

const subscription = fetchOrders() .subscribe((orders) => { orders.forEach((order) => {
console.log(order); }); }); subscription.unsubscribe(); Observable Cancel request

154.

Lazy Subscriptions

155.

const p1 = fetchOrders(); const p2 = fetchOrders(); const p3
= fetchOrders(); Promises

156.

const p1 = fetchOrders(); const p2 = fetchOrders(); const p3
= fetchOrders(); Promises Immediate

157.

Observables const o1 = fetchOrders(); const o2 = fetchOrders(); const
o3 = fetchOrders(); o1.subscribe(); o2.subscribe(); o3.subscribe();

158.

Observables Lazy const o1 = fetchOrders(); const o2 = fetchOrders();
const o3 = fetchOrders(); o1.subscribe(); o2.subscribe(); o3.subscribe();

159.

Observables Lazy const o1 = fetchOrders(); const o2 = fetchOrders();
const o3 = fetchOrders(); o1.subscribe(); o2.subscribe(); o3.subscribe(); Issue Request

160.

const o1 = fetchOrders(); o1.subscribe(); o1.subscribe(); o1.subscribe();

161.

const o1 = fetchOrders(); o1.subscribe(); o1.subscribe(); o1.subscribe(); Pure, shareable value

162.

const o1 = fetchOrders(); o1.subscribe(); o1.subscribe(); o1.subscribe(); Issue new request
with same observable Pure, shareable value

163.

Create HTTP Requests

164.

function fetchOrders() { return Observable.ajax.get('/orders'); } Built-in AJAX

165.

function fetchOrders() { return Observable.ajax.get('/orders'); } Built-in AJAX

166.

function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {
subscriber.next(orders); subscriber.complete(); }); }); } Custom Observable Creation

167.


168.


169.


170.


171.


172.

subscriber.next(orders); subscriber.complete(); }); }); } Custom Observable Creation ?

173.

Observable.of(1, 2, 3) .subscribe(x => console.log(x));

174.

Observable.of(1, 2, 3) .subscribe(x => console.log(x)); Subscriber (or Observer)

175.

Observable.of(1, 2, 3) .subscribe({ next: x => console.log(x), }); Subscriber
Object

176.

Observable.of(1, 2, 3) .subscribe({ next: x => console.log(x), complete: ()
=> console.log('Done!'), }); // 1 // 2 // 3 // Done!

177.

subscriber.next(orders); subscriber.complete(); }); }); } fetchOrders().mergeAll().subscribe({ next: x => console.log(x), complete: () => console.log('Done!'), });

178.


179.


180.

Error Handling

181.

const source = Observable.create((subscriber) => { subscriber.next(1); subscriber.error(new Error('Uh oh'));
subscriber.next(2); }); source.subscribe({ next: x => console.log(x), complete: () => console.log('Done!'), error: e => console.error(e), }); // 1 // Error: Uh oh

182.


183.


184.

subscriber.next(2); }); source.subscribe({ next: x => console.log(x), complete: () => console.log('Done!'), error: e => console.error(e), }); // 1 // Error: Uh oh Never called

185.

subscriber.next(2); }); source.subscribe(x => console.log(x)); No error handler, so what happens?

186.

Error Error Error Error Promises

187.

subscriber.next(2); }); source.subscribe(x => console.log(x)); No swallowed errors!

188.

fetchOrders() .catch((e) => { logError(e); return legacyFetchOrders() .catch((e2) => {
logError(e2); return Observable.of([]); }) }) .subscribe(x => console.log(x)); Catching

189.


190.


191.

console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([])

192.

console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) ✓

193.

console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) ✓

194.


195.

console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) ×

196.


197.


198.

console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) × ✓

199.

console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) × ✓

200.


201.


202.


203.


204.

console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) × ×

205.

console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) × ×

206.

console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) × × []

207.

Hot Cold vs.

208.

Observable creates the source Cold

209.

Best for one-off unique requests. Cold

210.

subscriber.next(orders); subscriber.complete(); }); }); }

211.

subscriber.next(orders); subscriber.complete(); }); }); } Resource requested/created at subscription time

212.

WebSockets

213.

function ordersStream() { return Observable.create((subscriber) => { const url =
'ws://example.com/orders'; const socket = new WebSocket(url); socket.addEventListener('message', (data) => { subscriber.next(data); }); }); }

214.


215.


216.


217.

const stream = ordersStream(); stream.subscribe(x => console.log(x));

218.

subscriber .next(data) WebSocket Subscribed Observable console.log stream.subscribe(x => console.log(x));

219.

subscriber .next(data) ... WebSocket Subscribed Observable console.log stream.subscribe(x => console.log(x));

220.


221.


222.


223.

None

224.

.subscribe(...)

225.

.subscribe(...) .subscribe(...)

226.

.subscribe(...) .subscribe(...) .subscribe(...)

227.

.subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...)

228.

.subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...)

229.

.subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...)

230.

.subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...)

231.

.subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...)

232.

Hot Observable closes over the source

233.

Hot Best for multicasting and sharing resources.

234.

const url = 'ws://example.com/orders'; const socket = new WebSocket(url); function
ordersStream() { return Observable.create((subscriber) => { socket.addEventListener('message', (data) => { subscriber.next(data); }); }); }

235.

ordersStream() { return Observable.create((subscriber) => { socket.addEventListener('message', (data) => { subscriber.next(data); }); }); } Resource created outside subscription

236.

ordersStream() { return Observable.create((subscriber) => { socket.addEventListener('message', (data) => { subscriber.next(data); }); }); } Close over existing resource when subscribing

237.

const stream = ordersStream(); const sub1 = stream.subscribe(x => console.log(x));
const sub2 = stream.subscribe(x => console.log(x));

238.

Shared stream of data const stream = ordersStream(); const sub1
= stream.subscribe(x => console.log(x)); const sub2 = stream.subscribe(x => console.log(x));

239.

subscriber .next(event.data) WebSocket Subscribed Observable console.log stream.subscribe(x => console.log(x))

240.

subscriber .next(event.data) ... WebSocket Subscribed Observable console.log stream.subscribe(x => console.log(x))

241.


242.


243.


244.

subscriber .next(event.data) WebSocket Subscribed Observable console.log New Subscribed Observable console.log
stream.subscribe(...) stream.subscribe(...)

245.

subscriber .next(event.data) WebSocket Subscribed Observable console.log ... New Subscribed Observable
console.log stream.subscribe(...) stream.subscribe(...)

246.

console.log stream.subscribe(...) stream.subscribe(...)

247.

console.log ... stream.subscribe(...) stream.subscribe(...)

248.

subscriber .next(event.data) ... WebSocket Subscribed Observable console.log ... New Subscribed
Observable console.log stream.subscribe(...) stream.subscribe(...)

249.

'ws://example.com/orders'; const socket = new WebSocket(url); socket.addEventListener('message', (data) => { subscriber.next(data); }); }) .share(); } Share It

250.


251.


252.

const stream = ordersStream(); const sub1 = stream.subscribe(x => console.log(x));
const sub2 = stream.subscribe(x => console.log(x));

253.

Shared stream of data too const stream = ordersStream(); const
sub1 = stream.subscribe(x => console.log(x)); const sub2 = stream.subscribe(x => console.log(x));

254.

Clean Up

255.

'ws://example.com/orders'; const socket = new WebSocket(url); socket.addEventListener('message', (data) => { subscriber.next(data); }); return () => { socket.close(); }; }) .share(); }

256.

'ws://example.com/orders'; const socket = new WebSocket(url); socket.addEventListener('message', (data) => { subscriber.next(data); }); return () => { socket.close(); }; }) .share(); } Called when all subscriptions unsubscribe

257.

'ws://example.com/orders'; const socket = new WebSocket(url); socket.addEventListener('message', (data) => { subscriber.next(data); }); return () => { socket.close(); }; }) .share(); } Close socket, deallocate resources, etc.

258.

=> order.id) .subscribe(id => console.log(id)); Recall

259.

=> order.id) .subscribe(id => console.log(id)); ? Recall

260.

Observable.of([1, 2, 3]) .subscribe(x => console.log(x)); // [ 1, 2,
3 ]

261.

3 ]

262.

3 ]

263.

Observable.of([1, 2, 3]) .mergeAll() .subscribe(x => console.log(x)); // 1 //
2 // 3

264.

2 // 3 Flatten

265.

2 // 3

266.

subscribe mergeAll console.log [1, 2, 3]

267.

subscribe mergeAll console.log [1, 2, 3]

268.

subscribe mergeAll console.log [2, 3] 1

269.

subscribe mergeAll console.log [2, 3] 1

270.

subscribe mergeAll console.log [3] 2

271.

subscribe mergeAll console.log [3] 2

272.

subscribe mergeAll console.log 3

273.

subscribe mergeAll console.log 3

274.

Higher Order Observables

275.

console.log(x)); // 2 // 4 // 6

276.

console.log(x)); // 2 // 4 // 6 Delay?

277.

Observable.of(1, 2, 3) .map(n => Observable.of(n * 2)) .subscribe(x =>
console.log(x)); // ScalarObservable { value: 2 } // ScalarObservable { value: 4 } // ScalarObservable { value: 6 }

278.


279.


280.

Observable.of(1, 2, 3) .map(n => Observable.of(n * 2)) .mergeAll() .subscribe(x
=> console.log(x)); // 2 // 4 // 6

281.

Observable.of(1, 2, 3) .map(n => Observable.of(n * 2)) .mergeAll() .subscribe(x
=> console.log(x)); // 2 // 4 // 6

282.

Observable.of(1, 2, 3) .mergeMap(n => Observable.of(n * 2)) .subscribe(x =>
console.log(x)); // 2 // 4 // 6

283.

subscribe mergeMap console.log Observable.of(n * 2)

284.

subscribe mergeMap console.log Observable.of(n * 2) 1

285.


286.

subscribe mergeMap console.log Observable.of(n * 2) Observable.of(2) subscribe 2

287.


288.


289.

Observable.of(1) .delay(1000) .subscribe(x => console.log(x)) // <tick> // 1

290.


291.


292.


293.

Observable.of(1, 2, 3) .mergeMap(n => ( Observable.of(n * 2).delay(1000) ))
.subscribe(x => console.log(x)); // <tick> // 2 // 4 // 6

294.


295.


296.

.subscribe(x => console.log(x)); // <tick> // 2 // 4 // 6 ?

297.

Concurrency

298.

subscribe mergeMap console.log Observable.of(n * 2)

299.


300.


301.


302.

subscribe mergeMap console.log Observable.of(n * 2) 2 2

303.


304.


305.

subscribe mergeMap console.log Observable.of(n * 2) 3 2 4

306.


307.


308.


309.


310.


311.


312.

Observable.of(1, 2, 3) .mergeMap(n => ( Observable.of(n * 2).delay(1000) ),
1) .subscribe(x => console.log(x)); // <tick> // 2 // <tick> // 4 // <tick> // 6

313.


314.


315.


316.


317.

Observable.of(1, 2, 3) .concatMap(n => ( Observable.of(n * 2).delay(1000) ))
.subscribe(x => console.log(x)); // <tick> // 2 // <tick> // 4 // <tick> // 6

318.

subscribe concatMap console.log Observable.of(n * 2)

319.

subscribe console.log Observable.of(n * 2) 1 concatMap

320.


321.


322.


323.


324.


325.


326.


327.


328.


329.


330.


331.


332.


333.


334.

Rate Limiting

335.

Observable.of(1, 2, 3) .concatMap((id) => { const url = `/orders/${id}`;
return Observable.ajax.get(url) .delay(1000); }) .pluck('response') .bufferCount(3) .subscribe(x => console.log(x)); // [ { id: '1', name: 'Order 1' }, // { id: '2', name: 'Order 2' }, // { id: '3', name: 'Order 3' } ]

336.


337.


338.


339.

Observable .ajax .get(url) subscribe console.log pluck bufferCount 'response' 3 concatMap

340.

Observable .ajax .get(url) subscribe concatMap console.log pluck bufferCount 'response' 3
1

341.


342.

R Rate limit next request

343.

R

344.

R

345.

O1

346.

O1

347.

O1 +

348.

O1 O2

349.

O1 O2 +

350.

O1 O2 O3

351.

Observable .ajax .get(url) subscribe concatMap console.log […] pluck bufferCount 'response'
0

352.

Sequential vs. Parallel

353.

const promise = Promise.all([ fetchOrder(1), fetchOrder(2), fetchOrder(3), ]); promise.then(x =>
console.log(x)); // [ { id: '1', name: 'Order 1' }, // { id: '2', name: 'Order 2' }, // { id: '3', name: 'Order 3' } ]

354.

const promise = Promise.all([ fetchOrder(1), fetchOrder(2), fetchOrder(3), ]); promise.then(x =>
console.log(x)); // [ { id: '1', name: 'Order 1' }, // { id: '2', name: 'Order 2' }, // { id: '3', name: 'Order 3' } ]

355.

const source = Observable.forkJoin( fetchOrder(1), fetchOrder(2), fetchOrder(3) ); source.subscribe(x =>
console.log(x)); // [ { response: { id: 1, name: 'Order 1' } }, // { response: { id: 2, name: 'Order 2' } }, // { response: { id: 3, name: 'Order 3' } } ]

356.

console.log(x)); // [ { response: { id: 1, name: 'Order 1' } }, // { response: { id: 2, name: 'Order 2' } }, // { response: { id: 3, name: 'Order 3' } } ]

357.

console.log(x)); // [ { response: { id: 1, name: 'Order 1' } }, // { response: { id: 2, name: 'Order 2' } }, // { response: { id: 3, name: 'Order 3' } } ] Observable or Promise

358.

fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin subscribe console.log

359.

fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin subscribe console.log R1

360.

fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin R1 subscribe console.log

361.

fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin R1 subscribe console.log R3

362.

fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin R1 R3 subscribe console.log

363.

fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin R1 R3 subscribe console.log R2

364.

fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin R1 R2 R3 subscribe console.log

365.

fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin subscribe console.log R1 R2 R3

366.

Tip of the iceberg

367.

• Declarative, lazy operations • Expressive event management • No
more error swallowing • Rate limiting and concurrent processing

368.

• Declarative, lazy operations • Expressive event management • No
more error swallowing • Rate limiting and concurrent processing ✓ ✓ ✓ ✓

369.

github.com/ReactiveX/rxjs reactivex.io/rxjs RxJS

370.

Observables ECMAScript Proposal:  github.com/tc39/proposal-observable Another spec implementation:  github.com/zenparsing/zen-observable

371.

Thanks! Jeremy Fairbank @elpapapollo / jfairbank Slides: bit.ly/rxjs-connect

Connect.Tech 2017: Dive into RxJS Observables

Connect.Tech 2017: Dive into RxJS Observables

Want more?

Transcript