Search code, repositories, users, issues, pull requests...

^ "Homogeneous interfaces create dense spaces"

Homogeneous interfaces create dense spaces

^ Example: Integers and addition, multiplication: very dense

^ "Heterogeneous interfaces create sparse spaces"

Heterogeneous interfaces create sparse spaces

^ counter-example: imagine an operation on integers wher emost operations were invalid. you'd have to engage in a complex search to find the path from any one integer to another.

^ "Dense is more flexible than sparse"

Dense is more flexible than sparse

^ https://www.flickr.com/photos/dipfan/110857520

^ https://www.flickr.com/photos/nathanoliverphotography/9604185186

^ "Sparse can be quicker to grasp"

Sparse can be quicker to grasp

^ https://www.flickr.com/photos/dipfan/110857520

^ https://www.flickr.com/photos/nathanoliverphotography/9604185186

^ we'll give an example, showing how we have to build up.

^ https://www.flickr.com/photos/joao_trindade/4362414729

^ "enough with the math!"

enough with the math!

^ https://www.flickr.com/photos/joao_trindade/4362414729

^ https://www.flickr.com/photos/mediterraneaaan/12756787045

^ "pluck"

pluck: "A convenient version of what is perhaps the most common use-case for map: extracting a list of property values."

^ https://www.flickr.com/photos/mediterraneaaan/12756787045

^ underscorejs.org

"pluckWith" is the flipped form of "pluck"

function pluck (mappable, key) {
  return mappable.map(function (obj) {
		return obj[key];
	});
};

function pluckWith (key, mappable) {
  return pluck(mappable, key);
};

var stooges = [
	{name: 'moe', age: 40},
	{name: 'larry', age: 50},
	{name: 'curly', age: 60}];

pluckWith('name', stooges);
	//=> ["moe", "larry", "curly"]

Let's make "pluckWith" out of combinators

A unary combinator

function flip (fn) {
	return function flipped (a, b) {
		return fn.call(this, b, a);
	}
}

function arrow (a, b) {
    return "" + a + " -> " + b;
}

flip(arrow)("x", "y")
	//=> 'y -> x'

^ http://jsfiddle.net/raganwald/wFRP8/

^ https://www.flickr.com/photos/saramarlowe/8170948596

^ Another unary combinator

curry

Another unary combinator

^ https://www.flickr.com/photos/saramarlowe/8170948596

function curry (fn) {
	return function curried (a, optionalB) {
		if (arguments.length > 1) {
			return fn.call(this, a, optionalB);
		}
		else return function partiallyApplied (b) {
			return fn.call(this, a, b);
		}
	}
}

^ binary only

Currying:

var curriedArrow = curry(arrow);
	//=> [function]
	
curriedArrow('finger')('moon')
	//=> 'finger -> moon'

^ http://raganwald.com/2013/03/07/currying-and-partial-application.html

Partial Application:

var taoism = curry(arrow)('finger');
	//=> [function]
	
taoism('moon')
	//=> 'finger -> moon'

^ http://raganwald.com/2013/03/07/currying-and-partial-application.html

^ https://www.flickr.com/photos/genista/4449316

^ "Partial application transforms binary operations into unary operations"

nota bene

Partial application transforms binary operations into unary operations

^ https://www.flickr.com/photos/genista/4449316

^ makes the interface more homogeneous

function get (object, property) {
	return object[property];
}

get({foo: 1}, 'foo')
	//=> 1

var getWith = curry(flip(get));

getWith('foo')({foo: 1})
	//=> 1

function map (mappable, fn) {
	return mappable.map(fn, this);
}

function double (n) {
    return n * 2;
}

map([1, 2, 3], double)
	//=> [2, 4, 6]

var mapWith = curry(flip(map));

mapWith(double, [1, 2, 3]);
	//=> [2, 4, 6]

var doubleAll = mapWith(double);

doubleAll([1, 2, 3])
	//=> [2, 4, 6]

almost there...

function pluckWith (attr) {
  return mapWith(getWith(attr));
}

^ https://www.flickr.com/photos/ctaweb/8487304182

^ "Compose"

Compose

^ https://www.flickr.com/photos/ctaweb/8487304182

function compose (a, b) {
	return function composed (c) {
		return a(b(c));
	}
}

quod erat demonstrandum

The combinator implementation of "pluckWith"

var pluckWith = compose(mapWith, getWith);

Let's compare both implementations of "pluckWith"

var pluckWith = compose(mapWith, getWith);

//// versus ////

function pluck (mappable, key) {
  return mappable.map(function (obj) {
		return obj[key];
	});
};

function pluckWith (key, mappable) {
  return pluck(mappable, key);
};

lesson

Composing functions with combinators increases code flexibility...

^ teases apart heterogeneous factoring

