JazzCon 2017: The Rise of Async JavaScript

Transcript

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

2. sigient.com

3. Async API Callback

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

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

5. }); }); }); }); }); }); Callback Callback Callback Callback

   Callback Callback

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

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. Async API ?

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

    => customer.name); }

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

12. Error Error Error Error

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

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

14. Getting there…

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

    Use native flow control constructs • More declarative and versatile

16. 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; } }

17. 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; } }

18. 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; } }

19. 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; } }

20. Await

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

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

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

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

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

    fetchOrder(orderId) order

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

    await

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

    await order

26. await order

27. await order

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

    ?

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

    } printOrder(1); Invoke

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

    } printOrder(1); Encounter await

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

    } printOrder(1); Wrap in Promise.resolve

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

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

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

    printOrder(1); Wrap rest with then callback

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

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

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

    ???

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

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

38. Exceptional Situations

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

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

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

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

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

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

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

43. Error Error Error Error

44. Regain Control

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

54. Order is important

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

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

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

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

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

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

    • Sequential and concurrent processing

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

    • Sequential and concurrent processing ✓ ✓ ✓ ✓

60. Events and streams?

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

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

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

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

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

64. RxJS

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

    space

66. Observables Sequences in time 1 2 3 4 5

67. Reactive

68. Reactive 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

82. Declarative Transformation Operate on events

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

100. Lazy Transformation Do only as much work as needed

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

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

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

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

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

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

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

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

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

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

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

     100) filter 2 take

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

     Observable.range(1, 100) filter 2 take

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

     Observable.range(1, 100) filter 2 take

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

     Observable.range(1, 100) filter 2 take

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

     Observable.range(1, 100) filter 2 take

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

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

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

     100) filter 2 take

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

     Observable.range(1, 100) filter 2 take

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

     Observable.range(1, 100) filter 2 take

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

     Observable.range(1, 100) filter 2 take

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

     100) filter 2 take 4

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

     100) filter 2 take 4 ×

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 3

     Observable.range(1, 100) filter 2 take

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

     Observable.range(1, 100) filter 2 take

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

     Observable.range(1, 100) filter 2 take

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

     100) filter 2 take 6

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

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

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

     100) filter 2 take 6

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

     100) filter 1 take 6

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

     100) filter 1 take

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

     Observable.range(1, 100) filter 1 take

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

     Observable.range(1, 100) filter 1 take

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

     Observable.range(1, 100) filter 1 take

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

     100) filter 1 take 8

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

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

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

     100) filter 1 take 8

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

     100) filter 0 take 8

134. DOM Events

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

     (1)

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

     counter value

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

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

     scan

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

     = counter

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

     = counter

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

     = counter

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

     = counter

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

     value counterEl.innerHTML = counter

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

     = counter

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

     counter

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

     = counter

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

     = counter

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

     = counter

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

     = counter

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

     value counterEl.innerHTML = counter

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

     = counter

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

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

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

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

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

     Increment Decrement counterEl.innerHTML = counter

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

     Increment Decrement e counterEl.innerHTML = counter

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

     Increment Decrement e counterEl.innerHTML = counter

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

     Increment Decrement 1 counterEl.innerHTML = counter

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

     Increment Decrement 1 counterEl.innerHTML = counter

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

     Increment Decrement 1 counterEl.innerHTML = counter

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

     Increment Decrement 1 counterEl.innerHTML = counter

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

     Increment Decrement counterEl.innerHTML = counter

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

     Increment Decrement e counterEl.innerHTML = counter

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

     Increment Decrement e counterEl.innerHTML = counter

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

     Increment Decrement -1 counterEl.innerHTML = counter

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

     Increment Decrement -1 counterEl.innerHTML = counter

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

     Increment Decrement 0 counterEl.innerHTML = counter

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

     Increment Decrement 0 counterEl.innerHTML = counter

178. Async HTTP

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

     });

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

     });

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

     });

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

     }); Lazy unlike Promise

183. Why Observables?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

196. Cancellation

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

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

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

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

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

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

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

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

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

     console.log(order); }); }); subscription.unsubscribe(); Observable Cancel request

202. Create HTTP Requests

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

220. Error Handling

221. Error Error Error Error Promises

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

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

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

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

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

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

     console.log(x));

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

     console.log(x));

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

     console.log(x));

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

     console.log(x));

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

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

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

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

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

     3 ]

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

     3 ]

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

     3 ]

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

     2 // 3

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

     2 // 3 Flatten

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

     2 // 3

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

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

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

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

241. subscribe mergeAll console.log [3] 2

242. subscribe mergeAll console.log [3] 2

243. subscribe mergeAll console.log 3

244. subscribe mergeAll console.log 3

245. Higher Order Observables

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

268. Concurrency

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

305. Rate Limiting

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

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

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

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

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

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

     1

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

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

     R Rate limit next request

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

     R

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

     R

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

     O1

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

     O1

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

     O1 +

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

     O1 O2

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

     O1 O2 +

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

     O1 O2 O3

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

     0

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

     more error swallowing • Rate limiting and concurrent processing

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

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

325. Resources

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

327. Async babeljs.io

328. Observables github.com/ReactiveX/rxjs RxJS

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

330. THANKS! bit.ly/jazzcon-rise-of-async SLIDES: github.com/jfairbank/rise-of-async-js-talk CODE: Jeremy Fairbank @elpapapollo | gh/jfairbank