Overview

The Four Labyrinths

The FirES of Functional Programming

OO makes code understandable by encapsulating moving parts. FP makes code understandable by minimizing moving parts.

— Michael Feathers (@mfeathers) November 3, 2010

composability

immutability

purity

3 "T"s of Functional Programming ("3TFP")

composability

build functions with functions

    // create functions
    const trimStr = str => str.trim();
    const toUpper = str => str.toUpperCase();

    // ...and compose!
    toUpper(trimStr('  hello world  '));// HELLO WORLD
            

    // libraries like lodash can provide functions for you
    const {flow, toUpper, trim} = require('lodash');
    const loud = flow(trim, toUpper);

    // code code code

    loud('  hello world  ');// HELLO WORLD
            

composability

minimize moving parts

    function add(a, b) {return a + b;}
        

    const thisSum = add(9000, 1);// 9001
    const thatSum = add(9000, 2);// 9002
    const someSum = add(9000, 3);// 9003
    // what if you need to change 9000?
            

    // add9000 encapsulates 9000 and has fewer parameters
    const add9000 = num => add(9000, num);
    // code code code
    const thisSum = add9000(1);// 9001
    const thatSum = add9000(2);// 9002
    const someSum = add9000(3);// 9003
            

immutability

favor immutable patterns — concat

    // LESS FP: mutation with push
    const hobbits = [];
    hobbits.push('Bilbo');
    hobbits.push('Frodo');
    // code code code
    hobbits.push('Samwise');
            

    // MORE FP: avoid mutation with concat
    const baggins = ['Bilbo', 'Frodo'];
    // code code code
    const hobbits = baggins.concat('Samwise');
            

    // or with ES6 spread operator
    const hobbits = [...baggins, 'Samwise'];
            

immutability

favor immutable patterns — map

    let numbers = [1, 2, 3, 4, 5];
        

    // LESS FP: imperative mutation with for
    const squared = [];
    for (let i = 0; i < numbers.length; i++) {
        squared[i] = numbers[i] ** 2;
    }
            

    // MORE FP: functional immutability with map
    const squared = numbers.map(num => num ** 2);
            

    // squared === [1, 4, 9, 16, 25]
            

Minimize Mutation

use string interpolation

    const name = 'Carl';
        

    // LESS FP: mutation and no string interpolation
    let greeting = 'Hello';// const CANNOT be used here!
    greeting += ' ';
    greeting += name;
    greeting += '!'// "Hello Carl!"
            

    // MORE FP: no mutation with string interpolation
    const greeting = `hello ${name}!`;
            

Minimize Mutation

group object property assignment operations

    // LESS FP
    // object declaration followed by property assignments
    const book = {};
    o.title = 'The Dream Machine';
    o.author = 'M. Waldrop';
            

    // MORE FP
    // object declaration combined with property assignments
    const book = {
        title: 'The Dream Machine',
        author: 'M. Waldrop'
    };
            

Isolate Mutation

...when you cannot avoid mutation

    const {assign} = Object;
    const powerLevel = 9001;
    const person = {powerLevel};
        

    // LESS FP: multiple property assignment operations
    person.name = 'Kakarot';
    person.race = 'Saiyan';
            

    // MORE FP: single property assignment operation
    const features = {
        name: 'Kakarot',
        race: 'Saiyan'
    };
    assign(person, features);
            

immutability

Thoughts on performance

• "Interface vs Implementation"
• Browser interpreters get faster every day
• Is "push" really the bottle-neck for your app?
• Find balance between development time and runtime

purity

balance arity and state

    let foo = () => console.log('bar');
    let obj = {foo};
        

    // NOT PURE (obj is a "free variable")
    let triggerFooNotPure = () => obj.foo();
            

    // PURE (no free variables)
    let triggerFooPure = obj => obj.foo();
            

    // pure functions generally have higher "arity"
    triggerFooNotPure();// 0-ary
    triggerFooPure(obj);// 1-ary
            

One more thing...

Don't use filter when you should use forEach

    // BAD
    [1, 2, 3, 4, 5].filter(val => console.log(val));
        

    // GOOD
    [1, 2, 3, 4, 5].forEach(val => console.log(val));
        

The Trials of Tooling

analyze → compile → optimize

Analyze

"Lint"

Compile

Precompile for runtime and transpile for developers

Optimize

Reduce size and increase performance

Getting Started — 3 Easy Steps

    npm install eslint --save-dev
            

    {
        "scripts": {
            "lint": "eslint ./src/*.js"
        }
    }
            

    npm run lint
            

Use tomorrow's JavaScript today!

    const squared = val => val ** 2;
            

    "use strict";

    var squared = function squared(val) {
      return Math.pow(val, 2);
    };
            

Configuration

    {
      "presets": ["env", "minify"],
    }
            

    {
      "babel": {
        "presets": ["env", "minify"]
    }
            

Usage — Choose your "vehicle"

PostCSS

A tool for transforming CSS with JavaScript

• Use tomorrow's CSS today with postcss-cssnext
• Add vendor prefixes auto-magically with autoprefixer
• Lint your stylesheets with stylint
• Minimize your stylesheets with cssnano
• Find and fix CSS syntax errors with postcss-safe-parser
• And much much more!

Yep.

bundling and testing are the topics of the next two classes

The ObstaclES of Organization

module format — module bundler

Module Formats

• CommonJS (CJS)
• Asynchronous Module Definition (AMD)
• Universal Module Definition (UMD)
• ECMAScript Module (ESM)
• WebAssembly Module (WASM)

• Compile step required
• No boilerplate
• Works with Jest & Flow
• Extended with transpilation
• optimize/bundle → multiple

AMD

• No compile step
• Most boilerplate
• Cannot use Jest or Flow
• Extended with plugins
• optimize/bundle → r.js

ESM

• Limited support
• No boilerplate
• Simplified syntax
• Works with Jest & Flow
• Extended with transpilation
• optimize/bundle → multiple

UMD

Support AMD + CJS + Global

    // Module has lodash dependency and is named "foo"
    (function(root, factory) {
        'use strict';
        if (typeof define === 'function' && define.amd) {
            define(['lodash'], function(_) {
                return (root.foo = factory(root, _));
            });
        } else if (typeof exports === 'object') {
            const _ = require('lodash');
            module.exports = factory(root, _);
        } else {
            root.foo = factory(root, _);
        }
    }(this, function(root, _) {/* module code */}));
        

module format — module bundler

Module Bundlers

Module Bundler — r.js

Bundle Require.js AMD modules

Module Bundler — browserify

Process modules with transforms

Module Bundler — webpack

Process modules with loaders & plugins

The Tribulations of Testing

A Note on Jasmine

Jasmine is basically:

• a testing framework with zero dependencies
• + Mocha without CLI support and a weaker API
• + Chai with limited choice and less customizability
• + Sinon with 90% fewer features