Functional Programming using underscore.js

C4ce16f549c450f4759eb37f5d5d1a63?s=47 othree
April 20, 2013

Functional Programming using underscore.js

C4ce16f549c450f4759eb37f5d5d1a63?s=128

othree

April 20, 2013
Tweet

Transcript

  1. 3.

    me • PhD Candidate • Front End Engineer • On

    the way learning good from functional programming languages
  2. 4.

    Function of Functional Language • Pure function • First class

    citizen • Higher order function • ...
  3. 5.

    Pure Function • Side effect free • Same input, same

    output • ex: trigonometric functions
  4. 6.

    First Class Citizen • Function like variable • ex: function

    expression var f = function () { /*...*/ };
  5. 10.

    [ { name: 'Gates', gender: 'M', org: 'M$' }, {

    name: 'Peter' gender: 'M', org: 'Hㄒㄈ' } ]
  6. 12.

    var str = "Mentioned by "; for (var i =

    0, l = tweeps.length; i < l; ++i) { str += tweeps[i].name; if (i < tweeps.length - 1) { str += ", "; } }
  7. 13.

    [ { name: 'Gates', gender: 'M', org: 'M$' }, {

    name: 'Peter' gender: 'M', org: 'Hㄒㄈ' } ]
  8. 15.

    var names = []; for (var i = 0, l

    = tweeps.length; i < l; ++i) { names.push(tweeps[i].name); }
  9. 19.
  10. 22.
  11. 23.

    [ { getSummary: function () { return { text: 'Summaries',

    html: '<p>Summaries</p>' }; } }, { getSummary: function () { return {text: 'Summaried'}; } }, ... ]
  12. 25.

    buildSummary: function () { var div = document.createElement("div"), p; for

    (var i = 0, l = this.components.length; i < l; ++i) { p = document.createElement("p"); p.innerHTML = this.components[i].getSummary().text; div.appendChild(p); } return div; }
  13. 28.

    var ul = cull.dom.el("ul", { className: "bands" }); // var

    li = cull.dom.el("li", "Execration"); var ul = cull.dom.el("ul", { className: "bands" }, li);
  14. 30.

    ["a", "br", "code", "div", ...].forEach(function (tagName) { cull.dom.el[tagName] = cull.partial(cull.dom.el,

    tagName); }); // ["a", "br", "code", "div", ...].forEach(function (tagName) { root[tagName] = cull.partial(cull.dom.el, tagName); });
  15. 36.

    buildSummary: function () { return div(this.components. map(function (component) { return

    component.getSummary(); }).map(function (summary) { return summary.text; }).map(function (text) { return p(text); })); }
  16. 38.

    buildSummary: function () { return div(this.components. map(func("getSummary")). map(function (summary) {

    return summary.text; }).map(function (text) { return p(text); })); }
  17. 42.

    var callGetSummary = func("getSummary"); var getText = prop("text"); var summarize

    = compose([p, getText, callGetSummary]); // summarize(obj); // => callGetSummary(obj) // => getText(callGetSummary(obj)) // => p(getText(callGetSummary(obj)))
  18. 48.
  19. 49.

    Underscore.js • by Jeremy Ashkenas from DocumentCloud • “Underscore is

    a utility-belt library for JavaScript that provides a lot of the functional programming support”
  20. 51.

    cull.js • by Christian Johansen and Magnar Sveen • “Cull

    is a toolbelt for writing functional javascript.” • Used in the examples above https://github.com/culljs/culljs
  21. 52.

    LiveScript & prelude.ls • by George Zahariev • A new

    compile to JavaScript language fork from Coco • Stay in this room until tomorrow, Mindos have a talk about LiveScript
  22. 56.

    var str = "Mentioned by " + _.reduce( _.map(tweeps, function

    (t) { return t.name; }), function (memo, name, i) { return (i == 0) ? name : memo + ', ' + name; }, '' );
  23. 57.

    var str = "Mentioned by " + _(tweeps) .chain() .map(function

    (t) { return t.name; }) .reduce(function (memo, name, i) { return (i == 0) ? name : memo + ', ' + name; }, '') .value();
  24. 58.
  25. 61.
  26. 64.

    -

  27. 65.

    @

  28. 66.

    @ -

  29. 67.

    @ -

  30. 69.

    Difference • Better performance • Robust result • Larger file

    size • AMD supports • Auto chain • More power: cloneDeep, partial, result...
  31. 70.

    _.partial var greet = function(greeting, name) { return greeting +

    ' ' + name; }; var hi = _.partial(greet, 'hi'); hi('moe'); // ! 'hi moe' http://lodash.com/docs#partial
  32. 71.

    _.result var object = { 'cheese': 'crumpets', 'stuff': function ()

    { return 'nonsense'; } }; _.result(object, 'cheese'); // ! 'crumpets' _.result(object, 'stuff'); // ! 'nonsense' http://lodash.com/docs#result
  33. 74.

    var summarize = _.compose( p, _.partialRight(_.result, 'name'), _.partialRight(_.result, 'getSummary') );

    // ... buildSummary: function () { return div(_.map(this.components, summarize)); }
  34. 76.
  35. 79.