Remove the Boilerplate

Gleb Bahmutov

KENSHO

@bahmutov

glebbahmutov.com

www.npmjs.com/~bahmutov

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

4 entities: a, b, add and a function

Each entity can interact with other 3

@bahmutov

Kensho       Node

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

for N entities: N * (N - 1) interactions

@bahmutov

Kensho       Node

Errors = more * code^2
Errors=more∗code2Errors = more * code^2
E = m * c^2
E=m∗c2E = m * c^2

@bahmutov

Kensho       Node

Goal

Replace the boilerplate with equivalent short and readable code

@bahmutov

Kensho       Node

Example

var path = require('path');
var first = path.join(__dirname, '../foo');
...
var second = path.join(__dirname, '../bar');

@bahmutov

Kensho       Node

Example

var join = require('path').join;
var first = join(__dirname, '../foo');
...
var second = join(__dirname, '../bar');

@bahmutov

Kensho       Node

Example

var relativePath = require('path')
    .join.bind(null, __dirname);
var first = relativePath('../foo');
...
var second = relativePath('../bar');

@bahmutov

Kensho       Node

Example

var first = path.join(__dirname, '../foo');
// vs
var second = relativePath('../bar');

@bahmutov

Kensho       Node

  • functional programming 
  • promises
  • helpers for unit tests

Partial application

var relativePath = path.join.bind(null, __dirname);
relativePath('foo.js');

Binding vs partial application

Functional programming

@bahmutov

Kensho       Node

function fn(a, b, c) { ... }
var newFn = fn.bind(null, valueA, valueB);
newFn(valueC);

Partial application

@bahmutov

Kensho       Node

Place on the left arguments that are likely to be known first 

function fn(a, b, c) { ... }
var newFn = fn.bind(null, valueA, valueB);
newFn(valueC);

When designing signatures

@bahmutov

Kensho       Node

function updateUserInfo(userId, newInfo){ ... }
// vs
function updateUserInfo(newInfo, userId){ ... }

Example

@bahmutov

Kensho       Node

// user-service.js
function updateUserInfo(userId, newInfo) { ... }
// user-controller.js
function onLogin(id) {
    var updateUser = updateUserInfo.bind(null, id);
    $('form').on('submit', function onSubmitted(form) {
        updateUser(form);
    });
}

Example

@bahmutov

Kensho       Node

// user-service.js
function updateUserInfo(userId, newInfo) { ... }
// user-controller.js
function onLogin(id) {
    var updateUser = updateUserInfo.bind(null, id);
    $('form').on('submit', function onSubmitted(form) {
        updateUser(form);
    });
}

Functional programming

Point-free programming

@bahmutov

Kensho       Node

// user-service.js
function updateUserInfo(userId, newInfo) { ... }
// user-controller.js
function onLogin(id) {
    var updateUser = updateUserInfo.bind(null, id);
    $('form').on('submit', updateUser);
}

Point-free programming is not pointless

Point-free programming

Functional programming

@bahmutov

Kensho       Node

I use flexible partial application to achieve point-free programming style

Adapted point-free callbacks

@bahmutov

Kensho       Node

Partial application from the left

function fn(a, b, c) { ... }
var newFn = fn.bind(null, valueA, valueB);

_.partial, R.partial

@bahmutov

Kensho       Node

// or
var _ = require('lodash');
var newFn = _.partial(fn, valueA, valueB);
// or
var R = require('ramda');
var newFn = R.partial(fn, valueA, valueB);

Partial application from the right

['1', '2', '3'].map(parseInt); // [1, NaN, NaN]
// function parseInt(x, radix)
// but Array.map sends (value, index, array)
['1', '2', '3'].map(function (x) {
    return parseInt(x, 10);
});
['1', '2', '3'].map(_.partialRight(parseInt, 10)); 
// [1, 2, 3]
// radix is bound, 
// index and array arguments are ignored

@bahmutov

Kensho       Node

Partial application with placeholders

// function parseInt(x, radix)
['1', '2', '3'].map(_.partial(parseInt, _, 10));
// [1, 2, 3]

spots

// or
var S = require('spots');
['1', '2', '3'].map(S(parseInt, S, 10)); 
// [1, 2, 3]

@bahmutov

Kensho       Node

Example: routing placeholders

