Callbacks, promises, generators - asynchronous javascript

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 - asynchronous javascript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Callbacks, promises, generators - asynchronous javascript

Similar to Callbacks, promises, generators - asynchronous javascript (20)

Recently uploaded

Recently uploaded (20)

Callbacks, promises, generators - asynchronous javascript