about summary refs log tree commit diff stats
path: root/static/talks/fp-js/slides.html
diff options
context:
space:
mode:
authorAlan Pearce2017-10-24 12:07:07 +0200
committerAlan Pearce2017-10-24 12:07:07 +0200
commit6348ee214c3ce6f6b17b801c950407ed63bf6cfe (patch)
tree967299f954c90bc73d385a7a3d90305f51076db2 /static/talks/fp-js/slides.html
parente5cb8f1ef60c36d29d66bf8dbb25365423b9b3c8 (diff)
downloadwebsite-6348ee214c3ce6f6b17b801c950407ed63bf6cfe.tar.lz
website-6348ee214c3ce6f6b17b801c950407ed63bf6cfe.tar.zst
website-6348ee214c3ce6f6b17b801c950407ed63bf6cfe.zip
Rename talk files
Diffstat (limited to 'static/talks/fp-js/slides.html')
-rw-r--r--static/talks/fp-js/slides.html431


1 files changed, 0 insertions, 431 deletions
diff --git a/static/talks/fp-js/slides.html b/static/talks/fp-js/slides.html
deleted file mode 100644
index e90650c..0000000
--- a/static/talks/fp-js/slides.html
+++ /dev/null
@@ -1,431 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-<head>
-<!-- 2017-10-16 Mon 10:10 -->
-<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>Functional Programming in JavaScript</title>
-<meta name="generator" content="Org mode" />
-<meta name="author" content="Alan Pearce" />
-<meta name="version" content="S5 1.2a2" />
-<meta name='defaultView' content='slideshow' />
-<meta name='controlVis' content='hidden' />
-<!-- style sheet links -->
-<link rel='stylesheet' href='ui/default/outline.css' type='text/css' media='screen' id='outlineStyle' />
-<link rel='stylesheet' href='ui/default/print.css' type='text/css' media='print' id='slidePrint' />
-<link rel='stylesheet' href='ui/default/opera.css' type='text/css' media='projection' id='operaFix' />
-<link rel='stylesheet' href='ui/default/slides.css' type='text/css' media='screen' id='slideProj' />
-<!-- S5 JS -->
-<script src='ui/default/slides.js' type='text/javascript'></script>
-
-
-</head>
-<body>
-<div class="layout">
-<div id="controls"><!-- no edit --></div>
-<div id="currentSlide"><!-- no edit --></div>
-<div id="header" class="status">
-&#x20;
-</div>
-
-<div id="footer" class="status">
-<h1>Alan Pearce - Functional Programming in JavaScript</h1>
-</div>
-
-</div>
-<div id="content" class="presentation">
-<div id='title-slide' class='slide'>
-<h1>Functional Programming in JavaScript</h1>
-<h2></h2>
-<h2>Alan Pearce</h2>
-<h3><a href="mailto:alan@alanpearce.eu">alan@alanpearce.eu</a></h3>
-<h4></h4>
-</div>
-<div id='table-of-contents' class='slide'>
-<h1>Table of Contents</h1>
-<div id="text-table-of-contents">
-<ul>
-<li>1. Why?</li>
-<li>2. Concepts</li>
-<li>3. Further concepts</li>
-<li>4. First-class functions</li>
-<li>5. Higher-order functions</li>
-<li>6. Higher-order functions (cont.)</li>
-<li>7. Pure functions</li>
-<li>8. Recursion</li>
-<li>9. Partial application</li>
-<li>10. Partial application (cont.)</li>
-<li>11. Currying</li>
-<li>12. Easy Currying</li>
-<li>13. Practical Currying</li>
-<li>14. Functional composition</li>
-<li>15. Functional composition (cont.)</li>
-<li>16. pipe</li>
-<li>17. Point-free programming</li>
-<li>18. Further Resources</li>
-</ul>
-</div>
-</div>
-
-<div id="outline-container-org05e10f9" class="outline-1  slide">
-<h1 id="org05e10f9"><span class="section-number-1">1</span> Why?</h1>
-<div class="outline-text-1" id="text-1">
-<p>
-Imperative programming is concerned with <b>how</b>
-</p>
-
-<p>
-Functional programming is concerned with <b>what</b>
-</p>
-</div>
-</div>
-
-<div id="outline-container-org14fa5d9" class="outline-1  slide">
-<h1 id="org14fa5d9"><span class="section-number-1">2</span> Concepts</h1>
-<div class="outline-text-1" id="text-2">
-<ul class="org-ul">
-<li>First-class Functions</li>
-<li>Higher-order Functions</li>
-<li>Recursion</li>
-<li>Pure functions</li>
-<li>Currying &amp; Partial Application</li>
-</ul>
-</div>
-</div>
-
-<div id="outline-container-orgd930436" class="outline-1  slide">
-<h1 id="orgd930436"><span class="section-number-1">3</span> Further concepts</h1>
-<div class="outline-text-1" id="text-3">
-<ul class="org-ul">
-<li>Lazy Evaluation</li>
-<li>Types &amp; Data Structures</li>
-<li>Category Theory</li>
-</ul>
-</div>
-</div>
-
-<div id="outline-container-orgbd39891" class="outline-1  slide">
-<h1 id="orgbd39891"><span class="section-number-1">4</span> First-class functions</h1>
-<div class="outline-text-1" id="text-4">
-<ul class="org-ul">
-<li>Are values</li>
-<li>Have no restriction on their use</li>
-<li>Enable the use of callback functions in JavaScript</li>
-</ul>
-
-<p>
-
-</p>
-
-<div class="org-src-container">
-<pre><code class="src src-js">var fn = function () {
-  return 2
-}
-</code></pre>
-</div>
-</div>
-</div>
-
-
-<div id="outline-container-org8d1ee8a" class="outline-1  slide">
-<h1 id="org8d1ee8a"><span class="section-number-1">5</span> Higher-order functions</h1>
-<div class="outline-text-1" id="text-5">
-<p>
-Functions that operate on other functions are higher-order functions
-</p>
-
-<p>
-
-</p>
-
-<div class="org-src-container">
-<pre><code class="src src-js">var succ = function (x) {
-  return x + 1
-}
-
-var arr = [1, 2, 3, 4]
-
-arr.map(succ)
-</code></pre>
-</div>
-
-<p>
-Here, <code>Array.prototype.map</code> is the higher-order function
-</p>
-</div>
-</div>
-
-<div id="outline-container-org3bbf4ac" class="outline-1  slide">
-<h1 id="org3bbf4ac"><span class="section-number-1">6</span> Higher-order functions (cont.)</h1>
-<div class="outline-text-1" id="text-6">
-<p>
-Functions that return functions are also higher-order functions
-</p>
-
-<p>
-
-</p>
-
-<div class="org-src-container">
-<pre><code class="src src-js">function <span style="font-weight: bold;">adder</span> (n) {
-  return function (x) {
-    return n + x
-  }
-}
-
-var add1 = adder(1)
-</code></pre>
-</div>
-
-<p>
-<code>adder</code> is a higher-order function
-</p>
-</div>
-</div>
-
-<div id="outline-container-orgfb6eee2" class="outline-1  slide">
-<h1 id="orgfb6eee2"><span class="section-number-1">7</span> Pure functions</h1>
-<div class="outline-text-1" id="text-7">
-<p>
-Functions without side-effects
-</p>
-
-<div class="org-src-container">
-<pre><code class="src src-js">var succ = (x) =&gt; x + 1
-
-console.log(succ(succ(1)))
-
-<span style="color: #b8b8b8; background-color: #f8f8f8; font-style: italic;">// </span><span style="color: #b8b8b8; background-color: #f8f8f8; font-style: italic;">could be optimised away by a compiler, e.g.:</span>
-
-console.log(3)
-</code></pre>
-</div>
-</div>
-</div>
-
-<div id="outline-container-org16e9966" class="outline-1  slide">
-<h1 id="org16e9966"><span class="section-number-1">8</span> Recursion</h1>
-<div class="outline-text-1" id="text-8">
-<p>
-Functions that call themselves
-</p>
-
-<div class="org-src-container">
-<pre><code class="src src-js">function <span style="font-weight: bold;">fibonacci</span> (n) {
-  switch (n) {
-    case 0:
-    case 1:
-      return 1
-    default: 
-      return fibonacci(n - 1) + fibonacci(n - 2)
-  }
-}
-</code></pre>
-</div>
-</div>
-</div>
-
-<div id="outline-container-org1b7b0af" class="outline-1  slide">
-<h1 id="org1b7b0af"><span class="section-number-1">9</span> Partial application</h1>
-<div class="outline-text-1" id="text-9">
-<p>
-The infamous <code>Function.prototype.bind</code> in JavaScript
-</p>
-
-<div class="org-src-container">
-<pre><code class="src src-js">function <span style="font-weight: bold;">add</span> (x, y) {
-  return x + y
-}
-
-var add1 = add.bind(add, 1)
-
-add1(3) <span style="color: #b8b8b8; background-color: #f8f8f8; font-style: italic;">// </span><span style="color: #b8b8b8; background-color: #f8f8f8; font-style: italic;">= 4</span>
-</code></pre>
-</div>
-</div>
-</div>
-
-<div id="outline-container-org796e6d3" class="outline-1  slide">
-<h1 id="org796e6d3"><span class="section-number-1">10</span> Partial application (cont.)</h1>
-<div class="outline-text-1" id="text-10">
-<p>
-After ES6 introduced arrow functions, partial application has become
-more popular
-</p>
-
-<div class="org-src-container">
-<pre><code class="src src-js">var add = x =&gt; y =&gt; x + y
-</code></pre>
-</div>
-</div>
-</div>
-
-<div id="outline-container-orgeb4d67b" class="outline-1  slide">
-<h1 id="orgeb4d67b"><span class="section-number-1">11</span> Currying</h1>
-<div class="outline-text-1" id="text-11">
-<p>
-Related to partial application, but more implicit and general
-</p>
-
-<p>
-Translates <b><i>1</i> function of arity <i>n</i></b> to <b><i>n</i> functions of arity <i>1</i></b>
-</p>
-
-<div class="org-src-container">
-<pre><code class="src src-js">function <span style="font-weight: bold;">volume</span> (w, d, h) {
-  return w * d * h
-}
-
-var vol = curry(volume)
-vol(10)(20)(30)
-<span style="color: #b8b8b8; background-color: #f8f8f8; font-style: italic;">// </span><span style="color: #b8b8b8; background-color: #f8f8f8; font-style: italic;">is strictly equivalent to</span>
-volume(10, 20, 30)
-</code></pre>
-</div>
-</div>
-</div>
-
-<div id="outline-container-orgdfd8353" class="outline-1  slide">
-<h1 id="orgdfd8353"><span class="section-number-1">12</span> Easy Currying</h1>
-<div class="outline-text-1" id="text-12">
-<p>
-In order to make currying (and partial application) easier to use,
-move the <b>most important</b> argument to a function to the end:
-</p>
-
-<div class="org-src-container">
-<pre><code class="src src-js">var badMap = (arr, fn) =&gt; arr.map(fn)
-var goodMap = (fn, arr) =&gt; arr.map(fn)
-var curriedBadMap = curry(badmap)
-var curriedGoodMap = curry(goodMap)
-
-var goodDoubleArray = goodMap(x =&gt; x * 2)
-var badDoubleArray = badMap(_, x =&gt; x * 2)
-</code></pre>
-</div>
-
-<p>
-The bad version requires the curry function to support a magic
-placeholder argument and doesn't look as clean.
-</p>
-</div>
-</div>
-
-<div id="outline-container-org30accd5" class="outline-1  slide">
-<h1 id="org30accd5"><span class="section-number-1">13</span> Practical Currying</h1>
-<div class="outline-text-1" id="text-13">
-<p>
-Currying is not automatic in JavaScript, as in other languages
-</p>
-
-<p>
-External tools aren't (so far) able to statically analyse curried
-functions
-</p>
-
-<p>
-Solution: Don't expose curried functions
-Instead, write functions as if currying were automatic
-</p>
-
-<p>
-If consumers want to curry, they can.  If they don't, their editor or
-language server will show them the arguments
-</p>
-</div>
-</div>
-
-<div id="outline-container-org5f352dc" class="outline-1  slide">
-<h1 id="org5f352dc"><span class="section-number-1">14</span> Functional composition</h1>
-<div class="outline-text-1" id="text-14">
-<p>
-Creating functions from other functions
-</p>
-
-<p>
-Usually provided by <code>compose</code> (right-to-left) and <code>pipe</code> (left-to-right)
-</p>
-
-<p>
-A very simple definition of <code>compose</code> for only two functions would look like this
-</p>
-
-<div class="org-src-container">
-<pre><code class="src src-js">function <span style="font-weight: bold;">compose</span> (f, g) {
-  return function (...args) {
-    return f(g(...args))
-  }
-}
-</code></pre>
-</div>
-</div>
-</div>
-
-<div id="outline-container-org0c2c4f9" class="outline-1  slide">
-<h1 id="org0c2c4f9"><span class="section-number-1">15</span> Functional composition (cont.)</h1>
-<div class="outline-text-1" id="text-15">
-<div class="org-src-container">
-<pre><code class="src src-js">var plusOne = x =&gt; x + 1
-var timesTwo = x =&gt; x * 2
-
-var plusOneTimesTwo = compose(timesTwo, plusOne)
-var timesTwoPlusOne = compose(plusOne, timesTwo)
-
-nextDoubled(3) <span style="color: #b8b8b8; background-color: #f8f8f8; font-style: italic;">// </span><span style="color: #b8b8b8; background-color: #f8f8f8; font-style: italic;">= (3 + 1) * 2 = 8</span>
-doubledPlusOne(3) <span style="color: #b8b8b8; background-color: #f8f8f8; font-style: italic;">// </span><span style="color: #b8b8b8; background-color: #f8f8f8; font-style: italic;">= (3 * 2) + 1 = 7</span>
-</code></pre>
-</div>
-</div>
-</div>
-
-<div id="outline-container-orgddc61f6" class="outline-1  slide">
-<h1 id="orgddc61f6"><span class="section-number-1">16</span> pipe</h1>
-<div class="outline-text-1" id="text-16">
-<p>
-What about <code>pipe</code>?
-</p>
-
-<p>
-<code>pipe</code> does the same thing, but runs the functions the other way around
-</p>
-
-<p>
-<code>pipe(f, g)</code> is the same as <code>compose(g, f)</code>
-</p>
-</div>
-</div>
-
-<div id="outline-container-org7426c58" class="outline-1  slide">
-<h1 id="org7426c58"><span class="section-number-1">17</span> Point-free programming</h1>
-<div class="outline-text-1" id="text-17">
-<p>
-With currying and higher-order functions, we (often) don't need to declare function arguments
-</p>
-
-<div class="org-src-container">
-<pre><code class="src src-js">var modulo = a =&gt; b =&gt; b % a
-var eq = a =&gt; b =&gt; a === b
-
-var isEven = x =&gt; eq(0)(modulo(2)(x))
-var isEvenPointFree = compose(eq(0), modulo(2))
-</code></pre>
-</div>
-</div>
-</div>
-
-<div id="outline-container-org8868cfb" class="outline-1  slide">
-<h1 id="org8868cfb"><span class="section-number-1">18</span> Further Resources</h1>
-<div class="outline-text-1" id="text-18">
-<ul class="org-ul">
-<li><a href="https://drboolean.gitbooks.io/mostly-adequate-guide/content/">Mostly adequate guide to FP (in javascript)</a></li>
-<li><a href="http://ramdajs.com/">Ramda</a>, a general-purpose FP library</li>
-<li><a href="https://sanctuary.js.org/">Sanctuary</a>, a JavaScript library for Haskellers</li>
-</ul>
-</div>
-</div>
-
-
-</div>
-</body>
-</html>

 

generated by cgit-pink 1.4.1 (git 2.36.1) at 2024-11-03 16:44:19 +0000