lesson

Composing functions with combinators demands increased mental flexibility

^ asterix: with care, they can be easier to read.

using combinators to make

Decorators

function Cake () {}

extend(Cake.prototype, {
  mix: function () {
    // mix ingredients together
		return this;
  },
  rise: function (duration) {
    // let the ingredients rise
		return this;
  },
  bake: function () {
    // do some baking
		return this;
  }
});

fluent

function fluent (methodBody) {
  return function fluentized () {
    methodBody.apply(this, arguments);
    return this;
  }
}

function Cake () {}

extend(Cake.prototype, {
  mix: fluent( function () {
    // mix ingredients together
  }),
  rise: fluent( function (duration) {
    // let the ingredients rise
  }),
  bake: fluent(function () {
    // do some baking
  })
});

new requirements

Mix before rising or baking

extend(Cake.prototype, {
  mix: fluent( function () {
    // mix ingredients together
  }),
  rise: fluent( function (duration) {
		this.mix();
    // let the ingredients rise
  }),
  bake: fluent(function () {
		this.mix();
    // do some baking
  })
});

before

a combinator that transforms decorations into decorators

var before = curry(
	function decorate (decoration, method) {
		return function decoratedWithBefore () {
    	decoration.apply(this, arguments);
    	return method.apply(this, arguments);
		};
  }
);

var mixFirst = before(function () {
  this.mix()
});

the final version

extend(Cake.prototype, {
  
  // Other methods...
  
  mix: fluent( function () {
    // mix ingredients together
  }),
  rise: fluent( mixFirst( function (duration) {
    // let the ingredients rise
  })),
  bake: fluent( mixFirst( function () {
    // do some baking
  }))
});

lesson

Decorators declutter secondary concerns

after

var after = curry(
	function decorate (decoration, method) {
		return function decoratedWithAfter () {
			var returnValue = method.apply(this, arguments);
    	decoration.apply(this, arguments);
    	return returnValue;
		};
  }
);

around

var around = curry(
	function decorate (decoration, method) {
		return function decoratedWithAround () {
			var methodPrepended = [method].concat(
				[].slice.call(arguments, 0)
			);
			
    	return decoration.apply(this, methodPrepended);
		};
  }
);

call me maybe

var maybe = around(function (fn, value) {
	if (value != null) {
		return fn.call(this, value);;
	}
});

maybe(double)(2)
	//=> 4
	
maybe(double)(null)
	//=> undefined

generalized guards

function provided (guard) {
	return around(function () {
		var fn = arguments[0],
		    values = [].slice.call(arguments, 1);
				
		if (guard.apply(this, values)) {
			return fn.apply(this, values);
		}
	});
}

var maybe = provided( function (value) { 
	return value != null; 
});

inversions

function not (fn) {
	return function notted () {
		return !fn.apply(this, arguments)
	}
}

var except = compose(provided, not);

var maybe = except( function (value) {
	return value == null;
});

^ https://www.flickr.com/photos/68112440@N07/6210847796

^ "lessons"

lessons

^ https://www.flickr.com/photos/68112440@N07/6210847796

^ https://www.flickr.com/photos/paulmccoubrie/6792412657

^ "Combinators increase code flexibility and require increased mental flexibility"

lesson one

Combinators increase code flexibility and require increased mental flexibility

^ https://www.flickr.com/photos/paulmccoubrie/6792412657

^ https://www.flickr.com/photos/terry_wha/107810852

^ "Decorators declutter secondary concerns"

lesson two

Decorators declutter secondary concerns

^ https://www.flickr.com/photos/terry_wha/107810852

^ https://www.flickr.com/photos/suburbanbloke/723665503

^ "Do not follow in the footsteps of the sages. Seek what they sought"

lesson three

Do not follow in the footsteps of the sages.

Seek what they sought

^ https://www.flickr.com/photos/suburbanbloke/723665503

Reginald Braithwaite

GitHub, Inc.

raganwald.com

@raganwald

NDC Conference, Oslo, Norway, June 5, 2014

^ https://leanpub.com/javascript-allonge

^ https://www.flickr.com/photos/data_op/2473348747

^ "intermission"

^ https://www.flickr.com/photos/frans16611/6139595092

^ "A Unified Theory of JavaScript Style, Part II"

A Unified Theory of JavaScript Style, Part II

The Art of the JavaScript Metaobject Protocol

^ https://www.flickr.com/photos/frans16611/6139595092

^ https://www.flickr.com/photos/cogdog/5560050395

^ "We'll talk about Proxies, Encapsulation, and Composition"

we'll talk about

Proxies, Encapsulation, and Composition

^ https://www.flickr.com/photos/cogdog/5560050395

^ https://www.flickr.com/photos/seier/3553005609

