CodeMash: Functional Programming Basics in ES6

CodeMash: Functional Programming Basics in ES6

94bd558238b69c45d3d3e15797ae94f7?s=128

Jeremy Fairbank

January 07, 2016
Tweet

Transcript

  1. FUNCTIONAL PROGRAMMING Jeremy Fairbank blog.jeremyfairbank.com @elpapapollo / jfairbank BASICS IN

    ES6
  2. We help brands excel. pushagency.io Your website, SimplyBuilt. simplybuilt.com

  3. Redux

  4. ¯\_(ϑ)_/¯ WHAT IS FUNCTIONAL PROGRAMMING?

  5. ¯\_(ϑ)_/¯ WHY FUNCTIONAL PROGRAMMING?

  6. None
  7. Domain to Range

  8. None
  9. None
  10. Domain Range

  11. CALCULUS

  12. PRINCIPLES

  13. PURE & DECLARATIVE PREDICTABLE

  14. IMMUTABLE STATE SAFE

  15. FIRST CLASS STATE TRANSPARENT

  16. COMPOSABLE FIRST CLASS CLOSURES MODULAR

  17. ES2015 (ES6)

  18. All good let age = 28; age = 29; const

    name = 'Jeremy'; name = 'Jet'; Syntax error
  19. const add = (x, y) => { return x +

    y; }; const identity = x => x;
  20. const add = (x, y) => { return x +

    y; }; const identity = x => x;
  21. const array = (...elements) => { return elements; }; array(1,

    2, 3); // [1, 2, 3] const log = (...args) => { console.log(...args); }; log('hello', 'codemash'); // hello codemash
  22. const array = (...elements) => { return elements; }; array(1,

    2, 3); // [1, 2, 3] const log = (...args) => { console.log(...args); }; log('hello', 'codemash'); // hello codemash
  23. const langs = ['JavaScript', 'Ruby', 'Haskell']; const [js, ...rest] =

    langs; js === 'JavaScript'; rest[0] === 'Ruby'; rest[1] === 'Haskell'; const head = ([x]) => x; head([1, 2, 3]) === 1;
  24. const langs = ['JavaScript', 'Ruby', 'Haskell']; const [js, ...rest] =

    langs; js === 'JavaScript'; rest[0] === 'Ruby'; rest[1] === 'Haskell'; const head = ([x]) => x; head([1, 2, 3]) === 1;
  25. const greet = (name, greeting = 'Hi') => { console.log(greeting,

    name); }; greet('Codemash', 'Hello'); // Hello Codemash greet('Sandusky'); // Hi Sandusky
  26. class Point { constructor(x, y) { this.x = x; this.y

    = y; } moveBy(dx, dy) { this.x += dx; this.y += dy; } } function Point(x, y) { this.x = x; this.y = y; } Point.prototype.moveBy = function(dx, dy) { this.x += dx; this.y += dy; };
  27. PURE

  28. const add = (x, y) => x + y; add(2,

    3) === 5; add(2, 3) === 5; add(2, 3) === 5;
  29. const add = (x, y) => x + y; add(2,

    3) === 5; add(2, 3) === 5; add(2, 3) === 5; Referentially transparent
  30. × let name = 'Jeremy'; const getName = () =>

    name; const setName = (newName) => { name = newName; }; const printUpperName = () => { console.log(name.toUpperCase()); };
  31. describe('api', () => { beforeEach(() => mockConsoleLog()); afterEach(() => restoreConsoleLog());

    it('sets and prints the name', () => { printUpperName(); expect(console.log).calledWith('JEREMY'); n.setName('Jet'); printUpperName(); expect(console.log).calledWith('JET'); }); }); ×
  32. HIDDEN STATE IS UNCERTAIN STATE

  33. const upperName = (name) => name.toUpperCase(); describe('api', () => {

    it('returns an uppercase name', () => { expect(upperName('Jeremy')).to.equal('JEREMY'); expect(upperName('Jet')).to.equal('JET'); }); }); ✓
  34. HOW TO ACHIEVE THE RESULT IMPERATIVE

  35. function doubleNumbers(numbers) { const doubled = []; const l =

    numbers.length; for (let i = 0; i < l; i++) { doubled.push(numbers[i] * 2); } return doubled; } doubleNumbers([1, 2, 3]); // [2, 4, 6]
  36. DECLARE WHAT THE DESIRED RESULT IS DECLARATIVE

  37. function doubleNumbers(numbers) { return numbers.map(n => n * 2); }

    doubleNumbers([1, 2, 3]); // [2, 4, 6]
  38. 1 2 3 numbers.map(n => n * 2) 2 4

    6 Domain Range
  39. CREATE STATE, DON’T MUTATE IT IMMUTABLE

  40. const hobbies = [ 'programming', 'reading', 'music' ]; const firstTwo

    = hobbies.splice(0, 2); console.log(firstTwo); // ['programming', 'reading'] console.log(hobbies); // ['music']
  41. const hobbies = [ 'programming', 'reading', 'music' ]; const firstTwo

    = hobbies.splice(0, 2); console.log(firstTwo); // ['programming', 'reading'] console.log(hobbies); // ['music'] Slight typo + mutability
  42. Object.freeze Immutable.js

  43. const hobbies = Object.freeze([ 'programming', 'reading', 'music' ]); const firstTwo

    = hobbies.splice(0, 2); // TypeError
  44. FREE YOUR STATE

  45. class Point { constructor(x, y) { this.x = x; this.y

    = y; } moveBy(dx, dy) { this.x += dx; this.y += dy; } } const point = new Point(0, 0); point.moveBy(5, 5); point.moveBy(-2, 2); console.log([point.x, point.y]); // [3, 7] ×
  46. const createPoint = (x, y) => Object.freeze([x, y]); const movePointBy

    = ([x, y], dx, dy) => { return Object.freeze([x + dx, y + dy]); }; let point = createPoint(0, 0); point = movePointBy(point, 5, 5); point = movePointBy(point, -2, 2); console.log(point); // [3, 7] ✓ (*or object-oriented without mutation)
  47. PROS SAFETY FREE UNDO/REDO LOGS — REDUX EXPLICIT FLOW OF

    DATA LESS MEMORY USAGE* CONCURRENCY SAFETY* *In certain cases
  48. CONS VERBOSE MORE OBJECT CREATION* MORE GARBAGE COLLECTION* MORE MEMORY

    USAGE* *Alleviated with libs like Immutable.js
  49. FIRST CLASS FUNCTIONS

  50. const multiply = (x, y) => x * y; function

    add(x, y) { return x + y; } const addAlias = add; const evens = [1, 2, 3].map(n => n * 2);
  51. const multiply = (x, y) => x * y; function

    add(x, y) { return x + y; } const addAlias = add; const evens = [1, 2, 3].map(n => n * 2);
  52. const multiply = (x, y) => x * y; function

    add(x, y) { return x + y; } const addAlias = add; const evens = [1, 2, 3].map(n => n * 2);
  53. const multiply = (x, y) => x * y; function

    add(x, y) { return x + y; } const addAlias = add; const evens = [1, 2, 3].map(n => n * 2);
  54. ENCAPSULATION CLOSURES

  55. const createAdder = (x) => { return (y) => x

    + y; }; const add3 = createAdder(3); add3(2) === 5; add3(3) === 6;
  56. const createAdder = (x) => { return (y) => x

    + y; }; const add3 = createAdder(3); add3(2) === 5; add3(3) === 6;
  57. const request = (options) => { return fetch(options.url, options) .then(resp

    => resp.json()); }; const usersPromise = request({ url: '/users', headers: { 'X-Custom': 'mykey' } }); const tasksPromise = request({ url: '/tasks', headers: { 'X-Custom': 'mykey' } });
  58. const request = (options) => { return fetch(options.url, options) .then(resp

    => resp.json()); }; const usersPromise = request({ url: '/users', headers: { 'X-Custom': 'mykey' } }); const tasksPromise = request({ url: '/tasks', headers: { 'X-Custom': 'mykey' } }); Repetitive
  59. const createRequester = (options) => { return (otherOptions) => {

    return request(Object.assign( {}, options, otherOptions )); }; }; const customRequest = createRequester({ headers: { 'X-Custom': 'mykey' } }); const usersPromise = customRequest({ url: '/users' }); const tasksPromise = customRequest({ url: '/tasks' });
  60. const createRequester = (options) => { return (otherOptions) => {

    return request(Object.assign( {}, options, otherOptions )); }; }; const customRequest = createRequester({ headers: { 'X-Custom': 'mykey' } }); const usersPromise = customRequest({ url: '/users' }); const tasksPromise = customRequest({ url: '/tasks' });
  61. FOUNDATION FOR HIGHER ORDER PATTERNS FIRST CLASS CLOSURES

  62. PARTIAL APPLICATION

  63. const createAdder = (x) => { return (y) => x

    + y; }; const createRequester = (options) => { return (otherOptions) => { return request(Object.assign( {}, options, otherOptions )); }; }; RECALL
  64. const add = (x, y) => x + y; const

    add3 = partial(add, 3); add3(2) === 5;
  65. const request = (defaults, options) => { options = Object.assign({},

    defaults, options); return fetch(options.url, options) .then(resp => resp.json()); }; const customRequest = partial(request, { headers: { 'X-Custom': 'mykey' } }); const usersPromise = customRequest({ url: '/users' }); const tasksPromise = customRequest({ url: '/tasks' });
  66. const partialFromBind = (fn, ...args) => { return fn.bind(null, ...args);

    }; const partial = (fn, ...args) => { return (...otherArgs) => { return fn(...args, ...otherArgs) }; };
  67. const partialFromBind = (fn, ...args) => { return fn.bind(null, ...args);

    }; const partial = (fn, ...args) => { return (...otherArgs) => { return fn(...args, ...otherArgs) }; };
  68. const partialFromBind = (fn, ...args) => { return fn.bind(null, ...args);

    }; const partial = (fn, ...args) => { return (...otherArgs) => { return fn(...args, ...otherArgs) }; };
  69. const partialFromBind = (fn, ...args) => { return fn.bind(null, ...args);

    }; const partial = (fn, ...args) => { return (...otherArgs) => { return fn(...args, ...otherArgs) }; };
  70. const partialFromBind = (fn, ...args) => { return fn.bind(null, ...args);

    }; const partial = (fn, ...args) => { return (...otherArgs) => { return fn(...args, ...otherArgs) }; };
  71. const partialFromBind = (fn, ...args) => { return fn.bind(null, ...args);

    }; const partial = (fn, ...args) => { return (...otherArgs) => { return fn(...args, ...otherArgs) }; };
  72. CURRYING

  73. const add3 = add(3); add3(2) === 5; const customRequest =

    request({ headers: { 'X-Custom': 'mykey' } }); const usersPromise = customRequest({ url: '/users' }); const tasksPromise = customRequest({ url: '/tasks' });
  74. const add3 = add(3); add3(2) === 5; const customRequest =

    request({ headers: { 'X-Custom': 'mykey' } }); const usersPromise = customRequest({ url: '/users' }); const tasksPromise = customRequest({ url: '/tasks' });
  75. const add = x => y => x + y;

    function add(x) { return function(y) { return x + y; }; }
  76. const add = x => y => x + y;

    function add(x) { return function(y) { return x + y; }; }
  77. const add = x => y => x + y;

    function add(x) { return function(y) { return x + y; }; }
  78. const request = defaults => options => { return request(Object.assign(

    {}, defaults, options )); };
  79. const request = defaults => options => { return request(Object.assign(

    {}, defaults, options )); };
  80. PIECING IT TOGETHER

  81. const map = fn => array => array.map(fn); const multiply

    = x => y => x * y; const pluck = key => object => object[key]; const discount = multiply(0.98); const tax = multiply(1.0925); const customRequest = request({ headers: { 'X-Custom': 'mykey' } }); customRequest({ url: '/cart/items' }) .then(map(pluck('price'))) .then(map(discount)) .then(map(tax));
  82. const map = fn => array => array.map(fn); const multiply

    = x => y => x * y; const pluck = key => object => object[key]; const discount = multiply(0.98); const tax = multiply(1.0925); const customRequest = request({ headers: { 'X-Custom': 'mykey' } }); customRequest({ url: '/cart/items' }) .then(map(pluck('price'))) .then(map(discount)) .then(map(tax));
  83. const map = fn => array => array.map(fn); const multiply

    = x => y => x * y; const pluck = key => object => object[key]; const discount = multiply(0.98); const tax = multiply(1.0925); const customRequest = request({ headers: { 'X-Custom': 'mykey' } }); customRequest({ url: '/cart/items' }) .then(map(pluck('price'))) .then(map(discount)) .then(map(tax));
  84. const map = fn => array => array.map(fn); const multiply

    = x => y => x * y; const pluck = key => object => object[key]; const discount = multiply(0.98); const tax = multiply(1.0925); const customRequest = request({ headers: { 'X-Custom': 'mykey' } }); customRequest({ url: '/cart/items' }) .then(map(pluck('price'))) .then(map(discount)) .then(map(tax));
  85. const map = fn => array => array.map(fn); const multiply

    = x => y => x * y; const pluck = key => object => object[key]; const discount = multiply(0.98); const tax = multiply(1.0925); const customRequest = request({ headers: { 'X-Custom': 'mykey' } }); customRequest({ url: '/cart/items' }) .then(map(pluck('price'))) .then(map(discount)) .then(map(tax));
  86. const map = fn => array => array.map(fn); const multiply

    = x => y => x * y; const pluck = key => object => object[key]; const discount = multiply(0.98); const tax = multiply(1.0925); const customRequest = request({ headers: { 'X-Custom': 'mykey' } }); customRequest({ url: '/cart/items' }) .then(map(pluck('price'))) .then(map(discount)) .then(map(tax));
  87. const map = fn => array => array.map(fn); const multiply

    = x => y => x * y; const pluck = key => object => object[key]; const discount = multiply(0.98); const tax = multiply(1.0925); const customRequest = request({ headers: { 'X-Custom': 'mykey' } }); customRequest({ url: '/cart/items' }) .then(map(pluck('price'))) .then(map(discount)) .then(map(tax));
  88. customRequest({ url: '/cart/items' }) .then(map(pluck('price'))) .then(map(discount)) .then(map(tax)); [ { price:

    5 }, { price: 10 }, { price: 3 } ]
  89. [ { price: 5 }, { price: 10 }, {

    price: 3 } ] map(pluck('price')) [ 5, 10, 3 ] item.price
  90. [ 5, 10, 3 ] map(discount) [ 4.9, 9.8, 2.94

    ] price * 0.98
  91. [ 5.35, 10.71, 3.21 ] map(tax) [ 4.9, 9.8, 2.94

    ] price * 1.0925
  92. COMPOSING CLOSURES

  93. None
  94. const processWord = compose(hyphenate, reverse, toUpperCase); const words = [

    'hello', 'functional', 'programming' ]; const newWords = words.map(processWord); console.log(newWords); // ['OL-LEH, 'LANOI-TCNUF', 'GNIMM-ARGORP']
  95. const processWord = compose(hyphenate, reverse, toUpperCase); const words = [

    'hello', 'functional', 'programming' ]; const newWords = words.map(processWord); console.log(newWords); // ['OL-LEH, 'LANOI-TCNUF', 'GNIMM-ARGORP']
  96. const processWord = compose(hyphenate, reverse, toUpperCase); const processWordExplicit = (word)

    => { return hyphenate(reverse(toUpperCase(word))); };
  97. customRequest({ url: '/cart/items' }) .then(map(pluck('price'))) .then(map(discount)) .then(map(tax)); RETURNING TO PRICES

    EXAMPLE
  98. customRequest({ url: '/cart/items' }) .then(map(pluck('price'))) .then(map(discount)) .then(map(tax)); Triple iteration RETURNING

    TO PRICES EXAMPLE
  99. customRequest({ url: '/cart/items' }) .then(map( compose( tax, discount, pluck('price') )

    )); Single iteration
  100. const compose = (...fns) => (...args) => { if (fns.length

    === 0) { return args[0]; } const last = fns[fns.length - 1]; const rest = fns.slice(0, -1); return rest.reduceRight((memo, fn) => { return fn(memo); }, last(...args)); };
  101. const compose = (...fns) => (...args) => { if (fns.length

    === 0) { return args[0]; } const last = fns[fns.length - 1]; const rest = fns.slice(0, -1); return rest.reduceRight((memo, fn) => { return fn(memo); }, last(...args)); };
  102. const compose = (...fns) => (...args) => { if (fns.length

    === 0) { return args[0]; } const last = fns[fns.length - 1]; const rest = fns.slice(0, -1); return rest.reduceRight((memo, fn) => { return fn(memo); }, last(...args)); };
  103. const compose = (...fns) => (...args) => { if (fns.length

    === 0) { return args[0]; } const last = fns[fns.length - 1]; const rest = fns.slice(0, -1); return rest.reduceRight((memo, fn) => { return fn(memo); }, last(...args)); };
  104. RECURSION SOLVE A PROBLEM IN TERMS OF ITSELF

  105. FACTORIAL

  106. const factorial = (n) => { let result = 1;

    while (n > 1) { result *= n; n--; } return result; };
  107. const factorial = (n) => { if (n < 2)

    { return 1; } return n * factorial(n - 1); };
  108. const factorial = (n) => { if (n < 2)

    { return 1; } return n * factorial(n - 1); }; Recursive call
  109. const factorial = (n) => { if (n < 2)

    { return 1; } return n * factorial(n - 1); }; Base case
  110. factorial(4);

  111. factorial(4); 4 * factorial(3);

  112. factorial(4); 4 * factorial(3); 4 * 3 * factorial(2);

  113. factorial(4); 4 * factorial(3); 4 * 3 * factorial(2); 4

    * 3 * 2 * factorial(1);
  114. factorial(4); 4 * factorial(3); 4 * 3 * factorial(2); 4

    * 3 * 2 * factorial(1); 4 * 3 * 2 * 1;
  115. factorial(4); 4 * factorial(3); 4 * 3 * factorial(2); 4

    * 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2;
  116. factorial(4); 4 * factorial(3); 4 * 3 * factorial(2); 4

    * 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6;
  117. factorial(4); 4 * factorial(3); 4 * 3 * factorial(2); 4

    * 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24;
  118. STEPS Find the recurrence
 (n × n-1 × n-2 ×

    … 1)
 Find the base case
 (n < 2)
  119. PERFORMANCE RECURSION

  120. const value = factorial(100000); console.log(value); // ??? WHAT IS THE

    RESULT?
  121. const value = factorial(100000); console.log(value); // ??? WHAT IS THE

    RESULT? RangeError: Maximum call stack size exceeded
  122. factorial(4); 4 * factorial(3); 4 * 3 * factorial(2); 4

    * 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> Call Stack
  123. factorial(4); 4 * factorial(3); 4 * 3 * factorial(2); 4

    * 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> factorial(4) Call Stack
  124. factorial(4); 4 * factorial(3); 4 * 3 * factorial(2); 4

    * 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> factorial(4) factorial(3) Call Stack
  125. factorial(4); 4 * factorial(3); 4 * 3 * factorial(2); 4

    * 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> factorial(4) factorial(3) factorial(2) Call Stack
  126. factorial(4); 4 * factorial(3); 4 * 3 * factorial(2); 4

    * 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> factorial(4) factorial(3) factorial(2) factorial(1) Call Stack
  127. factorial(4); 4 * factorial(3); 4 * 3 * factorial(2); 4

    * 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> factorial(4) factorial(3) factorial(2) Call Stack
  128. factorial(4); 4 * factorial(3); 4 * 3 * factorial(2); 4

    * 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> factorial(4) factorial(3) Call Stack
  129. factorial(4); 4 * factorial(3); 4 * 3 * factorial(2); 4

    * 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> factorial(4) Call Stack
  130. factorial(4); 4 * factorial(3); 4 * 3 * factorial(2); 4

    * 3 * 2 * factorial(1); 4 * 3 * 2 * 1; 4 * 3 * 2; 4 * 6; 24; <main> Call Stack
  131. const value = factorial(100000); console.log(value); // ??? 100,000 calls =

    100,000 stack frames 1 stack frame ≈ 48B Max stack usage ≈ 1MB 100,000 x 48 / 1024 / 1024 = 4.58MB > 1MB
  132. IN ES2015! TAIL CALL OPTIMIZATION

  133. const factorial = (n) => { if (n < 2)

    { return 1; } return n * factorial(n - 1); }; UNOPTIMIZABLE
  134. const factorial = (n) => { if (n < 2)

    { return 1; } return n * factorial(n - 1); }; 1 UNOPTIMIZABLE
  135. const factorial = (n) => { if (n < 2)

    { return 1; } return n * factorial(n - 1); }; 1 UNOPTIMIZABLE 2
  136. const factorial = (n) => { if (n < 2)

    { return 1; } return n * factorial(n - 1); }; 1 UNOPTIMIZABLE 2 3
  137. const factorial = (n, accum = 1) => { if

    (n < 2) { return accum; } return factorial(n - 1, n * accum); }; OPTIMIZED
  138. const factorial = (n, accum = 1) => { if

    (n < 2) { return accum; } return factorial(n - 1, n * accum); }; OPTIMIZED
  139. const factorial = (n, accum = 1) => { if

    (n < 2) { return accum; } return factorial(n - 1, n * accum); }; OPTIMIZED
  140. const factorial = (n, accum = 1) => { if

    (n < 2) { return accum; } return factorial(n - 1, n * accum); }; OPTIMIZED
  141. OPTIMIZED const factorial = (n, accum = 1) => {

    if (n < 2) { return accum; } return factorial(n - 1, n * accum); }; 1
  142. OPTIMIZED const factorial = (n, accum = 1) => {

    if (n < 2) { return accum; } return factorial(n - 1, n * accum); }; 1 2
  143. OPTIMIZED const factorial = (n, accum = 1) => {

    if (n < 2) { return accum; } return factorial(n - 1, n * accum); }; 1 2 3
  144. const value = factorial(100000); console.log(value); // Infinity

  145. factorial(4 /*, 1 */); factorial(3, 4); factorial(2, 12); factorial(1, 24);

    24; <main> Call Stack
  146. factorial(4 /*, 1 */); factorial(3, 4); factorial(2, 12); factorial(1, 24);

    24; <main> factorial(4, 1) Call Stack
  147. factorial(4 /*, 1 */); factorial(3, 4); factorial(2, 12); factorial(1, 24);

    24; <main> factorial(3, 4) Call Stack
  148. factorial(4 /*, 1 */); factorial(3, 4); factorial(2, 12); factorial(1, 24);

    24; <main> factorial(2, 12) Call Stack
  149. factorial(4 /*, 1 */); factorial(3, 4); factorial(2, 12); factorial(1, 24);

    24; <main> factorial(1, 24) Call Stack
  150. factorial(4 /*, 1 */); factorial(3, 4); factorial(2, 12); factorial(1, 24);

    24; <main> Call Stack
  151. RECAP PREDICTABLE SAFE TRANSPARENT MODULAR

  152. RESOURCES

  153. drboolean.gitbooks.io/mostly-adequate-guide Brian Lonsdorf

  154. ES6/7/LATER babeljs.io

  155. LANGUAGES Elm (elm-lang.org) Clojurescript (github.com/clojure/clojurescript) Purescript (purescript.org)

  156. LIBRARIES Lodash (lodash.com) Ramda (ramdajs.com) Rx (reactivex.io) Bacon.js (baconjs.github.io) Immutable.js

    (facebook.github.io/immutable-js)
  157. “MV*” React (facebook.github.io/react) Redux (redux.js.org)

  158. THANKS! Jeremy Fairbank blog.jeremyfairbank.com @elpapapollo / jfairbank Code: github.com/jfairbank/fp-basics-in-es6 Slides:

    bit.ly/1OR20R7