// Express
// same callbacks to check if the user is logged in and authorized
app.get('/repos', 
    passport.isAuthenticated, passport.isAuthorized, ctrl.getRepos);
app.get('/repos/:user/:name', 
    passport.isAuthenticated, passport.isAuthorized, ctrl.getRepo);
app.get('/repos/view/:user/:name', 
    passport.isAuthenticated, passport.isAuthorized, ctrl.viewFile);
app.get(<url>, passport.isAuthenticated, passport.isAuthorized, ...);

@bahmutov

Kensho       Node

Example: routing placeholders

// prefill 2 middle arguments using spots
var S = require('spots');
var authGet = S(app.get, S, 
    passport.isAuthenticated, passport.isAuthorized)
    .bind(app);
// authGet(<url>, <controller>)

@bahmutov

Kensho       Node

authGet('/repos', ctrl.getRepos);
authGet('/repos/:user/:name', ctrl.getRepo);
authGet('/repos/view/:user/:name', ctrl.viewFile);

Partial application by name

// divide by 10
function divide(a, b) { return a / b; }

heroin

var selective = require('heroin');
var by10 = selective(divide, { b: 10 });
console.log(by10(10)); // 1 (a = 10, b = 10)
console.log(by10(2)); // 0.2 (a = 2, b = 10)

@bahmutov

Kensho       Node

Partial application by key

function fn(options) { ... }

obind

var obind = require('obind');
var withBar = obind(fn, { bar: 'bar' });
withBar({ baz: 'baz' });
/*
equivalent to
foo({
    bar: 'bar',
    baz: 'baz'
})
*/

@bahmutov

Kensho       Node

Working with arrays without boilerplate

var numbers = [3, 1, 7];
var constant = 2;
var k = 0;
for(k = 0; k < numbers.length; k += 1) {
  console.log(numbers[k] * constant);
}
// 6 2 14

@bahmutov

Kensho       Node

Use ES5 methods

function mul(a, b) {
  return a * b;
}
function print(n) {
  console.log(n);
}
numbers.map(function (n) {
  return mul(n, constant);
}).forEach(print);
// 6 2 14

@bahmutov

Kensho       Node

Use ES5 methods

function mul(a, b) {
  return a * b;
}
var byK = mul.bind(null, constant);
var print = console.log.bind(console);
numbers
  .map(byK)
  .forEach(print);

@bahmutov

Kensho       Node

Use Lodash

var numbers = [3, 1, 7];
var constant = 2;
function mul(a, b) {
  return a * b;
}
var _ = require('lodash');
var byK = _.partial(mul, constant);
var print = _.bind(console.log, console);
_.forEach(_.map(numbers, byK), print);

@bahmutov

Kensho       Node

var mul = _.curry(function (a, b) {
  return a * b;
});
var byK = mul(constant);
function mul(a, b) {
  return a * b;
}
var byK = _.partial(mul, constant);

Curried functions have partial application built in.

@bahmutov

Kensho       Node

Order of arguments

function cb(item, index, array) { ... }
// ES5 method
Array.prototype.map(cb);
// Lodash method
_.map(array, cb);

Place on the left arguments that are likely to be known first 

@bahmutov

Kensho       Node

Ramda library

var R = require('ramda');
// callback is first argument
R.map(cb, array);

Ramda, Lodash to Ramda example

// all functions are curried
var by5 = R.multiply(5);
by5(10); // 50

@bahmutov

Kensho       Node

Multiply then print

var numbers = [3, 1, 7];
var constant = 2;
var R = require('ramda');
var print = R.bind(console.log, console);
var multiplyAll = R.map(R.multiply(constant));
var printAll = R.forEach(print);
printAll(multiplyAll(numbers));

@bahmutov

Kensho       Node

Composition

var multiplyAll = R.map(R.multiply(constant));
var printAll = R.forEach(print);
printAll(multiplyAll(numbers));

@bahmutov

Kensho       Node

Compose

var multiplyAll = R.map(R.multiply(constant));
var printAll = R.forEach(print);
var computation = R.compose(printAll, multiplyAll);
computation (numbers);

Static logic

Dynamic data

@bahmutov

Kensho       Node

R.pipe and R.tap

