DevNexus 2017: The Rise of Async JavaScript

Transcript

1. the RISEof async JavaScript Jeremy Fairbank blog.jeremyfairbank.com @elpapapollo | gh/jfairbank

2. sigient.com

3. None
4. None
5. None
6. None

7. “Call me maybe?”

8. Async API Callback

9. Callback fetchUserById(1, function(err, user) { if (err) { console.error('Could not

   retrieve user'); } else { console.log(user); } });

10. }); }); }); }); }); }); Callback Callback Callback Callback

    Callback Callback

11. 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); } } ); } }); }

12. 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); } } ); } }); }

13. 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); } } ); } }); }

14. Async API ?

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

    => customer.name); }

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

17. Error Error Error Error

18. function fetchCustomerNameForOrder(orderId) { return fetchOrder(orderId) .then(order => fetchCustomer(order.customerId)) .then(customer =>

    customer.name) .catch(err => { logError(err); throw err; }); }

19. Getting there…

20. • More readable and maintainable • Synchronous-looking but nonblocking •

    Use native flow control constructs • More declarative and versatile

21. async function fetchCustomerNameForOrder(orderId) { try { const order = await

    fetchOrder(orderId); const customer = await fetchCustomer(order.customerId); return customer.name; } catch (err) { logError(err); throw err; } }

22. async function fetchCustomerNameForOrder(orderId) { try { const order = await

    fetchOrder(orderId); const customer = await fetchCustomer(order.customerId); return customer.name; } catch (err) { logError(err); throw err; } }

23. async function fetchCustomerNameForOrder(orderId) { try { const order = await

    fetchOrder(orderId); const customer = await fetchCustomer(order.customerId); return customer.name; } catch (err) { logError(err); throw err; } }

24. async function fetchCustomerNameForOrder(orderId) { try { const order = await

    fetchOrder(orderId); const customer = await fetchCustomer(order.customerId); return customer.name; } catch (err) { logError(err); throw err; } }

25. Await

26. function fetchOrder(orderId) { return fetch(`/orders/${orderId}`) .then(response => response.json()); } function

    printOrder(orderId) { fetchOrder(orderId) .then(order => console.log(order)); }

27. function fetchOrder(orderId) { return fetch(`/orders/${orderId}`) .then(response => response.json()); } async

    function printOrder(orderId) { const order = await fetchOrder(orderId); console.log(order); }

28. async printOrder(orderId) { const order = await fetchOrder(orderId); console.log(order); }

    fetchOrder(orderId) order

29. async printOrder(orderId) { const order = await fetchOrder(orderId); console.log(order); }

    await

30. async printOrder(orderId) { const order = await fetchOrder(orderId); console.log(order); }

    await order

31. await order

32. await order

33. async printOrder(orderId) { const order = await fetchOrder(orderId); console.log(order); }

    ?

34. async function printOrder(orderId) { const order = await fetchOrder(orderId); console.log(order);

    } printOrder(1); Invoke

35. async function printOrder(orderId) { const order = await fetchOrder(orderId); console.log(order);

    } printOrder(1); Encounter await

36. async function printOrder(orderId) { const order = await fetchOrder(orderId); console.log(order);

    } printOrder(1); Wrap in Promise.resolve

37. Wrap in Promise.resolve async function printOrder(orderId) { const promise =

    Promise.resolve(fetchOrder(orderId)); console.log(order); } printOrder(1);

38. async function printOrder(orderId) { const promise = Promise.resolve(fetchOrder(orderId)); console.log(order); }

    printOrder(1); Wrap rest with then callback

39. async function printOrder(orderId) { const promise = Promise.resolve(fetchOrder(orderId)); return promise.then(order

    => { console.log(order); return Promise.resolve(undefined); }); } printOrder(1); Wrap rest with then callback

40. async function printOrder(orderId) { const promise = Promise.resolve(fetchOrder(orderId)); return promise.then(order

    => { console.log(order); return Promise.resolve(undefined); }); } printOrder(1); Wrap implicit return with Promise.resolve

