ATL JS: 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. 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); } } ); } }); }
9. 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); } } ); } }); }
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. import { Observable } from 'rxjs'; const source = Observable.of(1, 2, 3); source.subscribe(x => console.log(x)); // 1 // 2 // 3
23. import { Observable } from 'rxjs'; const source = Observable.of(1, 2, 3); source.subscribe(x => console.log(x)); // 1 // 2 // 3
24. import { Observable } from 'rxjs'; const source = Observable.of(1, 2, 3); source.subscribe(x => console.log(x)); // 1 // 2 // 3
25. import { Observable } from 'rxjs'; const source = Observable.of(1, 2, 3); source.subscribe(x => console.log(x)); // 1 // 2 // 3
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. Observable.of(1, 2, 3) .subscribe(x => console.log(x)); console.log subscribe 1
29. Observable.of(1, 2, 3) .subscribe(x => console.log(x)); console.log subscribe
30. Observable.of(1, 2, 3) .subscribe(x => console.log(x)); console.log subscribe 2
31. Observable.of(1, 2, 3) .subscribe(x => console.log(x)); console.log subscribe 2
32. Observable.of(1, 2, 3) .subscribe(x => console.log(x)); console.log subscribe
33. Observable.of(1, 2, 3) .subscribe(x => console.log(x)); console.log subscribe 3
34. Observable.of(1, 2, 3) .subscribe(x => console.log(x)); console.log subscribe 3
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. Observable.of(1, 2, 3) .map(n => n * 2) .subscribe(x => 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. Observable.of(1, 2, 3) console.log n * 2 map subscribe 1
41. Observable.of(1, 2, 3) console.log n * 2 map subscribe 2
42. Observable.of(1, 2, 3) console.log n * 2 map subscribe 2
43. Observable.of(1, 2, 3) console.log n * 2 map subscribe
44. Observable.of(1, 2, 3) console.log n * 2 map subscribe 2
45. Observable.of(1, 2, 3) console.log n * 2 map subscribe 2
46. Observable.of(1, 2, 3) console.log n * 2 map subscribe 4
47. Observable.of(1, 2, 3) console.log n * 2 map subscribe 4
48. Observable.of(1, 2, 3) console.log n * 2 map subscribe
49. Observable.of(1, 2, 3) console.log n * 2 map subscribe 3
50. Observable.of(1, 2, 3) console.log n * 2 map subscribe 3
51. Observable.of(1, 2, 3) console.log n * 2 map subscribe 6
52. Observable.of(1, 2, 3) console.log n * 2 map subscribe 6
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. Observable.range(1, 100) .map(n => n * 2) .filter(n => n > 4) .take(2) .subscribe(x => console.log(x)); // 6 // 8
56. Observable.range(1, 100) .map(n => n * 2) .filter(n => n > 4) .take(2) .subscribe(x => console.log(x)); // 6 // 8
57. Observable.range(1, 100) .map(n => n * 2) .filter(n => n > 4) .take(2) .subscribe(x => console.log(x)); // 6 // 8
58. Observable.range(1, 100) .map(n => n * 2) .filter(n => n > 4) .take(2) .subscribe(x => console.log(x)); // 6 // 8
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. console.log n * 2 map subscribe n > 4 1 Observable.range(1, 100) filter 2 take
62. console.log n * 2 map subscribe n > 4 2 Observable.range(1, 100) filter 2 take
63. console.log n * 2 map subscribe n > 4 2 Observable.range(1, 100) filter 2 take
64. console.log n * 2 map subscribe n > 4 2 Observable.range(1, 100) filter 2 take ×
65. console.log n * 2 map subscribe n > 4 Observable.range(1, 100) filter 2 take
66. console.log n * 2 map subscribe n > 4 2 Observable.range(1, 100) filter 2 take
67. console.log n * 2 map subscribe n > 4 2 Observable.range(1, 100) filter 2 take
68. console.log n * 2 map subscribe n > 4 4 Observable.range(1, 100) filter 2 take
69. console.log n * 2 map subscribe n > 4 Observable.range(1, 100) filter 2 take 4
70. console.log n * 2 map subscribe n > 4 Observable.range(1, 100) filter 2 take 4 ×
71. console.log n * 2 map subscribe n > 4 Observable.range(1, 100) filter 2 take
72. console.log n * 2 map subscribe n > 4 3 Observable.range(1, 100) filter 2 take
73. console.log n * 2 map subscribe n > 4 3 Observable.range(1, 100) filter 2 take
74. console.log n * 2 map subscribe n > 4 6 Observable.range(1, 100) filter 2 take
75. console.log n * 2 map subscribe n > 4 Observable.range(1, 100) filter 2 take 6
76. ✓ console.log n * 2 map subscribe n > 4 Observable.range(1, 100) filter 2 take 6
77. console.log n * 2 map subscribe n > 4 Observable.range(1, 100) filter 2 take 6
78. console.log n * 2 map subscribe n > 4 Observable.range(1, 100) filter 1 take 6
79. console.log n * 2 map subscribe n > 4 Observable.range(1, 100) filter 1 take
80. console.log n * 2 map subscribe n > 4 4 Observable.range(1, 100) filter 1 take
81. console.log n * 2 map subscribe n > 4 4 Observable.range(1, 100) filter 1 take
82. console.log n * 2 map subscribe n > 4 8 Observable.range(1, 100) filter 1 take
83. console.log n * 2 map subscribe n > 4 Observable.range(1, 100) filter 1 take 8
84. ✓ console.log n * 2 map subscribe n > 4 Observable.range(1, 100) filter 1 take 8
85. console.log n * 2 map subscribe n > 4 Observable.range(1, 100) filter 1 take 8
86. console.log n * 2 map subscribe n > 4 Observable.range(1, 100) filter 0 take 8
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. Observable.fromEvent(incrementBtn, 'click') .mapTo(1) .scan((acc, curr) => acc + curr, 0) .subscribe((counter) => { counterEl.innerHTML = counter; });
92. Observable.fromEvent(incrementBtn, 'click') .mapTo(1) .scan((acc, curr) => acc + curr, 0) .subscribe((counter) => { counterEl.innerHTML = counter; });
93. Observable.fromEvent(incrementBtn, 'click') .mapTo(1) .scan((acc, curr) => acc + curr, 0) .subscribe((counter) => { counterEl.innerHTML = counter; });
94. Observable.fromEvent(incrementBtn, 'click') .mapTo(1) .scan((acc, curr) => acc + curr, 0) .subscribe((counter) => { counterEl.innerHTML = counter; });
95. Observable.fromEvent(incrementBtn, 'click') .mapTo(1) .scan((acc, curr) => acc + curr, 0) .subscribe((counter) => { counterEl.innerHTML = counter; });
96. Observable.fromEvent(incrementBtn, 'click') .mapTo(1) .scan((acc, curr) => acc + curr, 0) .subscribe((counter) => { counterEl.innerHTML = counter; });
97. .scan((acc, curr) => acc + curr, 0)
98. .scan((acc, curr) => acc + curr, 0) Accumulated counter value
99. .scan((acc, curr) => acc + curr, 0) Current event value (1)
100. .scan((acc, curr) => acc + curr, 0) Return new accumulated counter value
101. .scan((acc, curr) => acc + curr, 0) Initial counter value
102. counterEl.innerHTML = counter acc + curr 1 mapTo subscribe 0 scan
103. acc + curr 1 mapTo subscribe e scan 0 counterEl.innerHTML = counter
104. 1 mapTo subscribe e scan acc + curr 0 counterEl.innerHTML = counter
105. 1 mapTo subscribe 1 scan acc + curr 0 counterEl.innerHTML = counter
106. 1 mapTo subscribe scan 1 acc + curr 0 counterEl.innerHTML = counter
107. 1 mapTo subscribe scan 1 acc + curr 1 Counter value counterEl.innerHTML = counter
108. 1 mapTo subscribe scan 1 acc + curr 1 counterEl.innerHTML = counter
109. acc + curr 1 mapTo subscribe scan 1 counterEl.innerHTML = counter
110. acc + curr 1 mapTo subscribe e scan 1 counterEl.innerHTML = counter
111. 1 mapTo subscribe e scan acc + curr 1 counterEl.innerHTML = counter
112. 1 mapTo subscribe 1 scan acc + curr 1 counterEl.innerHTML = counter
113. 1 mapTo subscribe scan 1 acc + curr 1 counterEl.innerHTML = counter
114. 1 mapTo subscribe scan 2 acc + curr 2 Counter value counterEl.innerHTML = counter
115. 1 mapTo subscribe scan 2 acc + curr 2 counterEl.innerHTML = counter
116. 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; });
117. 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; });
118. 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; });
119. 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; });
120. 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; });
121. acc + curr 1 mapTo subscribe 0 scan -1 mapTo Increment Decrement counterEl.innerHTML = counter
122. acc + curr 1 mapTo subscribe 0 scan -1 mapTo Increment Decrement e counterEl.innerHTML = counter
123. acc + curr 1 mapTo subscribe 0 scan -1 mapTo Increment Decrement e counterEl.innerHTML = counter
124. acc + curr 1 mapTo subscribe 0 scan -1 mapTo Increment Decrement 1 counterEl.innerHTML = counter
125. acc + curr 1 mapTo subscribe 0 scan -1 mapTo Increment Decrement 1 counterEl.innerHTML = counter
126. acc + curr 1 mapTo subscribe 1 scan -1 mapTo Increment Decrement 1 counterEl.innerHTML = counter
127. acc + curr 1 mapTo subscribe 1 scan -1 mapTo Increment Decrement 1 counterEl.innerHTML = counter
128. acc + curr 1 mapTo subscribe 1 scan -1 mapTo Increment Decrement counterEl.innerHTML = counter
129. acc + curr 1 mapTo subscribe 1 scan -1 mapTo Increment Decrement e counterEl.innerHTML = counter
130. acc + curr 1 mapTo subscribe 1 scan -1 mapTo Increment Decrement e counterEl.innerHTML = counter
131. acc + curr 1 mapTo subscribe 1 scan -1 mapTo Increment Decrement -1 counterEl.innerHTML = counter
132. acc + curr 1 mapTo subscribe 1 scan -1 mapTo Increment Decrement -1 counterEl.innerHTML = counter
133. acc + curr 1 mapTo subscribe 0 scan -1 mapTo Increment Decrement 0 counterEl.innerHTML = counter
134. acc + curr 1 mapTo subscribe 0 scan -1 mapTo Increment Decrement 0 counterEl.innerHTML = counter
135. Async HTTP
136. Promise fetchOrders() .then((orders) => { orders.forEach((order) => { console.log(order); }); });
137. Promise fetchOrders() .then((orders) => { orders.forEach((order) => { console.log(order); }); });
138. Observable fetchOrders() .subscribe((orders) => { orders.forEach((order) => { console.log(order); }); });
139. Why Observables?
140. 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)); });
141. 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)); });
142. 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)); });
143. 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)); });
144. fetchOrders() .mergeAll() .filter( order => order.customerName === 'Tucker' ) .map(order => order.id) .subscribe(id => console.log(id)); Observable
145. fetchOrders() .mergeAll() .filter( order => order.customerName === 'Tucker' ) .map(order => order.id) .subscribe(id => console.log(id)); Observable
146. fetchOrders() .mergeAll() .filter( order => order.customerName === 'Tucker' ) .map(order => order.id) .subscribe(id => console.log(id)); Observable
147. fetchOrders() .mergeAll() .filter( order => order.customerName === 'Tucker' ) .map(order => order.id) .subscribe(id => console.log(id)); Observable
148. fetchOrders() .mergeAll() .filter( order => order.customerName === 'Tucker' ) .map(order => order.id) .subscribe(id => console.log(id)); Observable
149. Cancellation
150. const promise = fetchOrders() .then((orders) => { orders.forEach((order) => { console.log(order); }); }); promise.cancel(); Promise
151. const promise = fetchOrders() .then((orders) => { orders.forEach((order) => { console.log(order); }); }); promise.cancel(); Promise
152. const promise = fetchOrders() .then((orders) => { orders.forEach((order) => { console.log(order); }); }); promise.cancel(); Promise ×
153. const subscription = fetchOrders() .subscribe((orders) => { orders.forEach((order) => { console.log(order); }); }); subscription.unsubscribe(); Observable
154. const subscription = fetchOrders() .subscribe((orders) => { orders.forEach((order) => { console.log(order); }); }); subscription.unsubscribe(); Observable Cancel request
155. Lazy Subscriptions
156. const p1 = fetchOrders(); const p2 = fetchOrders(); const p3 = fetchOrders(); Promises
157. const p1 = fetchOrders(); const p2 = fetchOrders(); const p3 = fetchOrders(); Promises Immediate
158. Observables 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();
160. Observables Lazy const o1 = fetchOrders(); const o2 = fetchOrders(); const o3 = fetchOrders(); o1.subscribe(); o2.subscribe(); o3.subscribe(); Issue Request
161. const o1 = fetchOrders(); o1.subscribe(); o1.subscribe(); o1.subscribe();
162. const o1 = fetchOrders(); o1.subscribe(); o1.subscribe(); o1.subscribe(); Pure, shareable value
163. const o1 = fetchOrders(); o1.subscribe(); o1.subscribe(); o1.subscribe(); Issue new request with same observable Pure, shareable value
164. Create HTTP Requests
165. function fetchOrders() { return Observable.ajax.get('/orders'); } Built-in AJAX
166. function fetchOrders() { return Observable.ajax.get('/orders'); } Built-in AJAX
167. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => { subscriber.next(orders); subscriber.complete(); }); }); } Custom Observable Creation
168. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => { subscriber.next(orders); subscriber.complete(); }); }); } Custom Observable Creation
169. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => { subscriber.next(orders); subscriber.complete(); }); }); } Custom Observable Creation
170. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => { subscriber.next(orders); subscriber.complete(); }); }); } Custom Observable Creation
171. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => { subscriber.next(orders); subscriber.complete(); }); }); } Custom Observable Creation
172. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => { subscriber.next(orders); subscriber.complete(); }); }); } Custom Observable Creation
173. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => { subscriber.next(orders); subscriber.complete(); }); }); } Custom Observable Creation ?
174. Observable.of(1, 2, 3) .subscribe(x => console.log(x));
175. Observable.of(1, 2, 3) .subscribe(x => console.log(x)); Subscriber (or Observer)
176. Observable.of(1, 2, 3) .subscribe({ next: x => console.log(x), }); Subscriber Object
177. Observable.of(1, 2, 3) .subscribe({ next: x => console.log(x), complete: () => console.log('Done!'), }); // 1 // 2 // 3 // Done!
178. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => { subscriber.next(orders); subscriber.complete(); }); }); } fetchOrders().subscribe({ next: x => console.log(x), complete: () => console.log('Done!'), });
179. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => { subscriber.next(orders); subscriber.complete(); }); }); } fetchOrders().subscribe({ next: x => console.log(x), complete: () => console.log('Done!'), });
180. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => { subscriber.next(orders); subscriber.complete(); }); }); } fetchOrders().subscribe({ next: x => console.log(x), complete: () => console.log('Done!'), });
181. Error Handling
182. 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
183. 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
184. 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
185. const source = Observable.create((subscriber) => { subscriber.next(1); subscriber.error(new Error('Uh oh')); subscriber.next(2); }); source.subscribe(x => console.log(x)); No error handler, so what happens?
186. Error Error Error Error Promises
187. const source = Observable.create((subscriber) => { subscriber.next(1); subscriber.error(new Error('Uh oh')); subscriber.next(2); }); source.subscribe(x => console.log(x)); No swallowed errors!
188. 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
189. 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 Never called
190. fetchOrders() .catch((e) => { logError(e); return Observable.of([]); }) .subscribe(x => console.log(x)); Catching
191. fetchOrders() .catch((e) => { logError(e); return Observable.of([]); }) .subscribe(x => console.log(x)); Catching
192. fetchOrders() .catch((e) => { logError(e); return Observable.of([]); }) .subscribe(x => console.log(x)); Catching
193. fetchOrders() .catch((e) => { logError(e); return Observable.of([]); }) .subscribe(x => console.log(x)); Catching
194. console.log catch subscribe fetchOrders() Observable.of([])
195. console.log catch subscribe fetchOrders() Observable.of([]) ✓
196. console.log catch subscribe fetchOrders() Observable.of([]) ✓
197. console.log catch subscribe fetchOrders() Observable.of([]) ×
198. console.log catch subscribe fetchOrders() Observable.of([]) ×
199. console.log catch subscribe fetchOrders() Observable.of([]) []
200. console.log catch subscribe fetchOrders() Observable.of([]) []
201. fetchOrders() .catch((e) => { logError(e); return legacyFetchOrders() .catch((e2) => { logError(e2); return Observable.of([]); }) }) .subscribe(x => console.log(x)); Or delegate to legacy API…
202. fetchOrders() .catch((e) => { logError(e); return legacyFetchOrders() .catch((e2) => { logError(e2); return Observable.of([]); }) }) .subscribe(x => console.log(x)); Or delegate to legacy API…
203. fetchOrders() .catch((e) => { logError(e); return legacyFetchOrders() .catch((e2) => { logError(e2); return Observable.of([]); }) }) .subscribe(x => console.log(x)); Or delegate to legacy API…
204. fetchOrders() .catch((e) => { logError(e); return legacyFetchOrders() .catch((e2) => { logError(e2); return Observable.of([]); }) }) .subscribe(x => console.log(x)); Or delegate to legacy API…
205. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([])
206. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) ✓
207. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) ✓
208. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([])
209. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) ×
210. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) ×
211. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) ×
212. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) × ✓
213. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) × ✓
214. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([])
215. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) ×
216. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) ×
217. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) ×
218. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) × ×
219. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) × ×
220. console.log catch subscribe legacyFetchOrders() fetchOrders() catch Observable.of([]) × × []
221. Hot Cold vs.
222. Observable creates the source. Cold
223. Best for one-off unique requests. Cold
224. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => { subscriber.next(orders); subscriber.complete(); }); }); }
225. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => { subscriber.next(orders); subscriber.complete(); }); }); } Resource requested/created at subscription time
226. WebSockets
227. function ordersStream() { return Observable.create((subscriber) => { const url = 'ws://example.com/orders'; const socket = new WebSocket(url); socket.addEventListener('message', (data) => { subscriber.next(data); }); }); }
228. function ordersStream() { return Observable.create((subscriber) => { const url = 'ws://example.com/orders'; const socket = new WebSocket(url); socket.addEventListener('message', (data) => { subscriber.next(data); }); }); }
229. function ordersStream() { return Observable.create((subscriber) => { const url = 'ws://example.com/orders'; const socket = new WebSocket(url); socket.addEventListener('message', (data) => { subscriber.next(data); }); }); }
230. function ordersStream() { return Observable.create((subscriber) => { const url = 'ws://example.com/orders'; const socket = new WebSocket(url); socket.addEventListener('message', (data) => { subscriber.next(data); }); }); }
231. const stream = ordersStream(); stream.subscribe(x => console.log(x));
232. subscriber .next(data) WebSocket console.log stream.subscribe(x => console.log(x)); Subscriber
233. subscriber .next(data) ... WebSocket console.log stream.subscribe(x => console.log(x)); Subscriber
234. subscriber .next(data) ... WebSocket console.log stream.subscribe(x => console.log(x)); Subscriber
235. subscriber .next(data) ... WebSocket Subscriber console.log stream.subscribe(x => console.log(x));
236. subscriber .next(data) ... WebSocket console.log stream.subscribe(x => console.log(x)); Subscriber
238. .subscribe(...)
239. .subscribe(...) .subscribe(...)
240. .subscribe(...) .subscribe(...) .subscribe(...)
241. .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...)
242. .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...)
243. .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...)
244. .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...)
245. .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...) .subscribe(...)
246. Hot Observable closes over the source.
247. Hot Best for multicasting and sharing resources.
248. const url = 'ws://example.com/orders'; const socket = new WebSocket(url); function ordersStream() { return Observable.create((subscriber) => { socket.addEventListener('message', (data) => { subscriber.next(data); }); }); }
249. const url = 'ws://example.com/orders'; const socket = new WebSocket(url); function ordersStream() { return Observable.create((subscriber) => { socket.addEventListener('message', (data) => { subscriber.next(data); }); }); } Resource created outside subscription
250. const url = 'ws://example.com/orders'; const socket = new WebSocket(url); function ordersStream() { return Observable.create((subscriber) => { socket.addEventListener('message', (data) => { subscriber.next(data); }); }); } Close over existing resource when subscribing
251. const stream = ordersStream(); const sub1 = stream.subscribe(x => console.log(x)); const sub2 = stream.subscribe(x => console.log(x));
252. Shared stream of data const stream = ordersStream(); const sub1 = stream.subscribe(x => console.log(x)); const sub2 = stream.subscribe(x => console.log(x));
253. subscriber .next(event.data) WebSocket Subscriber console.log stream.subscribe(x => console.log(x))
254. subscriber .next(event.data) ... WebSocket console.log stream.subscribe(x => console.log(x)) Subscriber
255. subscriber .next(event.data) ... WebSocket console.log stream.subscribe(x => console.log(x)) Subscriber
256. subscriber .next(event.data) ... WebSocket console.log stream.subscribe(x => console.log(x)) Subscriber
257. subscriber .next(event.data) ... WebSocket console.log stream.subscribe(x => console.log(x)) Subscriber
258. subscriber .next(event.data) WebSocket Subscriber console.log New Subscriber console.log stream.subscribe(...) stream.subscribe(...)
259. subscriber .next(event.data) WebSocket console.log ... console.log stream.subscribe(...) stream.subscribe(...) Subscriber New Subscriber
260. subscriber .next(event.data) WebSocket console.log ... console.log stream.subscribe(...) stream.subscribe(...) Subscriber New Subscriber
261. subscriber .next(event.data) WebSocket console.log ... console.log ... stream.subscribe(...) stream.subscribe(...) Subscriber New Subscriber
262. subscriber .next(event.data) ... WebSocket console.log ... console.log stream.subscribe(...) stream.subscribe(...) Subscriber New Subscriber
263. function ordersStream() { return Observable.create((subscriber) => { const url = 'ws://example.com/orders'; const socket = new WebSocket(url); socket.addEventListener('message', (data) => { subscriber.next(data); }); }) .share(); } Share It
264. function ordersStream() { return Observable.create((subscriber) => { const url = 'ws://example.com/orders'; const socket = new WebSocket(url); socket.addEventListener('message', (data) => { subscriber.next(data); }); }) .share(); } Share It
265. function ordersStream() { return Observable.create((subscriber) => { const url = 'ws://example.com/orders'; const socket = new WebSocket(url); socket.addEventListener('message', (data) => { subscriber.next(data); }); }) .share(); } Share It
266. const stream = ordersStream(); const sub1 = stream.subscribe(x => console.log(x)); const sub2 = stream.subscribe(x => console.log(x));
267. Shared stream of data too const stream = ordersStream(); const sub1 = stream.subscribe(x => console.log(x)); const sub2 = stream.subscribe(x => console.log(x));
268. Clean Up
269. function ordersStream() { return Observable.create((subscriber) => { const url = 'ws://example.com/orders'; const socket = new WebSocket(url); socket.addEventListener('message', (data) => { subscriber.next(data); }); return () => { socket.close(); }; }) .share(); }
270. function ordersStream() { return Observable.create((subscriber) => { const url = '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
271. function ordersStream() { return Observable.create((subscriber) => { const url = '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.
272. fetchOrders() .mergeAll() .filter( order => order.customerName === 'Tucker' ) .map(order => order.id) .subscribe(id => console.log(id)); Recall
273. fetchOrders() .mergeAll() .filter( order => order.customerName === 'Tucker' ) .map(order => order.id) .subscribe(id => console.log(id)); ? Recall
274. Observable.of([1, 2, 3]) .subscribe(x => console.log(x)); // [ 1, 2, 3 ]
275. Observable.of([1, 2, 3]) .subscribe(x => console.log(x)); // [ 1, 2, 3 ]
276. Observable.of([1, 2, 3]) .subscribe(x => console.log(x)); // [ 1, 2, 3 ]
277. Observable.of([1, 2, 3]) .mergeAll() .subscribe(x => console.log(x)); // 1 // 2 // 3
278. Observable.of([1, 2, 3]) .mergeAll() .subscribe(x => console.log(x)); // 1 // 2 // 3 Flatten
279. Observable.of([1, 2, 3]) .mergeAll() .subscribe(x => console.log(x)); // 1 // 2 // 3
280. subscribe mergeAll console.log [1, 2, 3]
281. subscribe mergeAll console.log [1, 2, 3]
282. subscribe mergeAll console.log [2, 3] 1
283. subscribe mergeAll console.log [2, 3] 1
284. subscribe mergeAll console.log [3] 2
285. subscribe mergeAll console.log [3] 2
286. subscribe mergeAll console.log 3
287. subscribe mergeAll console.log 3
288. Higher Order Observables
289. Observable.of(1, 2, 3) .map(n => n * 2) .subscribe(x => console.log(x)); // 2 // 4 // 6
290. Observable.of(1, 2, 3) .map(n => n * 2) .subscribe(x => console.log(x)); // 2 // 4 // 6 Delay?
291. 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 }
292. 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 }
293. 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 }
294. Observable.of(1, 2, 3) .map(n => Observable.of(n * 2)) .mergeAll() .subscribe(x => console.log(x)); // 2 // 4 // 6
295. Observable.of(1, 2, 3) .map(n => Observable.of(n * 2)) .mergeAll() .subscribe(x => console.log(x)); // 2 // 4 // 6
296. Observable.of(1, 2, 3) .mergeMap(n => Observable.of(n * 2)) .subscribe(x => console.log(x)); // 2 // 4 // 6
297. subscribe mergeMap console.log Observable.of(n * 2)
298. subscribe mergeMap console.log Observable.of(n * 2) 1
299. subscribe mergeMap console.log Observable.of(n * 2) 1
300. subscribe mergeMap console.log Observable.of(n * 2) Observable.of(2) subscribe 2
301. subscribe mergeMap console.log Observable.of(n * 2) Observable.of(2) subscribe 2
302. subscribe mergeMap console.log Observable.of(n * 2) Observable.of(2) subscribe 2
303. Observable.of(1) .delay(1000) .subscribe(x => console.log(x)) // <tick> // 1
304. Observable.of(1) .delay(1000) .subscribe(x => console.log(x)) // <tick> // 1
305. Observable.of(1) .delay(1000) .subscribe(x => console.log(x)) // <tick> // 1
306. Observable.of(1) .delay(1000) .subscribe(x => console.log(x)) // <tick> // 1
307. Observable.of(1, 2, 3) .mergeMap(n => ( Observable.of(n * 2).delay(1000) )) .subscribe(x => console.log(x)); // <tick> // 2 // 4 // 6
308. Observable.of(1, 2, 3) .mergeMap(n => ( Observable.of(n * 2).delay(1000) )) .subscribe(x => console.log(x)); // <tick> // 2 // 4 // 6
309. Observable.of(1, 2, 3) .mergeMap(n => ( Observable.of(n * 2).delay(1000) )) .subscribe(x => console.log(x)); // <tick> // 2 // 4 // 6
310. Observable.of(1, 2, 3) .mergeMap(n => ( Observable.of(n * 2).delay(1000) )) .subscribe(x => console.log(x)); // <tick> // 2 // 4 // 6 ?
311. Concurrency
312. subscribe mergeMap console.log Observable.of(n * 2)
313. subscribe mergeMap console.log Observable.of(n * 2) 1
314. subscribe mergeMap console.log Observable.of(n * 2) 1
315. subscribe mergeMap console.log Observable.of(n * 2) 2
316. subscribe mergeMap console.log Observable.of(n * 2) 2 2
317. subscribe mergeMap console.log Observable.of(n * 2) 2 2
318. subscribe mergeMap console.log Observable.of(n * 2) 2 4
319. subscribe mergeMap console.log Observable.of(n * 2) 3 2 4
320. subscribe mergeMap console.log Observable.of(n * 2) 3 2 4
321. subscribe mergeMap console.log Observable.of(n * 2) 2 4 6
322. subscribe mergeMap console.log Observable.of(n * 2) 2 4 6
323. subscribe mergeMap console.log Observable.of(n * 2) 4 6 2
324. subscribe mergeMap console.log Observable.of(n * 2) 6 4
325. subscribe mergeMap console.log Observable.of(n * 2) 6
326. 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
327. 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
328. 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
329. 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
330. 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
331. Observable.of(1, 2, 3) .concatMap(n => ( Observable.of(n * 2).delay(1000) )) .subscribe(x => console.log(x)); // <tick> // 2 // <tick> // 4 // <tick> // 6
332. subscribe concatMap console.log Observable.of(n * 2)
333. subscribe console.log Observable.of(n * 2) 1 concatMap
334. subscribe console.log Observable.of(n * 2) 1 concatMap
335. subscribe console.log Observable.of(n * 2) 2 concatMap
336. subscribe console.log Observable.of(n * 2) 2 concatMap
337. subscribe console.log Observable.of(n * 2) 2 concatMap
338. subscribe console.log Observable.of(n * 2) 2 concatMap
339. subscribe console.log Observable.of(n * 2) 2 concatMap
340. subscribe console.log Observable.of(n * 2) 4 concatMap
341. subscribe console.log Observable.of(n * 2) 4 concatMap
342. subscribe console.log Observable.of(n * 2) 4 concatMap
343. subscribe console.log Observable.of(n * 2) 3 concatMap
344. subscribe console.log Observable.of(n * 2) 3 concatMap
345. subscribe console.log Observable.of(n * 2) 6 concatMap
346. subscribe console.log Observable.of(n * 2) 6 concatMap
347. subscribe console.log Observable.of(n * 2) 6 concatMap
348. Rate Limiting
349. 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' } ]
350. 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' } ]
351. 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' } ]
352. 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' } ]
353. Observable .ajax .get(url) subscribe console.log pluck bufferCount 'response' 3 concatMap
354. Observable .ajax .get(url) subscribe concatMap console.log pluck bufferCount 'response' 3 1
355. Observable .ajax .get(url) subscribe concatMap console.log pluck bufferCount 'response' 3
356. Observable .ajax .get(url) subscribe concatMap console.log pluck bufferCount 'response' 3 R Rate limit next request
357. Observable .ajax .get(url) subscribe concatMap console.log pluck bufferCount 'response' 3 R
358. Observable .ajax .get(url) subscribe concatMap console.log pluck bufferCount 'response' 3 R
359. Observable .ajax .get(url) subscribe concatMap console.log pluck bufferCount 'response' 3 O1
360. Observable .ajax .get(url) subscribe concatMap console.log pluck bufferCount 'response' 2 O1
361. Observable .ajax .get(url) subscribe concatMap console.log pluck bufferCount 'response' 2 O1 +
362. Observable .ajax .get(url) subscribe concatMap console.log pluck bufferCount 'response' 1 O1 O2
363. Observable .ajax .get(url) subscribe concatMap console.log pluck bufferCount 'response' 1 O1 O2 +
364. Observable .ajax .get(url) subscribe concatMap console.log pluck bufferCount 'response' 0 O1 O2 O3
365. Observable .ajax .get(url) subscribe concatMap console.log […] pluck bufferCount 'response' 0
366. Sequential vs. Parallel
367. 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' } ]
368. 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' } ]
369. 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' } } ]
370. 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' } } ]
371. 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' } } ] Observable or Promise
372. fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin subscribe console.log
373. fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin subscribe console.log R1
374. fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin R1 subscribe console.log
375. fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin R1 subscribe console.log R3
376. fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin R1 R3 subscribe console.log
377. fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin R1 R3 subscribe console.log R2
378. fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin R1 R2 R3 subscribe console.log
379. fetchOrder(1) fetchOrder(2) fetchOrder(3) forkJoin subscribe console.log R1 R2 R3
380. Tip of the iceberg
381. • Declarative, lazy operations • Expressive event management • No more error swallowing • Rate limiting and concurrent processing
382. • Declarative, lazy operations • Expressive event management • No more error swallowing • Rate limiting and concurrent processing ✓ ✓ ✓ ✓
383. github.com/ReactiveX/rxjs reactivex.io/rxjs RxJS
384. Observables ECMAScript Proposal:
 github.com/tc39/proposal-observable Another spec implementation:
 github.com/zenparsing/zen-observable
385. Thanks! Jeremy Fairbank @elpapapollo / jfairbank Slides: bit.ly/rxjs-atl-js