var mulPrint = R.pipe(
  R.map(R.multiply(constant)),
  R.tap(debugLog),
  R.forEach(R.bind(console.log, console))
);
mulPrint (numbers);

R.pipe for readability

R.tap for debugging

@bahmutov

Kensho       Node

Asynchronous code

var glob = require('glob');
function getJavaScriptFiles(cb) {
  glob('*.js', function (err, files) {
    if (err) {
      return cb(err);
    }
    cb(null, files);
  });
}
getJavaScriptFiles(function (err, files) {
  if (err) {
    return console.error(err);
  }
  console.log(files);
});

@bahmutov

Kensho       Node

Promises

var getJavaScriptFiles = require('q')
    .denodeify(require('glob'))
    .bind(null, '*.js');
getJavaScriptFiles()
    .then(console.log)
    .catch(console.error)
    .done();

Q

@bahmutov

Kensho       Node

Promises with boilerplate

var Q = require('q');
function asyncF() {
  var defer = Q.defer();
  process.nextTick(function () {
    defer.resolve('f');
  });
  return defer.promise;
}
function asyncAddOo(value) {
  var defer = Q.defer();
  process.nextTick(function () {
    defer.resolve(value + 'oo');
  });
  return defer.promise;
}
function print(x) {
  console.log('value =', x);
  return x;
}
function verify(x) {
  console.assert(x === 'foo');
}
asyncF()
  .then(asyncAddOo)
  .then(print)
  .then(verify)
  .done();
// "foo"

Start without boilerplate

var Q = require('q');
function asyncAddOo(value) {
  var defer = Q.defer();
  process.nextTick(function () {
    defer.resolve(value + 'oo');
  });
  return defer.promise;
}
function print(x) {
  console.log('value =', x);
  return x;
}
function verify(x) {
  console.assert(x === 'foo');
}
Q('f')
  .then(asyncAddOo)
  .then(print)
  .then(verify)
  .done();

@bahmutov

Kensho       Node

Starting promises

Step without boilerplate

var Q = require('q');
function addOo(value) {
  return value + 'oo';
}
function print(x) {
  console.log('value =', x);
  return x;
}
function verify(x) {
  console.assert(x === 'foo');
}
Q('f')
  .then(addOo)
  .then(print)
  .then(verify)
  .done();

@bahmutov

Kensho       Node

Remove boilerplate from promise chains

Step without boilerplate (2)

var Q = require('q');
var R = require('ramda');
function print(x) {
  console.log('value =', x);
  return x;
}
function verify(x) {
  console.assert(x === 'foo');
}
Q('f')
  // apply second arg
  .then(R.add(R.__, 'oo'))
  .then(print)
  .then(verify)
  .done();

@bahmutov

Kensho       Node

Use tap instead of return

var Q = require('q');
var R = require('ramda');
function print(x) {
  console.log('value =', x);
}
function verify(x) {
  console.assert(x === 'foo');
}
Q('f')
  // apply second arg
  .then(R.add(R.__, 'oo'))
  .then(R.tap(print))
  .then(verify)
  .done();

@bahmutov

Kensho       Node

Promise pipes

var Q = require('q');
var R = require('ramda');
function print(x) {
  console.log('value =', x);
}
function verify(x) {
  console.assert(x === 'foo');
}
var printThenVerify = R.pipeP(
  R.add(R.__, 'oo'),
  R.tap(print),
  verify
);
Q('f')
  .then(printThenVerify);

Remove boilerplate while the code is still readable to you

@bahmutov

Kensho       Node

Use promise library API

fs.readdirAsync('.')
    .map(processFile, { concurrency: 3 })
    .then(fileResults);

Bluebird .map

@bahmutov

Kensho       Node

Remove boilerplate from unit tests

Use a better framework

QUnit.test('a test', function(assert) {
  var done = assert.async();
  asyncOperation()
    .then(function () {
      // assert something
      done();
    });
});

Picking JavaScript testing framework

@bahmutov

Kensho       Node

Use a better framework

// Mocha
it('works', function (done) {
  asyncOperation()
    .then(function () {
      // assert something
      done();
    });
});

Picking JavaScript testing framework

@bahmutov

Kensho       Node

Use a better framework

// Mocha
it('works', function () {
  return asyncOperation()
    .then(function () {
      // assert something
    });
});