41. function fetchCustomerNameForOrder(orderId) { return Promise.resolve(fetchOrder(orderId)) .then(order => { return Promise.resolve(fetchCustomer(order.customerId))

    .then(customer => { return Promise.resolve(customer.name); }); }); } ?

42. async function meaningOfLife() { return 42; } meaningOfLife() === 42;

    ???

43. async function meaningOfLife() { return 42; } function meaningOfLife() {

    return Promise.resolve(42); } meaningOfLife() .then(answer => answer === 42);

44. Exceptional Situations

45. async function printOrder(orderId) { try { const order = await

    fetchOrder(orderId); console.log(order); } catch (e) { console.log('Error retrieving order', e); } }

46. async function printOrder(orderId) { try { const order = await

    fetchOrder(orderId); console.log(order); } catch (e) { console.log('Error retrieving order', e); } } ?

47. function fetchOrder(orderId) { return fetch(`/orders/${orderId}`) .then(resp => { if (resp.status

    === 404) { throw new Error('Order not found'); } return resp.json(); }); }

48. function fetchOrder(orderId) { return new Promise((resolve, reject) => { $.get(`/orders/${orderId}`)

    .done(order => resolve(order)) .fail(resp => { if (resp.status === 404) { reject(new Error('Order not found')); } }); }); }

49. Error Error Error Error

50. Regain Control

51. async function findOrCreateOrder(orderId) { let order; if (await orderExists(orderId)) {

    order = await fetchOrder(orderId); } else { order = await createOrder(); } return order; }

52. async function findOrCreateOrder(orderId) { let order; if (await orderExists(orderId)) {

    order = await fetchOrder(orderId); } else { order = await createOrder(); } return order; }

53. async function printOrders(orderIds) { for (const id of orderIds) {

    const order = await fetchOrder(id); console.log(order); } }

54. async function printOrders(orderIds) { for (const id of orderIds) {

    const order = await fetchOrder(id); console.log(order); } }

55. async function printOrders(orderIds) { for (const id of orderIds) {

    const order = await fetchOrder(id); console.log(order); } } Problem?

56. async function printOrders(orderIds) { for (const id of orderIds) {

    const order = await fetchOrder(id); console.log(order); } } printOrders([1, 2, 3]);

57. printOrders([1, 2, 3]); await fetchOrder(1); await fetchOrder(2); await fetchOrder(3);

58. printOrders([1, 2, 3]); await fetchOrder(1); await fetchOrder(2); await fetchOrder(3);

59. printOrders([1, 2, 3]); await fetchOrder(1); await fetchOrder(2); await fetchOrder(3);

60. Order is important

61. async function printOrders(orderIds) { const orders = await Promise.all( orderIds.map(fetchOrder)

    ); orders.forEach(order => console.log(order)); }

62. async function printOrders(orderIds) { const orders = await Promise.all( orderIds.map(fetchOrder)

    ); orders.forEach(order => console.log(order)); }

63. printOrders([1, 2, 3]); await Promise.all([ fetchOrder(1), fetchOrder(2), fetchOrder(3) ]);

64. printOrders([1, 2, 3]); Demo rise.of.async.jeremyfairbank.com

65. • Readable, synchronous- like code • Native flow control constructs

    • Sequential and concurrent processing

66. • Readable, synchronous- like code • Native flow control constructs

    • Sequential and concurrent processing ✓ ✓ ✓ ✓

67. Events and streams?

68. let counter = 0; function updateCounter(n) { counter += n;

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

69. let counter = 0; function updateCounter(n) { counter += n;

    counterEl.innerHTML = counter; } incrementBtn.addEventListener('click', () => { updateCounter(1); }); decrementBtn.addEventListener('click', () => { updateCounter(-1); }); ×

70. let counter = 0; async function listenIncrement() { await click(incrementBtn);

    counter += 1; counterEl.innerHTML = counter; listenIncrement(); }

71. let counter = 0; async function listenIncrement() { await click(incrementBtn);

    counter += 1; counterEl.innerHTML = counter; listenIncrement(); }

72. let counter = 0; async function listenIncrement() { await click(incrementBtn);

    counter += 1; counterEl.innerHTML = counter; listenIncrement(); }

73. let counter = 0; async function listenIncrement() { await click(incrementBtn);

    counter += 1; counterEl.innerHTML = counter; listenIncrement(); }

74. let counter = 0; async function listenIncrement() { await click(incrementBtn);

    counter += 1; counterEl.innerHTML = counter; listenIncrement(); } ×

75. 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; });

