href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
- <title>Crazy Wide-Eyed Functional Programming</title>
+ <title>Wide-Eyed Crazy Functional Programming</title>
<style>
body {
margin: 0px;
flex-wrap: wrap;
}
+ .cloudguypower {
+ height: 24%;
+ }
+
#cloudguys {
height: 30%;
width: 100%;
</div>
</div>
<div id="slide-1">
+ <div class="slide-title">=<< Welcome to the Talk Called >>=</div>
+ <div class="slide flexotron" style="flex-wrap: nowrap;">
+ <img class="cloudguypower" src="img/cloudguy-power.gif" />
+ <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;">Wide-Eyed Crazy Functional Programming</div>
+ <img class="cloudguypower" style="transform: scaleX(-1);" src="img/cloudguy-power.gif" />
+ </div>
+ </div>
+ <div id="slide-2">
<div class="slide-title">=<< What's up with that Title? >>=</div>
<div class="slide">
</div>
</ul>
</div>
</div>
- <div id="slide-2">
+ <div id="slide-3">
<div class="slide-title">=<< What's up with that Title? >>=</div>
<div class="slide flexotron idk">
<div style="justify-content: right;">
</ul>
</div>
</div>
- <div id="slide-3">
+ <div id="slide-4">
<div class="slide-title">=<< Obligatory Quote >>=</div>
<div class="slide">
</div>
</ul>
</div>
</div>
- <div id="slide-4">
+ <div id="slide-5">
<div class="slide-title">=<< Obligatory Quote >>=</div>
<div class="slide flexotron">
- <div class="textbox">If you wish to build a ship, do not divide the men into teams and send them to the forest to cut wood. Instead, teach them to long for the vast and endless sea.</div>
+ <div class="textbox" style="font-size:30px;">If you wish to build a ship, do not divide the men into teams and send them to the forest to cut wood. Instead, teach them to long for the vast and endless sea.</div>
</div>
<div class="notes">
<ul>
</ul>
</div>
</div>
- <div id="slide-5">
+ <div id="slide-6">
<div class="slide-title">=<< Obligatory Quote >>=</div>
<div class="slide flexotron">
- <div class="textbox">If you wish to build a ship, do not divide the men into teams and send them to the forest to cut wood. Instead, teach them to long for the vast and endless sea.<br /><br /> - Some French Guy. Idk. Who cares, I'm not cultured. I'm Australian.</div>
+ <div class="textbox" style="font-size:30px;">If you wish to build a ship, do not divide the men into teams and send them to the forest to cut wood. Instead, teach them to long for the vast and endless sea.<br /><br /> - Some French Guy. Idk. I'm not cultured. I'm Australian.</div>
</div>
<div class="notes">
<ul>
</ul>
</div>
</div>
- <div id="slide-6">
+ <div id="slide-7">
<div class="slide-title">=<< What is this Talk About? >>=</div>
<div class="slide">
</div>
</ul>
</div>
</div>
- <div id="slide-7">
+ <div id="slide-8">
<div class="slide-title">=<< What is this Talk About? >>=</div>
<div class="slide">
<h1>This talk is <span class="highlight">not</span> about:</h1>
<ul>
<li>Haskell</li>
<li>Convincing you to stop using whichever language you like</li>
- <li>Maths nonsense</li>
- <li>So what is it about?</li>
+ <li>Mathematics</li>
</ul>
</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>So what is it about?</li>
+ <li>When trying to explain to someone why they should learn functional programming, there are many perspectives to try explain it from.</li>
+ <li>For this discussion, I've settled on a very meta one. Perspective itself.</li>
+ </ul>
+ </div>
</div>
- <div id="slide-8">
+ <div id="slide-9">
<div class="slide-title">=<< What is this Talk About? >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Perspective</div>
</div>
<div class="notes">
<ul>
- <li>When trying to explain to someone why they should learn functional programming, there are many perspectives to try explain it from. For this discussion, I've settled on a very meta one. Perspective itself. As said, this is not a talk about haskell, it's about viewing programming through different perspectives"</li>
+ <li>As said, this is not a talk about haskell, it's about viewing programming through different perspectives"</li>
+ <li>Please ask questions as we go!</li>
+ <li>Let's start the talk!</li>
</ul>
</div>
</div>
- <div id="slide-9">
+ <div id="slide-10">
+ <div class="slide-title">=<< What is Functional Programming? >>=</div>
+ <div class="slide">
+ </div>
+ </div>
+ <div id="slide-11">
<div class="slide-title">=<< What is Functional Programming? >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Programming with functions.</div>
</div>
</div>
- <div id="slide-10">
+ <div id="slide-12">
<div class="slide-title">=<< What is Functional Programming? >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Programming with functions.<br /><br />No, really. Everything is a function.</div>
</div>
</div>
- <div id="slide-11">
+ <div id="slide-13">
+ <div class="slide-title">=<< What is a Function? >>=</div>
+ <div class="slide"></div>
+ </div>
+ <div id="slide-14">
<div class="slide-title">=<< What is a Function? >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >A mapping between sets that associates every element of the first set to exactly one element of the second set.</div>
<li>This is different to functions in procedural languages - actually the name "function" is a misnomer in that context. Really they should be called prodedures or subroutines (hence the name procedural)</li>
<li>A function is a mapping. It's equivalent to something like an array in PHP. It associates one value to another one</li>
<li>In the same way that a PHP array cannot mutate state, a function cannot</li>
+ <li>What I'm describing are actually pure functions, but for the rest of the talk I'll just be saying "functions"</li>
<li>This has some interesting consequences...</li>
</ul>
</div>
</div>
- <div id="slide-12">
+ <div id="slide-15">
<div class="slide-title">=<< What is a Function? >>=</div>
<div class="slide">
<h1>No equivalent constructs for:</h1>
<div class="textbox" style="width: 60%; margin: auto; margin-top:10px;">*In pure functional programming, there are true variables. That is, once you declare the value of a variable, you cannot change it. Contrast this with procedural languages where you can reassign a variable whenever you like.</div>
</div>
</div>
- <div id="slide-13">
+ <div id="slide-16">
<div class="slide-title">=<< Huh? >>=</div>
<div class="slide"></div>
<div class="notes">
</div>
</div>
- <div id="slide-14">
+ <div id="slide-17">
<div class="slide-title">=<< Huh? >>=</div>
<div class="slide flexotron">
<div class="textbox" style="text-align:center; font-size:40px; text-shadow: 4px 4px #000; padding:20px;" >Who in their right mind would wanna do that?!</div>
</ul>
</div>
</div>
- <div id="slide-15">
+ <div id="slide-18">
<div class="slide-title">=<< Huh? >>=</div>
<div class="slide">
<h1>Why tho?</h1>
</ul>
</div>
</div>
- <div id="slide-16">
+ <div id="slide-19">
<div class="slide-title">=<< Paradigms >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Paradigms</div>
</ul>
</div>
</div>
- <div id="slide-17">
+ <div id="slide-20">
<div class="slide-title">=<< Paradigms >>=</div>
<div class="slide flexotron">
<div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px;">
</ul>
</div>
</div>
- <div id="slide-18">
+ <div id="slide-21">
<div class="slide-title">=<< Gramatical Mood >>=</div>
<div class="slide flexotron">
<div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
<li>Shut the door.</li>
<li>Don't eat my burger.</li>
<li>Let's go to the pub.</li>
- <li>Don't make eye contact with Mathieu.</li>
+ <li>Don't make eye contact with Craig.</li>
</ul>
</div>
</div>
</ul>
</div>
</div>
- <div id="slide-13">
+ <div id="slide-22">
<div class="slide-title">=<< Gramatical Mood >>=</div>
<div class="slide flexotron">
<div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
</ul>
</div>
</div>
- <div id="slide-14">
+ <div id="slide-23">
<div class="slide-title">=<< Big Brain Moment >>=</div>
- <div class="slide">
+ <div class="slide"></div>
+ <div class="notes">
+ <ul>
+ <li>And that brings us to the first of hopefully many "Big Brain Moments"</li>
+ </ul>
</div>
</div>
- <div id="slide-15">
+ <div id="slide-24">
<div class="slide-title">=<< Big Brain Moment >>=</div>
<div class="slide flexotron">
<div class="textbox" style="text-align:center; font-size:40px; text-shadow: 4px 4px #000; padding:20px;" >Programming languages <span class="shake-slow shake-constant" style="color: #f98012">ARE</span> human languages.</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>We don't write programs for computers - we write programs for other humans.</li>
+ </ul>
+ </div>
</div>
- <div id="slide-16">
+ <div id="slide-25">
<div class="slide-title">=<< Why is declaritive mood good? >>=</div>
<div class="slide">
</div>
<div class="notes">
<ul>
<li>But in both cases, it seems like we lose something useful in the declaritive mode. What do we get by giving up these things?</li>
+ <li>Surely giving instructions is useful, otherwise how do you do anything?!</li>
</ul>
</div>
</div>
- <div id="slide-17">
+ <div id="slide-26">
<div class="slide-title">=<< Why is declaritive mood good? >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Atemporality</div>
</div>
</div>
- <div id="slide-18">
+ <div id="slide-27">
<div class="slide-title">=<< Why is declaritive mood good? >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Independant of or unaffected by time.</div>
</div>
</div>
- <div id="slide-19">
+ <div id="slide-28">
<div class="slide-title">=<< Why is declaritive mood good? >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:50px; text-shadow: 4px 4px #000; padding:20px;" >Declarative programs express what <span class="shake-slow shake-constant" style="color: #f98012">they actually do</span> Leaving more "brain space" to focus on solving the problem.</div>
</ul>
</div>
</div>
- <div id="slide-20">
+ <div id="slide-29">
<div class="slide-title">=<< To Recap >>=</div>
<div class="slide">
<h1>Why tho?</h1>
<li>Because sometimes there is such a thing as too much freedom</li>
<li>Functional programming is awesome because it stops you shooting yourself in the foot</li>
<li>"Constraints liberate, liberties constrain"</li>
+ <li>There are also classes of problems where the declaritive style is a more elegant way of expressing the solution</li>
</ul>
</div>
<div class="notes">
</div>
</div>
</div>
- <div id="slide-21">
+ <div id="slide-30">
<div class="slide-title">=<< Some Code (Finally) >>=</div>
<div class="slide">
</div>
+ <div class="notes">
+ <ul>
+ <li>At this point I imagine a lot of you are thinking....</li>
+ </ul>
+ </div>
</div>
- <div id="slide-22">
+ <div id="slide-31">
<div class="slide-title">=<< Some Code (Finally) >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:50px; text-shadow: 4px 4px #000; padding:20px;" >Enough of this philosophy and linguistics mumbo jumbo, already!</div>
</div>
</div>
- <div id="slide-23">
+ <div id="slide-32">
<div class="slide-title">=<< Some Code (Finally) >>=</div>
<div class="slide">
- <h1>The Great Dividers</h1>
+ <h1>My favourite example</h1>
<h2>Consider:</h2>
<div style="display: flex;">
<pre style="margin: auto;"><code style="font-size: 20px;"><span class="code-friends1 code-friends4">x = x + 1;</span></code></pre>
</div>
<div style="display: flex; margin-bottom:50px;">
<pre style="margin: auto;"><code style="font-size: 20px;"><span class="code-friends2 code-friends3">function repeat(x) {
- return x + repeat(x);
- }</span></code></pre>
+ return x + repeat(x);
+}</span></code></pre>
</div>
<h2>OK, so what?</h2>
<div style="display: flex;">
</div>
</div>
</div>
- <div id="slide-24">
+ <div id="slide-33">
<div class="slide-title">=<< Some Code (Finally) >>=</div>
<div class="slide">
<div style="display: flex; margin-top: 50px;">
</div>
</div>
</div>
- <div id="slide-25">
+ <div id="slide-34">
<div class="slide-title">=<< Some Code (Finally) >>=</div>
<div class="slide">
<div style="display: flex; margin-top: 50px;">
</div>
</div>
</div>
- <div id="slide-26">
+ <div id="slide-35">
<div class="slide-title">=<< Big Brain Moment >>=</div>
<div class="slide flexotron">
<div class="textbox" style="text-align:center; font-size:40px; text-shadow: 4px 4px #000; padding:20px;" >Programming languages <span class="shake-slow shake-constant" style="color: #f98012">ARE</span> human languages.</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>Let's take this time to reflect...</li>
+ <li>Imperative tells you what to do</li>
+ <li>Declaritive tells you what things are</li>
+ </ul>
+ </div>
</div>
- <div id="slide-27">
+ <div id="slide-36">
<div class="slide-title">=<< Some Code (Finally) >>=</div>
<div class="slide">
- <h1>Real Haskell Code That Runs</h1>
+ <h1>Real Haskell code that runs</h1>
<pre><code class="haskell">repeat x = x ++ repeat x
threeFs = take 3 (repeat "f")
<div class="notes">
<ul>
<li>Let's think about the way this is understood</li>
- <li>To get 3 fs, take 3 fs from an infinite list of fs - totally fine, makes complete sense</li>
+ <li>threeFs is the first three elements in an infinite list of fs - totally fine, makes complete sense</li>
+ <li>Shame that the function name is "take" but whatever</li>
</ul>
</div>
</div>
- <div id="slide-28">
+ <div id="slide-37">
<div class="slide-title">=<< Some Code (Finally) >>=</div>
<div class="slide">
- <h1>Real JavaScript Code That Hangs</h1>
+ <h1>Real JavaScript code that hangs</h1>
<pre><code class="javascript">function repeat(x) {
return x + repeat(x);
}
</ul>
</div>
</div>
- <div id="slide-29">
+ <div id="slide-38">
<div class="slide-title">=<< Big Brain Moment >>=</div>
<div class="slide">
<h1>What did declaritive mode give us?</h1>
</ul>
</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>How cool is that? Because we can express what things are, we can express an infininte list!</li>
+ <li>None of the declaritive version of the program relies on us traking changes anywhere. We just need to know what a thing is and how it relates to another thing</li>
+ </ul>
+ </div>
</div>
- <div id="slide-30">
+ <div id="slide-39">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide flexotron">
- <h1>Promises</h1>
+ <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Promises</div>
</div>
<div class="notes">
<ul>
</ul>
</div>
</div>
- <div id="slide-31">
+ <div id="slide-40">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide flexotron">
<div style="position: relative; text-align:center; font-size:40px; text-shadow: 4px 4px #000;" >
<div class="angereyWrap"><div class="angerey">>:(</div></div>
Promises <span class="shake-slow shake-constant" style="display: inline-block; color: #f98012">do not</span> make things asynchronous!</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>So there's a lot of misleading information out there about promises</li>
+ <li>Some people believe that promises "make" things asynchronous, but this isn't true</li>
+ <li>You can have perfectly synchronous promises, the thing you pass as a callbackto a promise does not get "run in the background" or anything like that</li>
+ </ul>
+ </div>
</div>
- <div id="slide-32">
+ <div id="slide-41">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide">
+ <h1>The real promises</h1>
<h2>What problems do promises solve?</h2>
<div class="textbox" style="width: 60%; margin: auto; text-align: left;">
<ul>
<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>
- <li>A rule for composing these wrapped values (then)</li>
+ <li>Functions to instantiate the wrapper (`Promise.resolve`, `Promise.reject`)</li>
+ <li>A rule for composing these wrapped values (`then`)</li>
</ul>
</div>
</div>
</div>
- <div id="slide-33">
+ <div id="slide-42">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide">
<h1>Terminology/syntax recap</h1>
</div>
<div class="notes">
<ul>
+ <li>Shoutout Mat about arrow functions</li>
<li>A quick note on composition: So far you may have come across function composition. There's lots of different kinds of composition, but function composition is incredibly common, especially in programming. However in the example we are talking the composition of promises. In the sense that we combine to promises, and get another promise.</li>
</ul>
</div>
</div>
- <div id="slide-34">
+ <div id="slide-43">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide">
<h1>Promise composition</h1>
<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 class="notes">
+ <ul>
+ <li>Depending on how we go for time, I hope to discuss composition after this section.</li>
+ </ul>
+ </div>
</div>
- <div id="slide-35">
+ <div id="slide-44">
<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>We are <span class="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>
+ <ul><li>In other words, we don't have to worry about <span class="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>
+ <li>We can <span class="highlight" style="display: inline-block;">declare</span> a failure anywhere in the chain</li>
</ul>
</div>
</div>
</div>
- <div id="slide-36">
+ <div id="slide-45">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide flexotron">
<div style="position: relative;">
</ul>
</div>
</div>
- <div id="slide-37">
+ <div id="slide-46">
<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>)
- <span class="code-friends3" onmouseenter="activateFriends(3);" onmouseleave="deactivateFriends(3);" style="display: inline-block">.then</span>(<span class="code-friends4" onmouseenter="activateFriends(4);" onmouseleave="deactivateFriends(4);" style="display: inline-block">x =></span> <span class="code-friends5" onmouseenter="activateFriends(5);" onmouseleave="deactivateFriends(5);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends6" onmouseenter="activateFriends(6);" onmouseleave="deactivateFriends(6);" style="display: inline-block">x + " then get here"</span>))
- <span class="code-friends7" onmouseenter="activateFriends(7);" onmouseleave="deactivateFriends(7);" style="display: inline-block">.then</span>(<span class="code-friends8" onmouseenter="activateFriends(8);" onmouseleave="deactivateFriends(8);" style="display: inline-block">x =></span> <span class="code-friends9" onmouseenter="activateFriends(9);" onmouseleave="deactivateFriends(9);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends10" onmouseenter="activateFriends(10);" onmouseleave="deactivateFriends(10);" style="display: inline-block">x + " and finally here!"</span>))</code></pre>
+ <span class="code-friends3" onmouseenter="activateFriends(3);" onmouseleave="deactivateFriends(3);" style="display: inline-block">.then</span>(<span class="code-friends4" onmouseenter="activateFriends(4);" onmouseleave="deactivateFriends(4);" style="display: inline-block">x =></span> <span class="code-friends5" onmouseenter="activateFriends(5);" onmouseleave="deactivateFriends(5);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends6" onmouseenter="activateFriends(6);" onmouseleave="deactivateFriends(6);" style="display: inline-block">x + " then get here"</span>))
+ <span class="code-friends7" onmouseenter="activateFriends(7);" onmouseleave="deactivateFriends(7);" style="display: inline-block">.then</span>(<span class="code-friends8" onmouseenter="activateFriends(8);" onmouseleave="deactivateFriends(8);" style="display: inline-block">x =></span> <span class="code-friends9" onmouseenter="activateFriends(9);" onmouseleave="deactivateFriends(9);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends10" onmouseenter="activateFriends(10);" onmouseleave="deactivateFriends(10);" style="display: inline-block">x + " and finally here!"</span>))</code></pre>
<h2>Haskell</h2>
<pre><code class="haskell"><span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">Right</span>(<span class="code-friends2" onmouseenter="activateFriends(2);" onmouseleave="deactivateFriends(2);" style="display: inline-block">"We start here"</span>)
- <span class="code-friends3" onmouseenter="activateFriends(3);" onmouseleave="deactivateFriends(3);" style="display: inline-block">>>=</span> (<span class="code-friends4" onmouseenter="activateFriends(4);" onmouseleave="deactivateFriends(4);" style="display: inline-block">\x -> </span><span class="code-friends5" onmouseenter="activateFriends(5);" onmouseleave="deactivateFriends(5);" style="display: inline-block">Right</span> (<span class="code-friends6" onmouseenter="activateFriends(6);" onmouseleave="deactivateFriends(6);" style="display: inline-block">x ++ " then get here"</span>))
- <span class="code-friends7" onmouseenter="activateFriends(7);" onmouseleave="deactivateFriends(7);" style="display: inline-block">>>=</span> (<span class="code-friends8" onmouseenter="activateFriends(8);" onmouseleave="deactivateFriends(8);" style="display: inline-block">\x -></span> <span class="code-friends9" onmouseenter="activateFriends(9);" onmouseleave="deactivateFriends(9);" style="display: inline-block">Right</span> (<span class="code-friends10" onmouseenter="activateFriends(10);" onmouseleave="deactivateFriends(10);" style="display: inline-block">x ++ " and finally here!"</span>))</code></pre>
+ <span class="code-friends3" onmouseenter="activateFriends(3);" onmouseleave="deactivateFriends(3);" style="display: inline-block">>>=</span> (<span class="code-friends4" onmouseenter="activateFriends(4);" onmouseleave="deactivateFriends(4);" style="display: inline-block">\x -> </span><span class="code-friends5" onmouseenter="activateFriends(5);" onmouseleave="deactivateFriends(5);" style="display: inline-block">Right</span> (<span class="code-friends6" onmouseenter="activateFriends(6);" onmouseleave="deactivateFriends(6);" style="display: inline-block">x ++ " then get here"</span>))
+ <span class="code-friends7" onmouseenter="activateFriends(7);" onmouseleave="deactivateFriends(7);" style="display: inline-block">>>=</span> (<span class="code-friends8" onmouseenter="activateFriends(8);" onmouseleave="deactivateFriends(8);" style="display: inline-block">\x -></span> <span class="code-friends9" onmouseenter="activateFriends(9);" onmouseleave="deactivateFriends(9);" style="display: inline-block">Right</span> (<span class="code-friends10" onmouseenter="activateFriends(10);" onmouseleave="deactivateFriends(10);" style="display: inline-block">x ++ " and finally here!"</span>))</code></pre>
</div>
</div>
- <div id="slide-38">
+ <div id="slide-47">
<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>)
- <span class="code-friends3" onmouseenter="activateFriends(3);" onmouseleave="deactivateFriends(3);" style="display: inline-block">.then</span>(<span class="code-friends4" onmouseenter="activateFriends(4);" onmouseleave="deactivateFriends(4);" style="display: inline-block">x =></span> <span class="code-friends5" onmouseenter="activateFriends(5);" onmouseleave="deactivateFriends(5);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends6" onmouseenter="activateFriends(6);" onmouseleave="deactivateFriends(6);" style="display: inline-block">x + " then get here"</span>))
- <span class="code-friends11" onmouseenter="activateFriends(11);" onmouseleave="deactivateFriends(11);" style="display: inline-block">.then</span>(<span class="code-friends12" onmouseenter="activateFriends(12);" onmouseleave="deactivateFriends(12);" style="display: inline-block">x =></span> <span class="code-friends13" onmouseenter="activateFriends(13);" onmouseleave="deactivateFriends(13);" style="display: inline-block">Promise.reject</span>(<span class="code-friends14" onmouseenter="activateFriends(14);" onmouseleave="deactivateFriends(14);" style="display: inline-block">"Oh noes!"</span>))
- <span class="code-friends7" onmouseenter="activateFriends(7);" onmouseleave="deactivateFriends(7);" style="display: inline-block">.then</span>(<span class="code-friends8" onmouseenter="activateFriends(8);" onmouseleave="deactivateFriends(8);" style="display: inline-block">x =></span> <span class="code-friends9" onmouseenter="activateFriends(9);" onmouseleave="deactivateFriends(9);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends10" onmouseenter="activateFriends(10);" onmouseleave="deactivateFriends(10);" style="display: inline-block">x + " and finally here!"</span>))</code></pre>
+ <span class="code-friends3" onmouseenter="activateFriends(3);" onmouseleave="deactivateFriends(3);" style="display: inline-block">.then</span>(<span class="code-friends4" onmouseenter="activateFriends(4);" onmouseleave="deactivateFriends(4);" style="display: inline-block">x =></span> <span class="code-friends5" onmouseenter="activateFriends(5);" onmouseleave="deactivateFriends(5);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends6" onmouseenter="activateFriends(6);" onmouseleave="deactivateFriends(6);" style="display: inline-block">x + " then get here"</span>))
+ <span class="code-friends11" onmouseenter="activateFriends(11);" onmouseleave="deactivateFriends(11);" style="display: inline-block">.then</span>(<span class="code-friends12" onmouseenter="activateFriends(12);" onmouseleave="deactivateFriends(12);" style="display: inline-block">x =></span> <span class="code-friends13" onmouseenter="activateFriends(13);" onmouseleave="deactivateFriends(13);" style="display: inline-block">Promise.reject</span>(<span class="code-friends14" onmouseenter="activateFriends(14);" onmouseleave="deactivateFriends(14);" style="display: inline-block">"Oh noes!"</span>))
+ <span class="code-friends7" onmouseenter="activateFriends(7);" onmouseleave="deactivateFriends(7);" style="display: inline-block">.then</span>(<span class="code-friends8" onmouseenter="activateFriends(8);" onmouseleave="deactivateFriends(8);" style="display: inline-block">x =></span> <span class="code-friends9" onmouseenter="activateFriends(9);" onmouseleave="deactivateFriends(9);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends10" onmouseenter="activateFriends(10);" onmouseleave="deactivateFriends(10);" style="display: inline-block">x + " and finally here!"</span>))</code></pre>
<h2>Haskell</h2>
<pre><code class="haskell"><span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">Right</span>(<span class="code-friends2" onmouseenter="activateFriends(2);" onmouseleave="deactivateFriends(2);" style="display: inline-block">"We start here"</span>)
- <span class="code-friends3" onmouseenter="activateFriends(3);" onmouseleave="deactivateFriends(3);" style="display: inline-block">>>=</span> (<span class="code-friends4" onmouseenter="activateFriends(4);" onmouseleave="deactivateFriends(4);" style="display: inline-block">\x -> </span><span class="code-friends5" onmouseenter="activateFriends(5);" onmouseleave="deactivateFriends(5);" style="display: inline-block">Right</span> (<span class="code-friends6" onmouseenter="activateFriends(6);" onmouseleave="deactivateFriends(6);" style="display: inline-block">x ++ " then get here"</span>))
- <span class="code-friends11" onmouseenter="activateFriends(11);" onmouseleave="deactivateFriends(11);" style="display: inline-block">>>=</span> (<span class="code-friends12" onmouseenter="activateFriends(12);" onmouseleave="deactivateFriends(12);" style="display: inline-block">\x -></span> <span class="code-friends13" onmouseenter="activateFriends(13);" onmouseleave="deactivateFriends(13);" style="display: inline-block">Left </span>(<span class="code-friends14" onmouseenter="activateFriends(14);" onmouseleave="deactivateFriends(14);" style="display: inline-block">"Oh noes!"</span>))
- <span class="code-friends7" onmouseenter="activateFriends(7);" onmouseleave="deactivateFriends(7);" style="display: inline-block">>>=</span> (<span class="code-friends8" onmouseenter="activateFriends(8);" onmouseleave="deactivateFriends(8);" style="display: inline-block">\x -></span> <span class="code-friends9" onmouseenter="activateFriends(9);" onmouseleave="deactivateFriends(9);" style="display: inline-block">Right</span> (<span class="code-friends10" onmouseenter="activateFriends(10);" onmouseleave="deactivateFriends(10);" style="display: inline-block">x ++ " and finally here!"</span>))</code></pre>
+ <span class="code-friends3" onmouseenter="activateFriends(3);" onmouseleave="deactivateFriends(3);" style="display: inline-block">>>=</span> (<span class="code-friends4" onmouseenter="activateFriends(4);" onmouseleave="deactivateFriends(4);" style="display: inline-block">\x -> </span><span class="code-friends5" onmouseenter="activateFriends(5);" onmouseleave="deactivateFriends(5);" style="display: inline-block">Right</span> (<span class="code-friends6" onmouseenter="activateFriends(6);" onmouseleave="deactivateFriends(6);" style="display: inline-block">x ++ " then get here"</span>))
+ <span class="code-friends11" onmouseenter="activateFriends(11);" onmouseleave="deactivateFriends(11);" style="display: inline-block">>>=</span> (<span class="code-friends12" onmouseenter="activateFriends(12);" onmouseleave="deactivateFriends(12);" style="display: inline-block">\x -></span> <span class="code-friends13" onmouseenter="activateFriends(13);" onmouseleave="deactivateFriends(13);" style="display: inline-block">Left </span>(<span class="code-friends14" onmouseenter="activateFriends(14);" onmouseleave="deactivateFriends(14);" style="display: inline-block">"Oh noes!"</span>))
+ <span class="code-friends7" onmouseenter="activateFriends(7);" onmouseleave="deactivateFriends(7);" style="display: inline-block">>>=</span> (<span class="code-friends8" onmouseenter="activateFriends(8);" onmouseleave="deactivateFriends(8);" style="display: inline-block">\x -></span> <span class="code-friends9" onmouseenter="activateFriends(9);" onmouseleave="deactivateFriends(9);" style="display: inline-block">Right</span> (<span class="code-friends10" onmouseenter="activateFriends(10);" onmouseleave="deactivateFriends(10);" style="display: inline-block">x ++ " and finally here!"</span>))</code></pre>
</div>
<div class="notes">
<ul>
</ul>
</div>
</div>
- <div id="slide-39">
+ <div id="slide-48">
<div class="slide-title">=<< Composition >>=</div>
<div class="slide flexotron">
- <h1>Composition</h1>
+ <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Composition</div>
</div>
<div class="notes">
<ul>
<li>Let's think about composition...</li>
- <li>I touched on it before, but it's so important that I think it deserves its own little bit</li>
- <li>I don't really have that many slides for this bit because composition is not really something you can make drawings of easily</li>
- <li>I do have a few illustrations though</li>
+ <li>Mat touched on function composition briefly in his talk</li>
+ <li>I wantto talk about it in a more abstract sence. I think the idea of composition is so important that it deserves its own little bit</li>
</ul>
</div>
</div>
- <div id="slide-40">
+ <div id="slide-49">
<div class="slide-title">=<< Composition >>=</div>
<div class="slide flexotron">
<img src="img/composition0.png" style="height: 700px;" />
</div>
</div>
- <div id="slide-41">
+ <div id="slide-50">
<div class="slide-title">=<< Composition >>=</div>
<div class="slide flexotron">
<div style="position: relative;">
</div>
</div>
</div>
- <div id="slide-42">
+ <div id="slide-51">
<div class="slide-title">=<< Composition >>=</div>
<div class="slide flexotron">
<div style="position: relative;">
</div>
</div>
</div>
- <div id="slide-43">
+ <div id="slide-52">
<div class="slide-title">=<< Composition >>=</div>
<div class="slide flexotron">
<div style="position: relative;">
<img src="img/composition3.png" style="height: 700px;" />
</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>RETURN LATER: Come back to this slide after looking at the next one</li>
+ <li>We want to go from A to C - but maybe that's really hard</li>
+ <li>Perhaps someone worked out how to go from A to B, and someone else worked out how to go from B to C</li>
+ <li>Well, if we're in a system where composition is possible, then we just solved the problem!</li>
+ <li>This is the natural way people solve problems</li>
+ <li>RETURN EVEN LATER: After returning from the end slide: explain how side effects break composition</li>
+ <ul>
+ <li>Maybe A->B has a side effect, this means when we call B->C with the result from A->B, it may not be the same as calling A->C. The point of composition is that the outcome should be the same.</li>
+ <li>Don't talk about it unless needed: Referential transparency. f(a, b) => return print(a + b) + print(a + b); is not the same program as f(a,b) => c = print(a + b); return c + c;</li>
+ </ul>
+ <li>Procedures in imperative languages are a short sighted attempt at composition</li>
+ <li>In the functional paradigm, composition is gauranteed because functions cannot have side effects</li>
+ </ul>
+ </div>
</div>
- <div id="slide-44">
+ <div id="slide-53">
<div class="slide-title">=<< Composition >>=</div>
<div class="slide">
<h1>OK great but who cares?</h1>
</div>
+ <div class="notes">
+ <ul>
+ <li>Go back to the full composition diagram</li>
+ </ul>
+ </div>
</div>
- <div id="slide-45">
+ <div id="slide-54">
<div class="slide-title">=<< Composition >>=</div>
<div class="slide">
<h1>OK great but who cares?</h1>
<div class="textbox" style="width: 60%; margin: auto;">Big problems can often be chopped up in to smaller, easier to solve problems. If we can be clever about how we chop them up, such that the solutions to the individual problems can <span class="highlight">compose</span> together to form a full solution, then we can infinitely speed up the process by adding more workers!</div>
</div>
</div>
- <div id="slide-46">
+ <div id="slide-55">
<div class="slide-title">=<< Composition >>=</div>
<div class="slide">
<h1>Examples</h1>
</ul>
</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>The pyramids were build by having loads of peope work in parallel</li>
+ <li>Same with the LHC. I don't believe there is a single person in the world who fully understands it</li>
+ <li>Instead of having one chef "make a burger" - staff make individual parts of the burger and compose it together - I think McDonald's was the first place to do this</li>
+ <li>And Moodle does it too! Let's think about how we tackle projects...</li>
+ </ul>
+ </div>
</div>
- <div id="slide-46">
+ <div id="slide-56">
<div class="slide-title">=<< Composition >>=</div>
<div class="slide"></div>
<div class="notes">
<ul>
- <li>Think about how we do dev at moodle</li>
+ <li>So... do we get one mega awesome dev to bash out features?</li>
</ul>
</div>
</div>
- <div id="slide-47">
+ <div id="slide-57">
<div class="slide-title">=<< Composition >>=</div>
- <div class="slide">
- <div class="textbox" style="margin-bottom: 20px; width: 60% margin: auto;"><h2>Do you get one "leet" dev to solve the whole thing?</h2></div>
- <img src="img/10xdev.png" class="textbox" style="margin-bottom: 20px; height: 60%; display: block; margin: auto; padding-bottom: 0px;" />
- <div class="textbox" style="margin-top: 20px !important; width: 60%; margin: auto">With these biceps I can solve <span class="highlight shake shake-constant">ANYTHING</span></div>
+ <div class="slide flexotron">
+ <div style="height:80%;" >
+ <img src="img/10xdev.png" class="textbox" style="margin-bottom: 20px; 40px; height: 60%; display: block; margin: auto; padding-bottom: 0px;" />
+ <div class="textbox" style="margin-top: 20px !important; width: 50%; margin: auto; font-style: italic;">"With these biceps I can solve <span class="highlight shake shake-constant" style="display: inline-block">ANYTHING</span>"</div>
+ </div>
+ </div>
+ <div class="notes">
+ <ul>
+ <li>idk about you, but I wouldn't be keen to work with this person</li>
+ <li>There's a thing in dev called the 10x developer, and it is something that simply does not exist</li>
+ <li>The correct way to work on software is of course...</li>
+ </ul>
</div>
</div>
- <div id="slide-48">
+ <div id="slide-58">
<div class="slide-title">=<< Composition >>=</div>
<div class="slide flexotron">
<div class="textbox"><h1>No, you get friends to take a piece and help!</h1></div>
</div>
<div class="notes">
<ul>
+ <li>As a team!</li>
<li>This is why it's worth spending the time to plan things and figure out how to "chop up" the work</li>
+ <li>We need to make sure we are chopping the problem up in to pieces that can be composed together later</li>
</ul>
</div>
</div>
- <div id="slide-49">
+ <div id="slide-59">
<div class="slide-title">=<< Composition >>=</div>
<div class="slide flexotron">
<div class="textbox" style="text-align:center; font-size:40px; text-shadow: 4px 4px #000; padding:20px;" >Composition is nature's greatest hack</div>
<div class="notes">
<ul>
<li>My goal here was to try and convince you that composition really is important and is fundamental to the way we think</li>
+ <li>Humans are amazing for our ability to break down problems in to manageable chunks and then compose them together.</li>
<li>At its core, composition is about relationships, and building complexity by combining them. Hey, wasn't the whole declaritive thing about relationships?</li>
<li>And that brings me to my final point</li>
</ul>
</div>
</div>
- <div id="slide-50">
+ <div id="slide-60">
<div class="slide-title">=<< Composition >>=</div>
<div class="slide">
<h1>What's this got to do with FP?</h1>
<div class="textbox" style="width: 60%; margin: auto;">When writing programs (as an individual in this case, not as a group) we naturally want to break the solution up in to "building blocks" that we put together to solve the problem (it's composition again).</div>
- <div class="textbox" style="width: 60%; margin: auto; margin-top: 20px;">The building blocks you use matter. Some compose better than otheres. Because of all the restrictions the functional paradigm places on the programmer (lack of mutation, lack of control flow), functions in a pure language are naturally well-suited to composition.</div>
+ <div class="textbox" style="width: 60%; margin: auto; margin-top: 20px;">The building blocks you use matter. Some compose better than others. Because of all the restrictions the functional paradigm places on the programmer (lack of mutation, lack of control flow), functions in a pure language are naturally well-suited to composition.</div>
<div class="textbox" style="width: 60%; margin: auto; margin-top: 20px;">This is becoming more relevant than ever in the age of parallel computing</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>Go back to the composition slide and explain that in FP the composition is gauranteed to exist, while in other paradigms it is not</li>
+ </ul>
+ </div>
</div>
- <div id="slide-51">
- <div class="slide-title">=<< Composition >>=</div>
+ <div id="slide-61">
+ <div class="slide-title">=<< Closing Notes >>=</div>
+ <div class="slide"></div>
+ <div class="notes">
+ <ul>
+ <li>I'd like to finish this talk with some food for thought...</li>
+ </ul>
+ </div>
+ </div>
+ <div id="slide-62">
+ <div class="slide-title">=<< Closing Notes >>=</div>
<div class="slide">
- <h1>What's this got to do with FP?</h1>
- <div class="textbox" style="width: 60%; margin: auto;">When writing programs (as an individual in this case, not as a group) we naturally want to break the solution up in to "building blocks" that we put together to solve the problem (it's composition again).</div>
- <div class="textbox" style="width: 60%; margin: auto; margin-top: 20px;">The building blocks you use matter. Some compose better than otheres. Because of all the restrictions the functional paradigm places on the programmer (lack of mutation, lack of control flow), functions in a pure language are naturally well-suited to composition.</div>
- <div class="textbox" style="width: 60%; margin: auto; margin-top: 20px;">This is becoming more relevant than ever in the age of parallel computing</div>
+ <h1>Applications to life:</h1>
+ <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
+ <ul>
+ <li>We work across multiple timezones, so being able to solve problems in a time-independant way seems appealing, doesn't it?</li>
+ <li>Moore's law is coming to an end, now the focus is shifting to parallel computing</li>
+ <ul>
+ <li>Imperative paradigms will not be the right tool for this</li>
+ <li>Either we'll see a shift to declaritive style programming</li>
+ <li>Or we'll make life hard for ourselves real fast</li>
+ </ul>
+ <li>Maybe quantum mechanics is so damn confusing because at a certain point we can't decompose things anymore?</li>
+ <ul><li>After all... why should the universe conform to the way our brains want it to be...</li></ul>
+ </ul>
+ </div>
+ </div>
+ <div class="notes">
+ <ul>
+ <li>In regards to Moore's law, I personally hope we start seeing a paradigm shift soon. Because that's the definition of madness really. Doing the same thing over and over but expecting different results.</li>
+ <li>Other analogies like the frog in slowly boiling water come to mind</li>
+ <li>And that's about it really!</li>
+ </ul>
</div>
</div>
- <div id="slide-52">
+ <div id="slide-63">
<div id="cloudguy2">
<div style="height: 20%; text-align: center;">
<img style="height: 100%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src="img/cloudguy.gif" />
- <div style="width: 80%; margin: auto;">Thanks for listening!!</div>
+ <div style="width: 80%; margin: auto;">Thanks for participating!!</div>
</div>
</div>
</div>
document.getElementById('slide-' + currentSlide).style.display = 'block';
document.onkeydown = checkKey;
+ notes = document.querySelectorAll('#slide-' + currentSlide + ' .notes');
+ if(!!notes[0]) {
+ bc.postMessage(notes[0].innerHTML);
+ }
+
function checkKey(e) {
e = e || window.event;
notes = document.querySelectorAll('#slide-' + currentSlide + ' .notes');
if(!!notes[0]) {
bc.postMessage(notes[0].innerHTML);
+ } else {
+ bc.postMessage("");
}
}
else if (e.keyCode == '39') {
notes = document.querySelectorAll('#slide-' + currentSlide + ' .notes');
if(!!notes[0]) {
bc.postMessage(notes[0].innerHTML);
+ } else {
+ bc.postMessage("");
}
}
"All of Back to the Future happened in the past.",
"Everything is in the future.",
"We owe functional and procedural programming to the pre-Socratics, Heraclitus and Anaximander respectively.",
- "Preservative has a very different meaning in many European languages"
+ "Preservative has a very different meaning in many European languages",
+ "There are more stars in our galaxy than there are atoms in The Universe"
];
cgq = document.getElementById("cgquotes");
projects / fp-lecture.git / commitdiff
