+ <h1>What problem to promises solve?</h1>
+ <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
+ <ul>
+ <li>Asynchronous request management</li>
+ <li>Error handling for computations which may fail</li>
+ <li>Probably more too</li>
+ </ul>
+ </div>
+ <h1 style="margin-top: 50px;">What are promises then?</h1>
+ <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
+ <ul>
+ <li>A value (which may or may not be available yet) wrapped in some additional context</li>
+ <li>Functions to instantiate the wrapper (Promise.resolve, Promise.reject)
+ <li>A rule for composing these wrapped values (then)</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div id="slide-6">
+ <div class="slide-title">=<< Promises >>=</div>
+ <div class="slide">
+ <h1>Terminology/syntax recap</h1>
+ <h2>JavaScript arrow functions</h2>
+ <div style="display: flex;">
+ <pre style="margin: auto;"><code style="font-size: 20px;">x => x + 1;</code></pre>
+ </div>
+ <div style="display: flex; margin-top: 20px; margin-bottom: 20px;">
+ <span style="margin: auto;">is equivalent to:</span>
+ </div>
+ <div style="display: flex; margin-bottom:50px;">
+ <pre style="margin: auto;"><code style="font-size: 20px;">function(x) {
+ return x+1;
+}</code></pre>
+ </div>
+ <h2>Composition</h2>
+ <div style="display: flex;">
+ <div class="textbox" style="margin: auto; width: 60%; font-size: 20px;">A method of combining two things of the same type in to another thing that is also of the same type</div>
+ </div>
+ </div>
+ </div>
+ <div id="slide-7">
+ <div class="slide-title">=<< Promises >>=</div>
+ <div class="slide">
+ <h1>Promise composition</h1>
+ <div style="display: flex;">
+ <div class="textbox" style="margin: auto; width: 60%; font-size: 20px;">The `then` method of a promise accepts a function as an argument. This function takes a value and returns a new promise. The result of `then` is now a new promise that combines the previous two using the "composition rule" given to `then`.</div>
+ </div>
+ <div style="display: flex; margin-top: 100px">
+ <pre style="margin: auto;"><code style="font-size: 12px;"><span class="promise3"><span class="promise2"><span class="promise1">Promise.resolve("Some value")</span>.then(x => Promise.resolve(x + " and another value"))</span>.then(x => Promise.resolve(x + "and another one!"))</span>;</code></pre>
+ </div>
+ <div style="display: flex;">
+ <div class="textbox" style="margin: auto; width: 60%; font-size: 20px; margin-top: 50px;">There are three promises in the above snippet. <span onmouseenter="activatePromise(1)" onmouseleave="deactivatePromise(1)" class="promise1">One</span>, <span onmouseenter="activatePromise(2)" onmouseleave="deactivatePromise(2)" class="promise2">two</span>, <span onmouseenter="activatePromise(3)" onmouseleave="deactivatePromise(3)" class="promise3">three</span>.</div>
+ </div>
+ <div style="display: flex; margin-top: 100px">
+ <pre style="margin: auto;"><code style="font-size: 12px;">Promise.resolve("Some value").then(x => Promise.reject("It's all gone wrong")).then(x => Promise.resolve(x + "and another one!"));</code></pre>
+ </div>
+ <div style="display: flex;">
+ <div class="textbox" style="margin: auto; width: 60%; font-size: 20px; margin-top: 50px;">The above snippet still results in a promise, but it is a "failed" one. Any subsequent `then` after the `reject` has no effect.</div>
+ </div>
+ </div>
+ </div>
+ <div id="slide-8">
+ <div class="slide-title">=<< Promises >>=</div>
+ <div class="slide">
+ <h1>OK great but who cares?</h1>
+ <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
+ <ul>
+ <li>We are <span class="shake-constant shake-opacity highlight" style="display: inline-block;">declaring</span> how we want promises to compose</li>
+ <li>
+ The order that the promises actually resolve their values in is not important
+ <ul><li>In other words, we don't have to worry about <span class="shake-constant shake-opacity highlight" style="display: inline-block;">timing</span> anymore</li></ul>
+ </li>
+ <li>We can <span class="shake-constant shake-opacity highlight" style="display: inline-block;">declare</span> a failure anywhere in the chain</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div id="slide-9">
+ <div class="slide-title">=<< Promises >>=</div>
+ <div class="slide flexotron">
+ <div style="position: relative;">
+ <img src="img/thonking.gif" />
+ <div class="thonkingWrap"><div class="thonk">atemporality?</div></div>
+ <div class="thonkingWrap"><div class="thonk">declaritive?</div></div>
+ <div class="thonkingWrap"><div class="thonk">functions?</div></div>
+ <div class="thonkingWrap"><div class="thonk">composition?</div></div>
+ </div>
+ </div>
+ </div>
+ <div id="slide-10">
+ <div class="slide-title">=<< Promises >>=</div>
+ <div class="slide">
+ <h1>Woah!</h1>
+ <h2>JavaScript</h2>
+ <pre style="margin-bottom: 50px;"><code class="javascript"><span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends2" onmouseenter="activateFriends(2);" onmouseleave="deactivateFriends(2);" style="display: inline-block">"We start here"</span>)