76. RxJS

77. [ 1, 2, 3, 4, 5 ] Arrays Sequences in

    space

78. Observables Sequences in time 1 2 3 4 5

79. Reactive

80. Reactive 3

81. const { Observable } = require('rxjs'); const source = Observable.of(1,

    2, 3); source.subscribe(x => console.log(x)); // 1 // 2 // 3

82. const { Observable } = require('rxjs'); const source = Observable.of(1,

    2, 3); source.subscribe(x => console.log(x)); // 1 // 2 // 3

83. const { Observable } = require('rxjs'); const source = Observable.of(1,

    2, 3); source.subscribe(x => console.log(x)); // 1 // 2 // 3

84. const { Observable } = require('rxjs'); const source = Observable.of(1,

    2, 3); source.subscribe(x => console.log(x)); // 1 // 2 // 3

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

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

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

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

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

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

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

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

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

94. Declarative Transformation Operate on events

95. Observable.of(1, 2, 3) .map(n => n * 2) .subscribe(x =>

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

96. Observable.of(1, 2, 3) .map(n => n * 2) .subscribe(x =>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

112. Lazy Transformation Do only as much work as needed

113. Observable.range(1, 100) .map(n => n * 2) .filter(n => n

     > 4) .take(2) .subscribe(x => console.log(x)); // 6 // 8

114. Observable.range(1, 100) .map(n => n * 2) .filter(n => n

     > 4) .take(2) .subscribe(x => console.log(x)); // 6 // 8

115. Observable.range(1, 100) .map(n => n * 2) .filter(n => n

     > 4) .take(2) .subscribe(x => console.log(x)); // 6 // 8

116. Observable.range(1, 100) .map(n => n * 2) .filter(n => n

     > 4) .take(2) .subscribe(x => console.log(x)); // 6 // 8

117. Observable.range(1, 100) .map(n => n * 2) .filter(n => n

     > 4) .take(2) .subscribe(x => console.log(x)); // 6 // 8

118. console.log n * 2 map subscribe n > 4 Observable.range(1,

     100) filter 2 take

119. console.log n * 2 map subscribe n > 4 1

     Observable.range(1, 100) filter 2 take

120. console.log n * 2 map subscribe n > 4 1

     Observable.range(1, 100) filter 2 take

121. console.log n * 2 map subscribe n > 4 2

     Observable.range(1, 100) filter 2 take

122. console.log n * 2 map subscribe n > 4 2

     Observable.range(1, 100) filter 2 take

123. console.log n * 2 map subscribe n > 4 2

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

124. console.log n * 2 map subscribe n > 4 Observable.range(1,

     100) filter 2 take

125. console.log n * 2 map subscribe n > 4 2

     Observable.range(1, 100) filter 2 take

126. console.log n * 2 map subscribe n > 4 2

     Observable.range(1, 100) filter 2 take

127. console.log n * 2 map subscribe n > 4 4

     Observable.range(1, 100) filter 2 take

128. console.log n * 2 map subscribe n > 4 Observable.range(1,

     100) filter 2 take 4

129. console.log n * 2 map subscribe n > 4 Observable.range(1,

     100) filter 2 take 4 ×

130. console.log n * 2 map subscribe n > 4 Observable.range(1,

     100) filter 2 take

131. console.log n * 2 map subscribe n > 4 3

     Observable.range(1, 100) filter 2 take

132. console.log n * 2 map subscribe n > 4 3

     Observable.range(1, 100) filter 2 take

133. console.log n * 2 map subscribe n > 4 6

     Observable.range(1, 100) filter 2 take

134. console.log n * 2 map subscribe n > 4 Observable.range(1,

     100) filter 2 take 6

135. ✓ console.log n * 2 map subscribe n > 4

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

136. console.log n * 2 map subscribe n > 4 Observable.range(1,

     100) filter 2 take 6

137. console.log n * 2 map subscribe n > 4 Observable.range(1,

     100) filter 1 take 6

138. console.log n * 2 map subscribe n > 4 Observable.range(1,

     100) filter 1 take

139. console.log n * 2 map subscribe n > 4 4

     Observable.range(1, 100) filter 1 take

140. console.log n * 2 map subscribe n > 4 4

     Observable.range(1, 100) filter 1 take

141. console.log n * 2 map subscribe n > 4 8

     Observable.range(1, 100) filter 1 take

142. console.log n * 2 map subscribe n > 4 Observable.range(1,

     100) filter 1 take 8

143. ✓ console.log n * 2 map subscribe n > 4

     Observable.range(1, 100) filter 1 take 8

144. console.log n * 2 map subscribe n > 4 Observable.range(1,

     100) filter 1 take 8

145. console.log n * 2 map subscribe n > 4 Observable.range(1,

     100) filter 0 take 8

146. DOM Events

147. Observable.fromEvent(incrementBtn, 'click') .mapTo(1) .scan((acc, curr) => acc + curr, 0)

     .subscribe((counter) => { counterEl.innerHTML = counter; });

148. Observable.fromEvent(incrementBtn, 'click') .mapTo(1) .scan((acc, curr) => acc + curr, 0)

     .subscribe((counter) => { counterEl.innerHTML = counter; });

149. Observable.fromEvent(incrementBtn, 'click') .mapTo(1) .scan((acc, curr) => acc + curr, 0)

     .subscribe((counter) => { counterEl.innerHTML = counter; });

150. Observable.fromEvent(incrementBtn, 'click') .mapTo(1) .scan((acc, curr) => acc + curr, 0)

     .subscribe((counter) => { counterEl.innerHTML = counter; });

151. Observable.fromEvent(incrementBtn, 'click') .mapTo(1) .scan((acc, curr) => acc + curr, 0)

     .subscribe((counter) => { counterEl.innerHTML = counter; });

152. Observable.fromEvent(incrementBtn, 'click') .mapTo(1) .scan((acc, curr) => acc + curr, 0)

     .subscribe((counter) => { counterEl.innerHTML = counter; });

153. Observable.fromEvent(incrementBtn, 'click') .mapTo(1) .scan((acc, curr) => acc + curr, 0)

     .subscribe((counter) => { counterEl.innerHTML = counter; });

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

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

     (1)

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

     counter value

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

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

     scan

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

     = counter

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

     = counter

161. 1 mapTo subscribe 1 scan acc + curr 0 counterEl.innerHTML

     = counter

162. 1 mapTo subscribe scan 1 acc + curr 0 counterEl.innerHTML

     = counter

163. 1 mapTo subscribe scan 1 acc + curr 1 Counter

     value counterEl.innerHTML = counter

164. 1 mapTo subscribe scan 1 acc + curr 1 counterEl.innerHTML

     = counter

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

     counter

166. acc + curr 1 mapTo subscribe e scan 1 counterEl.innerHTML

     = counter

167. 1 mapTo subscribe e scan acc + curr 1 counterEl.innerHTML

     = counter

168. 1 mapTo subscribe 1 scan acc + curr 1 counterEl.innerHTML

     = counter

169. 1 mapTo subscribe scan 1 acc + curr 1 counterEl.innerHTML

     = counter

170. 1 mapTo subscribe scan 2 acc + curr 2 Counter

     value counterEl.innerHTML = counter

171. 1 mapTo subscribe scan 2 acc + curr 2 counterEl.innerHTML

     = counter

172. 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; });