Picking JavaScript testing framework

@bahmutov

Kensho       Node

Write a test wrapper

// typical AngularJS unit test
describe('typical test', function () {
    var $rootScope, foo;
    beforeEach(function () {
        angular.mock.module('A');
        // other modules
    });
    beforeEach(inject(function (_$rootScope_, _foo_) {
        $rootScope = _$rootScope_;
        foo = _foo_;
    }));
    it('finally a test', function () {
        $rootScope.$apply(); // for example
        expect(foo).toEqual('bar');
    });
});

@bahmutov

Kensho       Node

Write a test wrapper

ngDescribe({
    modules: 'A',
    inject: ['$rootScope', 'foo'],
    tests: function (deps) {
        it('finally a test', function () {
            deps.$rootScope.$apply();
            expect(deps.foo).toEqual('bar');
        });
    });
});

ng-describe

@bahmutov

Kensho       Node

Boilerplate in assertions

it('does something', function () {
  ...
  expect(foo).toEqual('bar');
});

    test "does something" failed
    Error:

What has actually failed and why?

@bahmutov

Kensho       Node

Boilerplate in assertions

it('does something', function () {
  ...
  expect(foo).toEqual('bar', 
    'expected foo to equal "bar"');
});

    test "does something" failed
    Error: expected foo to equal "bar"

Why did it fail?

@bahmutov

Kensho       Node

Boilerplate in assertions

it('does something', function () {
  ...
  expect(foo).toEqual('bar', 
    'expected foo ' + foo + ' to equal "bar"');
});

    test "does something" failed
    Error: expected foo something to equal "bar"

Message repeats the predicate!

@bahmutov

Kensho       Node

Boilerplate in assertions

it('does something', function () {
  ...
  expect(foo).toEqual('bar', 
    'expected foo ' + JSON.stringify(foo) + 
    ' to equal "bar"');
});

@bahmutov

Kensho       Node

Lazy assertions

// require('lazy-ass');
it('does something', function () {
  la(foo === 'bar', 
    'expected foo', foo, 'to equal "bar"');
});

lazy-ass, Lazy and async assertions

@bahmutov

Kensho       Node

Test helper

var helpfulDescribe = require('lazy-ass-helpful');
helpfulDescribe(function tests() {
  it('does something', function () {
    la(foo === 'bar');
  });
});

lazy-ass-helpful

@bahmutov

Kensho       Node

Test helper

var helpfulDescribe = require('lazy-ass-helpful');
helpfulDescribe(function tests() {
  it('does something', function () {
    la(foo === 'bar', 
      'condition [foo === "bar"], foo is', foo);
  });
});

lazy-ass-helpful

Executed code

@bahmutov

Kensho       Node

Boilerplate and ES6

// need all arguments after "y"
function f(x, y) {
  var a = Array.prototype.slice.call(arguments, 2);
  ...
};

ES6 rest parameter

// using lodash
function f(x, y) {
  // need all arguments after "y"
  var a = _.toArray(arguments).slice(2);
  ...
};
// using ES6 rest parameter
function f(x, y, ...a) {
  // a is an array of arguments after "y"
  ...
};

@bahmutov

Kensho       Node

ES6 default values

function f (x, y, z) {
    if (y === undefined)
        y = 7;
    if (z === undefined)
        z = 42;
    return x + y + z;
};

default values

// es6
function f (x, y = 7, z = 42) {
    return x + y + z
}

@bahmutov

Kensho       Node

ES6 computed keys

var foo = '...';
var o = {};
o[foo] = 42;

Enhanced Object Literals

// es6
var foo = '...';
var o = {
  [foo]: 42
}

@bahmutov

Kensho       Node

ES6 arrow functions

numbers.map(function (v) { return v + 1; });
// es6
numbers.map(v => v + 1);
// I prefer
var R = require('ramda');
var add1 = R.add(1);
numbers.map(add1);

@bahmutov

Kensho       Node

Conclusions

  • Small reusable functions
  • Design signatures for partial application
  • Combine functions into pipelines
  • Use promises
  • Deal with boilerplate in your unit tests

@bahmutov

Kensho       Node

Remove the Boilerplate

slides: slides.com/bahmutov

posts: glebbahmutov.com/blog/tags/boilerplate

follow: @bahmutov