Actually Understanding Asynchronous JavaScript

Transcript

1. Actually Understanding Asynchronous JavaScript
2. I'm Steve. @stevekinney
3. I'm Steve. @stevekinney
4. http://turing.io
5. http://bit.ly/electronjs
7. PSA: Stop me ay any point to ask any and all questions.
8. What does "asynchronous" even mean?
9. To find out, let's torture some metaphors!
11. Running Errands Synchronously
19. Running Errands Asynchronously
25. Functions Run to Completion
37. What constitutes "completion?" • Hitting the end of a function • Reaching a return statement • Throwing an error (and not catching it)
39. What Happens When the Browser Blocks?
40. What Happens When the Browser Blocks?
42. Asynchronous JavaScript is based on events.
43. document.addEventListener('click', function () { alert('Congratulations, you clicked on the web page.'); });
45. The Call Stack A data structure that keeps track of where we are in the execution of our programs.
46. var possessions = []; var lifeSavings = 25; function goGroceryShopping() { buyVeganHam(); } function buyVeganHam() { if (lifeSavings < 10) { throw new Error('Not enough money.'); } lifeSavings = lifeSavings - 10; possessions.push('vegan ham'); } goGroceryShopping();
47. Call Stack
48. Top Level Call Stack
49. Top Level goGroceryShopping Call Stack
50. Top Level goGroceryShopping buyVeganHam Call Stack
51. Top Level goGroceryShopping Call Stack
52. Top Level Call Stack
53. Call Stack
54. var possessions = []; var lifeSavings = 25; function goGroceryShopping() { buyOrganicAlmondMilk(); buyVeganHam(); } function buyOrganicAlmondMilk() { lifeSavings = lifeSavings - 20; possessions.push('organic almond milk'); } function buyVeganHam() { // When this code eventually executes, we'll only have $5 left. if (lifeSavings < 10) { throw new Error('Not enough money.'); } lifeSavings = lifeSavings - 10; possessions.push('vegan ham'); } goGroceryShopping();
55. You've seen the Call Stack before.
56. Call Stack
57. Top Level Call Stack
58. Top Level goGroceryShopping Call Stack
59. Top Level goGroceryShopping buyOrganicAlmondMilk Call Stack
60. Top Level goGroceryShopping Call Stack
61. Top Level goGroceryShopping Call Stack buyVeganHam
62. Top Level goGroceryShopping Call Stack
63. Top Level Call Stack
64. Call Stack
66. The Event Queue A list of functions that are handled in a first-in, first-out order.
67. The Event Loop A programming construct that waits for and dispatches functions in the Event Queue to the Call Stack.
68. Queue
69. Queue A very important click event Some mildly important AJAX response A frivolous click event
70. Queue Some mildly important AJAX response A frivolous click event
71. Queue A frivolous click event
72. Queue
73. Queue Call Stack
74. Queue Call Stack Some mildly important AJAX response
75. Queue Call Stack Some mildly important AJAX response
76. Queue A very important click event Call Stack
77. Queue A very important click event A frivolous click event Call Stack
78. Queue A very important click event A frivolous click event Call Stack
79. Queue A frivolous click event Call Stack
80. Queue A frivolous click event Call Stack
81. Queue Call Stack
82. Turns out that JavaScript isn't asynchronous after all.
83. It's the environment.
87. setTimeout(function () { console.log('I will happen later.'); }, 5000); Timers setTimeout is available in all browsers and Node.js
88. Timers will be added to the Event Queue after that number of milliseconds.
89. Queue Top Level goGroceryShopping buyVeganHams Call Stack
90. Queue Top Level goGroceryShopping buyVeganHams Call Stack setTimeout(…, 1000)
91. Queue Top Level goGroceryShopping buyVeganHams Call Stack setTimeout(…, 1000)
92. Queue Top Level goGroceryShopping buyVeganHams Call Stack thisWillBlockUpTheWorksAndNeverComplete setTimeout(…, 1000)
93. Queue Top Level goGroceryShopping buyVeganHams Call Stack thisWillBlockUpTheWorksAndNeverComplete setTimeout(…, 1000)
94. The Callback Pattern
95. Callbacks aren't anything special.
96. Functions can be passed as arguments to functions.
97. function callbackSandwich(callbackFunction) { console.log('Top piece of bread.'); callbackFunction(); console.log('Bottom piece of bread.'); } callbackSandwich(function () {console.log('American cheese.')});
98. Sometimes we'll guard against blowing things up if a callback function isn't provided.
99. function callbackSandwich(callbackFunction) { console.log('Top piece of bread.'); if (typeof callbackFunction === 'function') callbackFunction(); console.log('Bottom piece of bread.'); } callbackSandwich(function () {console.log('American cheese.')}); callbackSandwich(); // Just two pieces of bread.
100. From Events Listeners to Callbacks
114. So now…
117. Promises
118. Callbacks have some problems.
119. We can usually only do one thing with the data from the event.
120. We can't store the result anywhere.
124. "Inversion of Control"
126. Libraries: Q, Bluebird, RSVP
128. .then()
129. Promise Chaining
130. asyncMultiply(2, 3).then(c => c * 1000).then(c => console.log(c)); Promise Chaining The return value of the previous link is passed to the next then() method.
133. asyncMultiply(2, 3).then(c => c * 1000) .then(c => { throw new Error('KABOOM!') }) .catch(e => console.error(e));
134. asyncMultiply(2, 3).then(c => c * 1000) .then(c => { throw new Error('KABOOM!') })
142. Refactoring Our Callback Pattern
150. Promise.all() http://bit.ly/async- lab-promise-all
151. Promise.race()
152. http://turing.io http://bit.ly/electronjs