but think about

Flexibility and Decoupling at Scale

^ https://www.flickr.com/photos/seier/3553005609

^ https://www.flickr.com/photos/zscheyge/49012397

^ "open mixins"

basics

Open Mixins

^ https://www.flickr.com/photos/zscheyge/49012397

var sam = {
  firstName: 'Sam',
  lastName: 'Lowry',
  fullName: function () {
    return this.firstName + " " + this.lastName;
  },
  rename: function (first, last) {
    this.firstName = first;
    this.lastName = last;
    return this;
  }
}

var sam = {
  firstName: 'Sam',
  lastName: 'Lowry'
};

var Person = {
  fullName: function () {
    return this.firstName + " " + this.lastName;
  },
  rename: function (first, last) {
    this.firstName = first;
    this.lastName = last;
    return this;
  }
};

function extend () {
  var consumer = arguments[0],
      providers = [].slice.call(arguments, 1),
      key,
      i,
      provider;

  for (i = 0; i < providers.length; ++i) {
    provider = providers[i];
    for (key in provider) {
      if (provider.hasOwnProperty(key)) {
        consumer[key] = provider[key];
      };
    };
  };
  return consumer;
}

Mixins are many to _

extend(sam, Person);

var peck = {
  firstName: 'Sam',
  lastName: 'Peckinpah'
};

extend(peck, Person);

Mixins are _ to many

var HasCareer = {
  career: function () {
    return this.chosenCareer;
  },
  setCareer: function (career) {
    this.chosenCareer = career;
    return this;
  }
};

extend(peck, HasCareer);

peck.setCareer('Director');

^ https://www.flickr.com/photos/ell-r-brown/4654012932

^ "Private Mixins"

basics

Private Mixins

^ https://www.flickr.com/photos/ell-r-brown/4654012932

function extendPrivately (receiver, mixin) {
  var methodName,
      privateProperty = Object.create(null);

  for (methodName in mixin) {
    if (mixin.hasOwnProperty(methodName)) {
      receiver[methodName] = mixin[methodName].bind(privateProperty);
    };
  };
  return receiver;
};

var peck = {
  firstName: 'Sam',
  lastName: 'Peckinpah'
};

extendPrivately(peck, HasCareer);

peck.setCareer("Director;

peck.chosenCareer
	//=> undefined

^ hand-waving over "self"

^ https://www.flickr.com/photos/oddwick/2398128614

^ "forwarding"

basics

Forwarding

^ https://www.flickr.com/photos/oddwick/2398128614

function forward (receiver, metaobject, methods) {
  if (methods == null) {
    methods = Object.keys(metaobject).filter(function (methodName) {
      return typeof(metaobject[methodName]) == 'function';
    });
  }
  methods.forEach(function (methodName) {
    receiver[methodName] = function () {
      var result = metaobject[methodName].apply(metaobject, arguments);
      return result === metaobject ? this : result;
    };
  });

  return receiver;
};

^ https://www.flickr.com/photos/25722571@N08/5509806114

forwarding is important

Let's stick a tack in this for later

^ https://www.flickr.com/photos/25722571@N08/5509806114

Four shades of gray

A mixin uses the receiver's method body, and executes in the receiver's context.
A private mixin uses the receiver's method body, but executes in another object's context.
Forwarding uses another object's method body, and executes in another object's context.
What uses another object's method body, but executes in the receiver's context?

^ https://www.flickr.com/photos/astragony/8571474312

function delegate (receiver, metaobject, methods) {
  if (methods == null) {
    methods = Object.keys(metaobject).filter(function (methodName) {
      return typeof(metaobject[methodName]) == 'function';
    });
  }
  methods.forEach(function (methodName) {
    receiver[methodName] = function () {
      return metaobject[methodName].apply(receiver, arguments);
    };
  });

  return receiver;
};

^ https://www.flickr.com/photos/carbonnyc/6415460111

Could there be another way to delegate to a metaobject?

^ https://www.flickr.com/photos/carbonnyc/6415460111

Yes.

Object.create(metaobject);

^ https://www.flickr.com/photos/environment/2167097486

^ "inheritence is delegation through prototypes"

inheritence is

Delegation through Prototypes

^ https://www.flickr.com/photos/environment/2167097486

^ https://www.flickr.com/photos/double-m2/4341910416

^ "Now that we've categorized our basic tools"

Now that we've categorized our basic tools...

^ https://www.flickr.com/photos/double-m2/4341910416

^ "pale blue dot"

^ we need to think at scale

we need to think

At Scale

^ "Problems at Scale"

Problems at Scale

Problems at Scale

- object coupling

Problems at Scale

- object coupling

- inflexibility

Problems at Scale

- object coupling

- inflexibility

- metaobject coupling