Callbacks, Promises, Generators Explained

Callbacks, Promises,
Generators
Łukasz Kużyński @wookiebpl

callbacks, promises, generators
Asynchronous code
!
var result = asyncFunction();
// you won't get result immediately
typeof result === 'undefined'; // true

Callbacks
asyncFunction(function() {
// i’ll be called when the execution ends
!
// where is the result?
// there was any error?
});

Callbacks - Node.js way - callback-based functions
var asyncFunction = function(args, ..., callback) {
setTimeout(function() {
!
// "returning" result
callback(null, {tasty: 'sandwich'});
!
// or
// "throwing" errors
callback(new Error('Error message'));
}, 50);
};
!
asyncFunction(function(error, result, result1 ...) {
if (error) {
// handle error
return; // don't forget about this!
}
// handle result
});

Callbacks - Own patterns - DON’t do it
var asyncFunction = function(callback) {
callback({tasty: 'sandwich'});
}, 50);
};
!
asyncFunction(function(result) {
result; // {tasty: 'sandwich'}
!
// but... what about errors?
});

Callbacks - Own patterns - DON’t do it

Callbacks - Callback-based function

Callbacks - Asynchronous patterns

Callbacks - Callback hell
var fetchResultFromDb = function(callback) {
db.fetch(function(error, result) {
if (error) { callback(error); return; }
!
serializeResult(result, function(error, result) {
callback(null, result); // finally!
});
});
};
!
fetchResultFromDb(function(error, result) {
if (error) { console.error(error); return; }
!
result; // end result
});

var function1 = function (callback) {
function2(function(error, result) {
!
function3(result, function(error, result) {
!
!
// ...
});
});
});
});
};

Callbacks - Callback hell - map -
var map = function(input, callback) {
var results = [],
handleIterationResult = function(error, result) {
results.push(result);
if (results.length === input.length) {
callback(null, results);
}
};
input.forEach(function(num) {
sum(num, handleIterationResult);
});
};
!
var sum = function(num, callback) {
callback(null, num + num);
};
!
map([1, 2, 3, 4, 5], function(error, result) {
if (error) { console.error(error); return; };
result; // [2, 4, 6, 8, 10]
});
DON’t do it

Callbacks - Callback hell - map

Callbacks - Introducing async
ASYNC
by Caolan McMahon
„Higher-order functions and common patterns for
asynchronous code”

Callbacks - async waterfall
async.waterfall([
function(callback){
callback(null, 'one', 'two');
},
function(arg1, arg2, callback){
arg1 === 'one'; // true
arg === 'two'; // true
callback(null, 'three');
},
function(arg1, callback){
arg1 === 'three'; // true
callback(null, 'done');
}
], function (err, result) {
result === 'done'; // true
});

Callbacks - async waterfall
var fetchResultFromDb = function(callback) {
async.waterfall([
db.fetch.bind(db), // to preserve function context
serializeResult
], callback);
};
!
fetchResultFromDb(function(error, result) {
result;
});

Callbacks - async MAP
var sum = function(num, callback) {
callback(null, num + num);
};
!
async.map([1, 2, 3, 4, 5], sum, function(error, result) {
result; // [2, 4, 6, 8, 10]
});

Callbacks - async

Callbacks - asynC
Collections
each, map, ﬁlter, reduce, some ...
Control ﬂow
series, parallel, waterfall, compose ...

Promises
According to Promises/A+ speciﬁcation
„promise is an object or function with a then method
whose behavior conforms to this specification (...)
[and] represents the eventual result of an
asynchronous operation„
More specs http://wiki.commonjs.org/wiki/Promises

Promises
var promise = promisedFunction();
!
typeof promise !== 'undefined'; // true
'then' in promise; // true

Promises - introducing Q
Q
by Kris Kowal
„A tool for making and composing asynchronous
promises in JavaScript”

Promises - Promise-based function
var promisedFunction = function() {
var defer = Q.defer();
!
!
// REJECTING
// "throwing" error
defer.reject(new Error('Error message'));
!
// or
// FULFILLING
// "returning" result -
defer.resolve({tasty: 'sandwich'});
!
}, 50);
!
return defer.promise;
// remember to always return a promise
};

Promises - basic usage
!
var promise = promisedFunction();
!
promise.then(function(result) {
// handle result
}, function(error) {
// handle error
});
!
// more "listeners"
promise.then(onSuccess, onError);
// ...