173. 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; });

174. 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; });

175. 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; });

176. acc + curr 1 mapTo subscribe 0 scan -1 mapTo

     Increment Decrement counterEl.innerHTML = counter

177. acc + curr 1 mapTo subscribe 0 scan -1 mapTo

     Increment Decrement e counterEl.innerHTML = counter

178. acc + curr 1 mapTo subscribe 0 scan -1 mapTo

     Increment Decrement e counterEl.innerHTML = counter

179. acc + curr 1 mapTo subscribe 0 scan -1 mapTo

     Increment Decrement 1 counterEl.innerHTML = counter

180. acc + curr 1 mapTo subscribe 0 scan -1 mapTo

     Increment Decrement 1 counterEl.innerHTML = counter

181. acc + curr 1 mapTo subscribe 1 scan -1 mapTo

     Increment Decrement 1 counterEl.innerHTML = counter

182. acc + curr 1 mapTo subscribe 1 scan -1 mapTo

     Increment Decrement 1 counterEl.innerHTML = counter

183. acc + curr 1 mapTo subscribe 1 scan -1 mapTo

     Increment Decrement counterEl.innerHTML = counter

184. acc + curr 1 mapTo subscribe 1 scan -1 mapTo

     Increment Decrement e counterEl.innerHTML = counter

