Composition in JavaScript

Composition
Something something Mozart

I'm Josh Mock.
I'm @joshmock on all of the things.
Except email, that's josh@joshmock.com.
So original, right?

What is composition?
Combining simple objects in code to make
more complex ones.

How do I compose things?
Find repeated patterns or duplications in your
code and refactor them into reusable parts.

A simple example
var obj1 = {
message: 'hello world!',
sayHi: function () {
alert(this.message);
}
};
var obj2 = {
message: 'hey!',
}
};
obj1.sayHi(); // 'hello world!'
obj2.sayHi(); // 'hey!'

A simple example
var obj1 = { message: 'hello world!' };
var obj2 = { message: 'hey!' };
var alerter = {
}
};
obj1 = _.extend(obj1, alerter);
obj2 = _.extend(obj2, alerter);
obj1.sayHi(); // 'hello world!'
obj2.sayHi(); // 'hey!'

● Maximize code reuse
● Use objects without classes
● Avoid traps of single-parent inheritance
Mixins

Mixins in the wild
● Marionette Behaviors
● Bootstrap CSS classes
● Hapi plugins

Underscore.js
_.each(array, function) : Loop over each item in an array
_.map(array, function) : Reformat each item in an array
_.filter(array, function) : Make a new array containing only items that pass a test
_.reduce(array, function, start) : Calculate a single value from an array of items

Underscore.js
_.chain(myArray)
.map(/* reformat items */)
.filter(/* pull out items you don't need */)
.reduce(/* crunch down to a single value */)
.value();

myArray
.map(/* reformat items */)
.filter(/* pull out items you don't need */)
.reduce(/* crunch down to a single value */)
You can do this in plain JS too

mapped = map(..., my_array)
filtered = filter(..., mapped)
final_val = reduce(..., filtered)
And in Python

my_array.map(...).reduce(...).reduce(...)
...and Ruby

var myList = [
{ count: 17 },
{ count: 22 },
{ count: 3 },
{ count: 18 }
];
var sum = 0;
for (var i = 0; i < myList.length; i++) {
sum += myList[i].count;
}
Function reuse

Function reuse
function getCount (value) {
return value.count;
}
function noOdds (value) {
return value % 2 === 0;
}
function add (value1, value2) {
return value1 + value2;
}

Function reuse
var myList = [
{ count: 17 },
{ count: 22 },
{ count: 3 },
{ count: 18 }
];
var sum = _.chain(myList)
.map(getCount)
.filter(noOdds)
.reduce(add)
.value();

each / map / filter / reduce
function getForms (data) {
var forms = data.aggregate.all[window.location.protocol + '//' + window.location.host];
var formsOut = [];
var url = window.location.toString();
var formsToExclude = [];
for (var key in data.aggregate.exclude) {
if (new RegExp('^' + key + '$').test(url)) {
formsToExclude = formsToExclude.concat(data.aggregate.exclude[key]);
}
}
var filteredForms = [];
for (value in forms) {
if (formsToExclude.indexOf(value) === -1) {
filteredForms.push(value);
}
}
for (key in data.aggregate.include) {
forms = forms.concat(data.aggregate.include[key]);
}
}
return formsOut;
}

● Small, single-purpose functions
● Maintainable
● Reusable
● Easy to test
● Universally understandable

Web components
● HTML is perfectly composable:
<form>
<input type="text">
<button>click me</button>
</form>
● Custom elements = infinite composition possibilities!

$ cat index.js | grep 'var' | wc -l
5
Unix piping

"This is the Unix philosophy: Write programs
that do one thing and do it well. Write programs
to work together. Write programs to handle text
streams, because that is a universal interface."
- Doug McIlroy
The Unix Philosophy

A Node.js API to read in data, act on it in
chunks, then then write out to a new stream.
Node streams

Node streams
gulp.task('scripts', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('all.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});

Functional reactive programming
Act on DOM events as though they were
streams or arrays.

Microservices
"...an approach to developing a single
application as a suite of small services, each
running in its own process."

● Stop building behemoths
● Build single-purpose tools
● Chain them together to do big things
TL;DR

Composition in JavaScript

More Related Content

Composition in JavaScript