Promises - fulfilling by promise
Q.fcall(function() {
defer.resolve(['tasty']);
}, 50);
})
.then(function(result) {
defer.resolve(result.concat(['sandwich']));
}, 50);
})
result; // ['tasty', 'sandwich']
}, function(error) { // handling error });
Remember waterfall pattern from async library?

Promises - fulfilling by promise

Promises - COnverting callback-based functions
var callbackBasedFunction = function(callback) {
}, 50);
};
!
var promiseBasedFunction = Q.denodeify(callbackBasedFunction);
!
promiseBasedFunction()
});

Promises - previous waterfall example
var fetchFromDb = function() {
return Q.ninvoke(db, 'fetch')
.then(Q.denodeify(serializeResults));
};
!
fetchFromDb()
result;
});
You have to convert each callback-based function into promise-based

for chaining

Promises - MAP
var promisedSum = Q.denodeify(sum);
!
var promises = [1, 2, 3, 4, 5].map(function(num) {
return promisedSum(num);
});
!
Q.all(promises).then(function(result) {
console.log(result);
});
Q.all is a custom Q library function.

Not in spec.

Promises - compatibility
https://github.com/kriskowal/q#the-middle
„When working with promises provided by other libraries,
you should convert it to a Q promise. Not all
promise libraries make the same guarantees as Q and
certainly don’t provide all of the same methods.”

Promises AND NPM packages
Always expose your package API as

callback-based functions!

It’s a standard

Generators

Generators - ES6 feature
var generatorFunction = function*() { // note asterisk
var value = yield 1; // waits here for „next” call
value; // {tasty: 'sandwich' }
yield 2;
};
!
var gen = generatorFunction();
gen.next(); // { value: 1, done: false }
gen.next({tasty: 'sandwich'}); // { value: 2, done: false }
gen.next(); // { value: undefined, done: true }

Generators - ES6 feature

Generators + promise
var promisedStep = Q.denodeify(function(callback) {
}, 50);
});
!
var generatorFunction = function*() {
var result = yield promisedStep;
};
!
var result = gen.next();
result.value()
gen.next(result);
gen.throw(error);
});

Generators + Exceptions
var promisedStep = Q.denodeify(function(callback) {
callback(new Error('No butter!'));
}, 50);
});
!
var generatorFunction = function*() {
try {
var result = yield promisedStep;
} catch (error) {
error; // [Error: No butter!]
}
};
!
!
var result = gen.next();
result.value()
gen.next(result);
gen.throw(error);
});

Generators - introducing CO
CO
by TJ Holowaychuk
„The ultimate generator based flow-control goodness
for nodejs (supports thunks, promises, etc)”

Generators - CO
var fetchResultFromDb = function*() {
var records = yield thunkify(db.fetch.bind(db))();
return yield thunkify(serializeResults)(records);
};
!
co(function*() {
var result = yield fetchResultFromDb;
})();

Generators - THUNK
var asyncFunction = function(arg1, arg2, calback) {
callback(null, {tasty: 'sandwich with '+arg1+' and '+arg2})
}, 50);
};
co(function*() {
yield asyncFunction; // what about arguments?
yield asyncFunction.bind(undefined, 'butter', 'cheese');
})();

Generators - THUNK
var thunkifiedAsyncFunction = thunkify(asyncFunction);
// fn(args, ..., callback)
asyncFunction('butter', 'cheese', function(err, result) {
});
!
// transformed into
// fn(args)(callback)
thunkifiedAsyncFunction('butter', 'cheese')(function(err, result) {
});

Generators - co - map
var thunkifiedSum = thunkify(sum);
co(function*() {
var result = yield [1, 2, 3, 4, 5].map(function(num) {
return thunkifiedSum(num);
});
!
result; // [ 2, 4, 6, 8, 10 ]
})();

Generators - co

Generators - NOT YET!
Supported by ﬁrefox and chrome (disabled by default)
Node.js 0.11.* - not stable yet

CONCLUSIONs
You need a library for asynchronous code
Use callback-based functions for public API
Pick solution that is ﬁne for you and your team

More informations
Promises/A+ Performance Hits You Should Be Aware Of
https://github.com/substack/node-seq
http://wiki.commonjs.org/wiki/Promises

Q&A
Questions?

Font „Blue Highway” from http://typodermicfonts.com/
Thanks!

Callbacks, Promises, Generators Explained

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Callbacks, Promises, Generators Explained

Similar to Callbacks, Promises, Generators Explained (20)

Recently uploaded

Recently uploaded (20)

Callbacks, Promises, Generators Explained