185. acc + curr 1 mapTo subscribe 1 scan -1 mapTo

     Increment Decrement e counterEl.innerHTML = counter

186. acc + curr 1 mapTo subscribe 1 scan -1 mapTo

     Increment Decrement -1 counterEl.innerHTML = counter

187. acc + curr 1 mapTo subscribe 1 scan -1 mapTo

     Increment Decrement -1 counterEl.innerHTML = counter

188. acc + curr 1 mapTo subscribe 0 scan -1 mapTo

     Increment Decrement 0 counterEl.innerHTML = counter

189. acc + curr 1 mapTo subscribe 0 scan -1 mapTo

     Increment Decrement 0 counterEl.innerHTML = counter

190. Async HTTP

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

     });

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

     });

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

     });

194. Why Observables?

195. 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)); });

196. 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)); });

197. 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)); });

198. 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)); });

199. Async async function printCustomerNames() { const orders = await fetchOrders();

     const filtered = orders.filter( order => order.customerName === 'Tucker' ); const orderIds = filtered.map(order => order.id); orderIds.forEach(id => console.log(id)); }

200. Async async function printCustomerNames() { const orders = await fetchOrders();

     const filtered = orders.filter( order => order.customerName === 'Tucker' ); const orderIds = filtered.map(order => order.id); orderIds.forEach(id => console.log(id)); }

201. Async async function printCustomerNames() { const orders = await fetchOrders();

     const filtered = orders.filter( order => order.customerName === 'Tucker' ); const orderIds = filtered.map(order => order.id); orderIds.forEach(id => console.log(id)); }

202. fetchOrders() .mergeAll() .filter( order => order.customerName === 'Tucker' ) .map(order

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

203. fetchOrders() .mergeAll() .filter( order => order.customerName === 'Tucker' ) .map(order

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

204. fetchOrders() .mergeAll() .filter( order => order.customerName === 'Tucker' ) .map(order

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

205. fetchOrders() .mergeAll() .filter( order => order.customerName === 'Tucker' ) .map(order

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

206. fetchOrders() .mergeAll() .filter( order => order.customerName === 'Tucker' ) .map(order

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

207. Cancellation

208. const promise = fetchOrders() .then((orders) => { orders.foreach((order) => {

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

209. const promise = fetchOrders() .then((orders) => { orders.foreach((order) => {

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

210. const promise = fetchOrders() .then((orders) => { orders.foreach((order) => {

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

211. Observable const subscription = fetchOrders() .subscribe((orders) => { orders.forEach((order) =>

     { console.log(order); }); }); subscription.unsubscribe();

212. Observable const subscription = fetchOrders() .subscribe((orders) => { orders.forEach((order) =>

     { console.log(order); }); }); subscription.unsubscribe();

213. console.log subscribe fetchOrders() .subscribe(...)

214. console.log subscribe fetchOrders() .subscribe(...)

215. subscription.unsubscribe(); console.log subscribe × fetchOrders() .subscribe(...) ×

216. Create HTTP Requests

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

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

219. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {

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

220. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {

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

221. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {

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

222. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {

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

223. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {

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

224. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {

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

225. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {

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

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

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

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

229. Observable.of(1, 2, 3) .subscribe({ next: x => console.log(x), complete: ()

     => console.log('Done!'), }); // 1 // 2 // 3 // Done!

230. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {

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

231. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {

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

232. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {

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

233. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {

     subscriber.next(orders); subscriber.complete(); }); }); } fetchOrders().mergeAll() .subscribe(x => console.log(x));

234. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {

     subscriber.next(orders); subscriber.complete(); }); }); } fetchOrders().mergeAll() .subscribe(x => console.log(x)); No complete callback

235. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {

     subscriber.next(orders); subscriber.complete(); }); }); } fetchOrders().mergeAll() .subscribe(x => console.log(x)); Safe No complete callback

236. 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

237. 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

238. 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

239. 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

240. Error Handling

241. Error Error Error Error Promises

242. 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), });

243. const source = Observable.create((subscriber) => { subscriber.next(1); subscriber.error(new Error('Uh oh'));

     subscriber.next(2); }); source.subscribe(x => console.log(x)); ?

244. const source = Observable.create((subscriber) => { subscriber.next(1); subscriber.error(new Error('Uh oh'));

     subscriber.next(2); }); source.subscribe(x => console.log(x));

245. fetchOrders() .catch((e) => { logError(e); return Observable.of([]); }) .subscribe(x =>

     console.log(x));

246. fetchOrders() .catch((e) => { logError(e); return Observable.of([]); }) .subscribe(x =>

     console.log(x));

247. fetchOrders() .catch((e) => { logError(e); return Observable.of([]); }) .subscribe(x =>

     console.log(x));

248. fetchOrders() .catch((e) => { logError(e); return Observable.of([]); }) .subscribe(x =>

     console.log(x));

249. fetchOrders() .catch((e) => { logError(e); return legacyFetchOrders() .catch((e2) => {

     logError(e2); return Observable.of([]); }) }) .subscribe(x => console.log(x));

250. fetchOrders() .catch((e) => { logError(e); return legacyFetchOrders() .catch((e2) => {

     logError(e2); return Observable.of([]); }) }) .subscribe(x => console.log(x));

251. fetchOrders() .catch((e) => { logError(e); return legacyFetchOrders() .catch((e2) => {

     logError(e2); return Observable.of([]); }) }) .subscribe(x => console.log(x));

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

268. Clean Up

269. function fetchOrdersStream() { return Observable.create((subscriber) => { const socket =

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

270. function fetchOrdersStream() { return Observable.create((subscriber) => { const socket =

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

271. function fetchOrdersStream() { return Observable.create((subscriber) => { const socket =

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

272. function fetchOrdersStream() { return Observable.create((subscriber) => { const socket =

     new WebSocket('ws://example.com'); socket.addEventListener('message', (event) => { subscriber.next(event.data); }); return () => { socket.close(); }; }); } Called when subscription unsubscribes

273. function fetchOrdersStream() { return Observable.create((subscriber) => { const socket =

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

274. Lazy Subscriptions

275. const p1 = fetchOrders(); const p2 = fetchOrders(); const p3

     = fetchOrders(); Promises

276. const p1 = fetchOrders(); const p2 = fetchOrders(); const p3

     = fetchOrders(); Promises Immediate

277. Observables const o1 = fetchOrders(); const o2 = fetchOrders(); const

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

278. Observables Lazy const o1 = fetchOrders(); const o2 = fetchOrders();

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

279. Observables Lazy const o1 = fetchOrders(); const o2 = fetchOrders();

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

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

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

282. const o1 = fetchOrders(); o1.subscribe(); o1.subscribe(); o1.subscribe(); Side Effects Pure

283. Hot Cold vs.

284. Observable creates the source Cold

285. Best for one-off unique requests. Cold

286. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {

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

287. function fetchOrders() { return Observable.create((subscriber) => { fetchOrdersFromDb((orders) => {

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

288. Hot Observable closes over the source

289. Hot Best for multicasting and sharing resources.

290. const socket = new WebSocket('ws://example.com'); const stream = Observable.create((subscriber) =>

     { socket.addEventListener('message', (event) => { subscriber.next(event.data); }); });

291. const socket = new WebSocket('ws://example.com'); const stream = Observable.create((subscriber) =>

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

292. const socket = new WebSocket('ws://example.com'); const stream = Observable.create((subscriber) =>

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

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

     => console.log(x));

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

     => console.log(x)); Shared stream of data

295. fetchOrders() .mergeAll() .filter( order => order.customerName === 'Tucker' ) .map(order

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

296. fetchOrders() .mergeAll() .filter( order => order.customerName === 'Tucker' ) .map(order

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

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

     3 ]

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

     3 ]

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

     3 ]

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

     2 // 3

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

     2 // 3 Flatten

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

     2 // 3

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

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

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

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

307. subscribe mergeAll console.log [3] 2

308. subscribe mergeAll console.log [3] 2

309. subscribe mergeAll console.log 3

310. subscribe mergeAll console.log 3

311. Higher Order Observables

312. Observable.of(1, 2, 3) .map(n => n * 2) .subscribe(x =>

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

313. Observable.of(1, 2, 3) .map(n => n * 2) .subscribe(x =>

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

314. 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 }

315. 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 }

316. 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 }

317. Observable.of(1, 2, 3) .map(n => Observable.of(n * 2)) .mergeAll() .subscribe(x

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

318. Observable.of(1, 2, 3) .map(n => Observable.of(n * 2)) .mergeAll() .subscribe(x

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

319. Observable.of(1, 2, 3) .mergeMap(n => Observable.of(n * 2)) .subscribe(x =>

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

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

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

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

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

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

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

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

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

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

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

330. Observable.of(1, 2, 3) .mergeMap(n => ( Observable.of(n * 2).delay(1000) ))

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

331. Observable.of(1, 2, 3) .mergeMap(n => ( Observable.of(n * 2).delay(1000) ))

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

332. Observable.of(1, 2, 3) .mergeMap(n => ( Observable.of(n * 2).delay(1000) ))

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

333. Observable.of(1, 2, 3) .mergeMap(n => ( Observable.of(n * 2).delay(1000) ))

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

334. Concurrency

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

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

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

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

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

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

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

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

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

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

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

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

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

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

349. 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

350. 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

351. 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

352. 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

353. 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

354. Observable.of(1, 2, 3) .concatMap(n => ( Observable.of(n * 2).delay(1000) ))

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

371. Rate Limiting

372. 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' } ]

373. 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' } ]

374. 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' } ]

375. 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' } ]

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

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

     1

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

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

     R Rate limit next request

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

     R

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

     R

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

     O1

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

     O1

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

     O1 +

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

     O1 O2

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

     O1 O2 +

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

     O1 O2 O3

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

     0

389. Sequential vs. Parallel

390. 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' } ]

391. 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' } ]

392. 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' } } ]

393. 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' } } ]

394. 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

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

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

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

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

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

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

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

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

403. • Declarative, lazy operations • Expressive event management • No

     more error swallowing • Rate limiting and concurrent processing

404. • Declarative, lazy operations • Expressive event management • No

     more error swallowing • Rate limiting and concurrent processing ✓ ✓ ✓ ✓

405. Resources

406. Browser compatibility:
 kangax.github.io/compat-table/es2016plus Node compatibility:
 node.green Async

407. Async babeljs.io

408. Observables github.com/ReactiveX/rxjs RxJS

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

410. THANKS! Jeremy Fairbank blog.jeremyfairbank.com @elpapapollo | gh/jfairbank bit.ly/devnexus-rise-of-async SLIDES: github.com/jfairbank/rise-of-async-js-talk

     CODE: