SlideShare une entreprise Scribd logo
1  sur  49
Télécharger pour lire hors ligne
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, promises, generators
Callbacks
asyncFunction(function() {
// i’ll be called when the execution ends
!
// where is the result?
// there was any error?
});
callbacks, promises, generators
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, promises, generators
Callbacks - Own patterns - DON’t do it
var asyncFunction = function(callback) {
setTimeout(function() {
callback({tasty: 'sandwich'});
}, 50);
};
!
asyncFunction(function(result) {
result; // {tasty: 'sandwich'}
!
// but... what about errors?
});
callbacks, promises, generators
Callbacks - Own patterns - DON’t do it
callbacks, promises, generators
Callbacks - Callback-based function
callbacks, promises, generators
Callbacks - Asynchronous patterns
callbacks, promises, generators
Callbacks - Callback hell
var fetchResultFromDb = function(callback) {
db.fetch(function(error, result) {
if (error) { callback(error); return; }
!
serializeResult(result, function(error, result) {
if (error) { callback(error); return; }
callback(null, result); // finally!
});
});
};
!
fetchResultFromDb(function(error, result) {
if (error) { console.error(error); return; }
!
result; // end result
});
callbacks, promises, generators
Callbacks - Callback hell
callbacks, promises, generators
Callbacks - Callback hell
var function1 = function (callback) {
function2(function(error, result) {
if (error) { callback(error); return; }
!
function3(result, function(error, result) {
if (error) { callback(error); return; }
!
function4(result, function(error, result) {
if (error) { callback(error); return; }
!
function5(result, function(error, result) {
// ...
});
});
});
});
};
callbacks, promises, generators
Callbacks - Callback hell - map -
var map = function(input, callback) {
var results = [],
handleIterationResult = function(error, result) {
if (error) { callback(error); return; }
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, promises, generators
Callbacks - Callback hell - map
callbacks, promises, generators
Callbacks - Callback hell
callbacks, promises, generators
Callbacks - Introducing async
ASYNC
by Caolan McMahon
„Higher-order functions and common patterns for
asynchronous code”
callbacks, promises, generators
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, promises, generators
Callbacks - async waterfall
var fetchResultFromDb = function(callback) {
async.waterfall([
db.fetch.bind(db), // to preserve function context
serializeResult
], callback);
};
!
fetchResultFromDb(function(error, result) {
if (error) { console.error(error); return; }
result;
});
callbacks, promises, generators
Callbacks - async MAP
var sum = function(num, callback) {
callback(null, num + num);
};
!
async.map([1, 2, 3, 4, 5], sum, function(error, result) {
if (error) { console.error(error); return; }
result; // [2, 4, 6, 8, 10]
});
callbacks, promises, generators
Callbacks - async
callbacks, promises, generators
Callbacks - asynC
Collections
each, map, filter, reduce, some ...
Control flow
series, parallel, waterfall, compose ...
callbacks, promises, generators
Promises
According to Promises/A+ specification
„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
callbacks, promises, generators
Promises
var promise = promisedFunction();
!
typeof promise !== 'undefined'; // true
'then' in promise; // true
callbacks, promises, generators
Promises - introducing Q
Q
by Kris Kowal
„A tool for making and composing asynchronous
promises in JavaScript”
callbacks, promises, generators
Promises - Promise-based function
var promisedFunction = function() {
var defer = Q.defer();
!
setTimeout(function() {
!
// 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
};
callbacks, promises, generators
Promises - basic usage
!
var promise = promisedFunction();
!
promise.then(function(result) {
// handle result
}, function(error) {
// handle error
});
!
// more "listeners"
promise.then(onSuccess, onError);
// ...
callbacks, promises, generators
Promises - fulfilling by promise
Q.fcall(function() {
var defer = Q.defer();
setTimeout(function() {
defer.resolve(['tasty']);
}, 50);
return defer.promise;
})
.then(function(result) {
var defer = Q.defer();
setTimeout(function() {
defer.resolve(result.concat(['sandwich']));
}, 50);
return defer.promise;
})
.then(function(result) {
result; // ['tasty', 'sandwich']
}, function(error) { // handling error });
Remember waterfall pattern from async library?
callbacks, promises, generators
Promises - fulfilling by promise
callbacks, promises, generators
Promises - COnverting callback-based functions
var callbackBasedFunction = function(callback) {
setTimeout(function() {
callback(null, {tasty: 'sandwich'});
}, 50);
};
!
var promiseBasedFunction = Q.denodeify(callbackBasedFunction);
!
promiseBasedFunction()
.then(function(result) {
result; // {tasty: 'sandwich'}
});
callbacks, promises, generators
Promises - previous waterfall example
var fetchFromDb = function() {
return Q.ninvoke(db, 'fetch')
.then(Q.denodeify(serializeResults));
};
!
fetchFromDb()
.then(function(result) {
result;
});
You have to convert each callback-based function into promise-based 

for chaining
callbacks, promises, generators
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.
callbacks, promises, generators
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.”
callbacks, promises, generators
Promises AND NPM packages
Always expose your package API as 

callback-based functions!

It’s a standard
callbacks, promises, generators
Generators
callbacks, promises, 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 }
callbacks, promises, generators
Generators - ES6 feature
callbacks, promises, generators
Generators + promise
var promisedStep = Q.denodeify(function(callback) {
setTimeout(function() {
callback(null, {tasty: 'sandwich'});
}, 50);
});
!
var generatorFunction = function*() {
var result = yield promisedStep;
result; // {tasty: 'sandwich'}
};
!
var gen = generatorFunction();
var result = gen.next();
result.value()
.then(function(result) {
gen.next(result);
}, function(error) {
gen.throw(error);
});
callbacks, promises, generators
Generators + Exceptions
var promisedStep = Q.denodeify(function(callback) {
setTimeout(function() {
callback(new Error('No butter!'));
}, 50);
});
!
var generatorFunction = function*() {
try {
var result = yield promisedStep;
} catch (error) {
error; // [Error: No butter!]
}
};
!
var gen = generatorFunction();
!
var result = gen.next();
result.value()
.then(function(result) {
gen.next(result);
}, function(error) {
gen.throw(error);
});
callbacks, promises, generators
Generators
callbacks, promises, generators
Generators - introducing CO
CO
by TJ Holowaychuk
„The ultimate generator based flow-control goodness
for nodejs (supports thunks, promises, etc)”
callbacks, promises, generators
Generators - CO
var fetchResultFromDb = function*() {
var records = yield thunkify(db.fetch.bind(db))();
return yield thunkify(serializeResults)(records);
};
!
co(function*() {
var result = yield fetchResultFromDb;
})();
callbacks, promises, generators
Generators - THUNK
var asyncFunction = function(arg1, arg2, calback) {
setTimeout(function() {
callback(null, {tasty: 'sandwich with '+arg1+' and '+arg2})
}, 50);
};
co(function*() {
yield asyncFunction; // what about arguments?
yield asyncFunction.bind(undefined, 'butter', 'cheese');
})();
callbacks, promises, generators
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) {
});
callbacks, promises, generators
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 ]
})();
callbacks, promises, generators
Generators - co
callbacks, promises, generators
Generators - NOT YET!
Supported by firefox and chrome (disabled by default)
Node.js 0.11.* - not stable yet
callbacks, promises, generators
CONCLUSIONs
You need a library for asynchronous code
Use callback-based functions for public API
Pick solution that is fine for you and your team
callbacks, promises, generators
More informations
Promises/A+ Performance Hits You Should Be Aware Of
https://github.com/substack/node-seq
http://wiki.commonjs.org/wiki/Promises
callbacks, promises, generators
Q&A
Questions?
callbacks, promises, generators
Font „Blue Highway” from http://typodermicfonts.com/
Thanks!

Contenu connexe

Tendances

React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux IntroductionNikolaus Graf
 
Angular & RXJS: examples and use cases
Angular & RXJS: examples and use casesAngular & RXJS: examples and use cases
Angular & RXJS: examples and use casesFabio Biondi
 
ES6 presentation
ES6 presentationES6 presentation
ES6 presentationritika1
 
React js programming concept
React js programming conceptReact js programming concept
React js programming conceptTariqul islam
 
Asynchronous javascript
 Asynchronous javascript Asynchronous javascript
Asynchronous javascriptEman Mohamed
 
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Adnan Sohail
 
JavaScript: Variables and Functions
JavaScript: Variables and FunctionsJavaScript: Variables and Functions
JavaScript: Variables and FunctionsJussi Pohjolainen
 
ES2015 / ES6: Basics of modern Javascript
ES2015 / ES6: Basics of modern JavascriptES2015 / ES6: Basics of modern Javascript
ES2015 / ES6: Basics of modern JavascriptWojciech Dzikowski
 
React JS & Functional Programming Principles
React JS & Functional Programming PrinciplesReact JS & Functional Programming Principles
React JS & Functional Programming PrinciplesAndrii Lundiak
 
Avoiding callback hell in Node js using promises
Avoiding callback hell in Node js using promisesAvoiding callback hell in Node js using promises
Avoiding callback hell in Node js using promisesAnkit Agarwal
 
Introduction to Node JS.pdf
Introduction to Node JS.pdfIntroduction to Node JS.pdf
Introduction to Node JS.pdfBareen Shaikh
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.jsEmanuele DelBono
 

Tendances (20)

React + Redux Introduction
React + Redux IntroductionReact + Redux Introduction
React + Redux Introduction
 
Angular & RXJS: examples and use cases
Angular & RXJS: examples and use casesAngular & RXJS: examples and use cases
Angular & RXJS: examples and use cases
 
Redux workshop
Redux workshopRedux workshop
Redux workshop
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript Promises
 
ES6 presentation
ES6 presentationES6 presentation
ES6 presentation
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
 
Workshop 21: React Router
Workshop 21: React RouterWorkshop 21: React Router
Workshop 21: React Router
 
Asynchronous javascript
 Asynchronous javascript Asynchronous javascript
Asynchronous javascript
 
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)
 
React Hooks
React HooksReact Hooks
React Hooks
 
JavaScript: Variables and Functions
JavaScript: Variables and FunctionsJavaScript: Variables and Functions
JavaScript: Variables and Functions
 
React hooks
React hooksReact hooks
React hooks
 
JavaScript Event Loop
JavaScript Event LoopJavaScript Event Loop
JavaScript Event Loop
 
ES2015 / ES6: Basics of modern Javascript
ES2015 / ES6: Basics of modern JavascriptES2015 / ES6: Basics of modern Javascript
ES2015 / ES6: Basics of modern Javascript
 
JS Event Loop
JS Event LoopJS Event Loop
JS Event Loop
 
React JS & Functional Programming Principles
React JS & Functional Programming PrinciplesReact JS & Functional Programming Principles
React JS & Functional Programming Principles
 
Avoiding callback hell in Node js using promises
Avoiding callback hell in Node js using promisesAvoiding callback hell in Node js using promises
Avoiding callback hell in Node js using promises
 
JavaScript: Events Handling
JavaScript: Events HandlingJavaScript: Events Handling
JavaScript: Events Handling
 
Introduction to Node JS.pdf
Introduction to Node JS.pdfIntroduction to Node JS.pdf
Introduction to Node JS.pdf
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
 

En vedette

Understanding Asynchronous JavaScript
Understanding Asynchronous JavaScriptUnderstanding Asynchronous JavaScript
Understanding Asynchronous JavaScriptjnewmanux
 
Avoiding Callback Hell with Async.js
Avoiding Callback Hell with Async.jsAvoiding Callback Hell with Async.js
Avoiding Callback Hell with Async.jscacois
 
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Domenic Denicola
 
Beyond the Callback: Yield Control with Javascript Generators
Beyond the Callback: Yield Control with Javascript GeneratorsBeyond the Callback: Yield Control with Javascript Generators
Beyond the Callback: Yield Control with Javascript GeneratorsDarren Cruse
 
Ambient Media Worldwide Ltd Jd Lr
Ambient Media Worldwide Ltd Jd LrAmbient Media Worldwide Ltd Jd Lr
Ambient Media Worldwide Ltd Jd LrJohnnboy75
 
JavaScript closures
JavaScript closuresJavaScript closures
JavaScript closuresHorky Chen
 
Wow! closure in_javascript
Wow! closure in_javascriptWow! closure in_javascript
Wow! closure in_javascriptcnlangzi
 
javascript function & closure
javascript function & closurejavascript function & closure
javascript function & closureHika Maeng
 
Asynchronous JavaScript and Promises
Asynchronous JavaScript and Promises Asynchronous JavaScript and Promises
Asynchronous JavaScript and Promises Senthil Kumar
 
#7 "Многообещающий JavaScript – Promises" Денис Речкунов
#7 "Многообещающий JavaScript – Promises" Денис Речкунов#7 "Многообещающий JavaScript – Promises" Денис Речкунов
#7 "Многообещающий JavaScript – Promises" Денис РечкуновJSib
 
App cache vs localStorage
App cache vs localStorageApp cache vs localStorage
App cache vs localStoragesenthil_hi
 
The Future starts with a Promise
The Future starts with a PromiseThe Future starts with a Promise
The Future starts with a PromiseAlexandru Nedelcu
 
Scala Future & Promises
Scala Future & PromisesScala Future & Promises
Scala Future & PromisesKnoldus Inc.
 

En vedette (20)

Promises, Promises
Promises, PromisesPromises, Promises
Promises, Promises
 
Understanding Asynchronous JavaScript
Understanding Asynchronous JavaScriptUnderstanding Asynchronous JavaScript
Understanding Asynchronous JavaScript
 
Avoiding Callback Hell with Async.js
Avoiding Callback Hell with Async.jsAvoiding Callback Hell with Async.js
Avoiding Callback Hell with Async.js
 
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...
 
Beyond the Callback: Yield Control with Javascript Generators
Beyond the Callback: Yield Control with Javascript GeneratorsBeyond the Callback: Yield Control with Javascript Generators
Beyond the Callback: Yield Control with Javascript Generators
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
Ambient Media Worldwide Ltd Jd Lr
Ambient Media Worldwide Ltd Jd LrAmbient Media Worldwide Ltd Jd Lr
Ambient Media Worldwide Ltd Jd Lr
 
JavaScript closures
JavaScript closuresJavaScript closures
JavaScript closures
 
Wow! closure in_javascript
Wow! closure in_javascriptWow! closure in_javascript
Wow! closure in_javascript
 
Callback Function
Callback FunctionCallback Function
Callback Function
 
JavaScript closures
JavaScript closuresJavaScript closures
JavaScript closures
 
javascript function & closure
javascript function & closurejavascript function & closure
javascript function & closure
 
Asynchronous JavaScript and Promises
Asynchronous JavaScript and Promises Asynchronous JavaScript and Promises
Asynchronous JavaScript and Promises
 
Closure
ClosureClosure
Closure
 
#7 "Многообещающий JavaScript – Promises" Денис Речкунов
#7 "Многообещающий JavaScript – Promises" Денис Речкунов#7 "Многообещающий JavaScript – Promises" Денис Речкунов
#7 "Многообещающий JavaScript – Promises" Денис Речкунов
 
App cache vs localStorage
App cache vs localStorageApp cache vs localStorage
App cache vs localStorage
 
Promise pattern
Promise patternPromise pattern
Promise pattern
 
The Future starts with a Promise
The Future starts with a PromiseThe Future starts with a Promise
The Future starts with a Promise
 
JavaScript Promise
JavaScript PromiseJavaScript Promise
JavaScript Promise
 
Scala Future & Promises
Scala Future & PromisesScala Future & Promises
Scala Future & Promises
 

Similaire à Callbacks, promises, generators - asynchronous javascript

Better react/redux apps using redux-saga
Better react/redux apps using redux-sagaBetter react/redux apps using redux-saga
Better react/redux apps using redux-sagaYounes (omar) Meliani
 
Promises - Asynchronous Control Flow
Promises - Asynchronous Control FlowPromises - Asynchronous Control Flow
Promises - Asynchronous Control FlowHenrique Barcelos
 
Angular promises and http
Angular promises and httpAngular promises and http
Angular promises and httpAlexe Bogdan
 
Unit Testing Express Middleware
Unit Testing Express MiddlewareUnit Testing Express Middleware
Unit Testing Express MiddlewareMorris Singer
 
Workshop 5: JavaScript testing
Workshop 5: JavaScript testingWorkshop 5: JavaScript testing
Workshop 5: JavaScript testingVisual Engineering
 
$q and Promises in AngularJS
$q and Promises in AngularJS $q and Promises in AngularJS
$q and Promises in AngularJS a_sharif
 
Testing Ember Apps: Managing Dependency
Testing Ember Apps: Managing DependencyTesting Ember Apps: Managing Dependency
Testing Ember Apps: Managing DependencyMatthew Beale
 
Promises are so passé - Tim Perry - Codemotion Milan 2016
Promises are so passé - Tim Perry - Codemotion Milan 2016Promises are so passé - Tim Perry - Codemotion Milan 2016
Promises are so passé - Tim Perry - Codemotion Milan 2016Codemotion
 
AngularJS, More Than Directives !
AngularJS, More Than Directives !AngularJS, More Than Directives !
AngularJS, More Than Directives !Gaurav Behere
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Aaron Gustafson
 
Chaining and function composition with lodash / underscore
Chaining and function composition with lodash / underscoreChaining and function composition with lodash / underscore
Chaining and function composition with lodash / underscoreNicolas Carlo
 
Asynchronous programming done right - Node.js
Asynchronous programming done right - Node.jsAsynchronous programming done right - Node.js
Asynchronous programming done right - Node.jsPiotr Pelczar
 
Javascript: the important bits
Javascript: the important bitsJavascript: the important bits
Javascript: the important bitsChris Saylor
 
FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6
FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6
FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6FrontDays
 
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiNew improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiRobert Nyman
 

Similaire à Callbacks, promises, generators - asynchronous javascript (20)

You promise?
You promise?You promise?
You promise?
 
Better react/redux apps using redux-saga
Better react/redux apps using redux-sagaBetter react/redux apps using redux-saga
Better react/redux apps using redux-saga
 
Promises - Asynchronous Control Flow
Promises - Asynchronous Control FlowPromises - Asynchronous Control Flow
Promises - Asynchronous Control Flow
 
Angular promises and http
Angular promises and httpAngular promises and http
Angular promises and http
 
Unit Testing Express Middleware
Unit Testing Express MiddlewareUnit Testing Express Middleware
Unit Testing Express Middleware
 
Workshop 5: JavaScript testing
Workshop 5: JavaScript testingWorkshop 5: JavaScript testing
Workshop 5: JavaScript testing
 
$q and Promises in AngularJS
$q and Promises in AngularJS $q and Promises in AngularJS
$q and Promises in AngularJS
 
Promises & limbo
Promises & limboPromises & limbo
Promises & limbo
 
Testing Ember Apps: Managing Dependency
Testing Ember Apps: Managing DependencyTesting Ember Apps: Managing Dependency
Testing Ember Apps: Managing Dependency
 
Promises are so passé - Tim Perry - Codemotion Milan 2016
Promises are so passé - Tim Perry - Codemotion Milan 2016Promises are so passé - Tim Perry - Codemotion Milan 2016
Promises are so passé - Tim Perry - Codemotion Milan 2016
 
AngularJS, More Than Directives !
AngularJS, More Than Directives !AngularJS, More Than Directives !
AngularJS, More Than Directives !
 
Sane Async Patterns
Sane Async PatternsSane Async Patterns
Sane Async Patterns
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
 
Chaining and function composition with lodash / underscore
Chaining and function composition with lodash / underscoreChaining and function composition with lodash / underscore
Chaining and function composition with lodash / underscore
 
Node js
Node jsNode js
Node js
 
Asynchronous programming done right - Node.js
Asynchronous programming done right - Node.jsAsynchronous programming done right - Node.js
Asynchronous programming done right - Node.js
 
Javascript: the important bits
Javascript: the important bitsJavascript: the important bits
Javascript: the important bits
 
Java script for web developer
Java script for web developerJava script for web developer
Java script for web developer
 
FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6
FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6
FrontDays #3. Иван Федяев, Эволюция JavaScript. Обзор нововведений ECMAScript 6
 
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiNew improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, Helsinki
 

Dernier

nvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptxnvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptxjasonsedano2
 
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratory
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratoryدليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratory
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide LaboratoryBahzad5
 
How to Write a Good Scientific Paper.pdf
How to Write a Good Scientific Paper.pdfHow to Write a Good Scientific Paper.pdf
How to Write a Good Scientific Paper.pdfRedhwan Qasem Shaddad
 
SUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docx
SUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docxSUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docx
SUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docxNaveenVerma126
 
Engineering Mechanics Chapter 5 Equilibrium of a Rigid Body
Engineering Mechanics  Chapter 5  Equilibrium of a Rigid BodyEngineering Mechanics  Chapter 5  Equilibrium of a Rigid Body
Engineering Mechanics Chapter 5 Equilibrium of a Rigid BodyAhmadHajasad2
 
Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)Bahzad5
 
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....santhyamuthu1
 
ASME BPVC 2023 Section I para leer y entender
ASME BPVC 2023 Section I para leer y entenderASME BPVC 2023 Section I para leer y entender
ASME BPVC 2023 Section I para leer y entenderjuancarlos286641
 
Multicomponent Spiral Wound Membrane Separation Model.pdf
Multicomponent Spiral Wound Membrane Separation Model.pdfMulticomponent Spiral Wound Membrane Separation Model.pdf
Multicomponent Spiral Wound Membrane Separation Model.pdfGiovanaGhasary1
 
Modelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovationsModelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovationsYusuf Yıldız
 
Phase noise transfer functions.pptx
Phase noise transfer      functions.pptxPhase noise transfer      functions.pptx
Phase noise transfer functions.pptxSaiGouthamSunkara
 
Nodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptxNodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptxwendy cai
 
Gender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 ProjectGender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 Projectreemakb03
 
Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...Apollo Techno Industries Pvt Ltd
 
Mohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptxMohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptxKISHAN KUMAR
 
A Seminar on Electric Vehicle Software Simulation
A Seminar on Electric Vehicle Software SimulationA Seminar on Electric Vehicle Software Simulation
A Seminar on Electric Vehicle Software SimulationMohsinKhanA
 
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdfSummer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdfNaveenVerma126
 

Dernier (20)

nvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptxnvidia AI-gtc 2024 partial slide deck.pptx
nvidia AI-gtc 2024 partial slide deck.pptx
 
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratory
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratoryدليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratory
دليل تجارب الاسفلت المختبرية - Asphalt Experiments Guide Laboratory
 
How to Write a Good Scientific Paper.pdf
How to Write a Good Scientific Paper.pdfHow to Write a Good Scientific Paper.pdf
How to Write a Good Scientific Paper.pdf
 
SUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docx
SUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docxSUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docx
SUMMER TRAINING REPORT ON BUILDING CONSTRUCTION.docx
 
Engineering Mechanics Chapter 5 Equilibrium of a Rigid Body
Engineering Mechanics  Chapter 5  Equilibrium of a Rigid BodyEngineering Mechanics  Chapter 5  Equilibrium of a Rigid Body
Engineering Mechanics Chapter 5 Equilibrium of a Rigid Body
 
Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)Lecture 1: Basics of trigonometry (surveying)
Lecture 1: Basics of trigonometry (surveying)
 
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
SATELITE COMMUNICATION UNIT 1 CEC352 REGULATION 2021 PPT BASICS OF SATELITE ....
 
Lecture 2 .pptx
Lecture 2                            .pptxLecture 2                            .pptx
Lecture 2 .pptx
 
ASME BPVC 2023 Section I para leer y entender
ASME BPVC 2023 Section I para leer y entenderASME BPVC 2023 Section I para leer y entender
ASME BPVC 2023 Section I para leer y entender
 
Multicomponent Spiral Wound Membrane Separation Model.pdf
Multicomponent Spiral Wound Membrane Separation Model.pdfMulticomponent Spiral Wound Membrane Separation Model.pdf
Multicomponent Spiral Wound Membrane Separation Model.pdf
 
計劃趕得上變化
計劃趕得上變化計劃趕得上變化
計劃趕得上變化
 
Modelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovationsModelling Guide for Timber Structures - FPInnovations
Modelling Guide for Timber Structures - FPInnovations
 
Phase noise transfer functions.pptx
Phase noise transfer      functions.pptxPhase noise transfer      functions.pptx
Phase noise transfer functions.pptx
 
Nodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptxNodal seismic construction requirements.pptx
Nodal seismic construction requirements.pptx
 
Gender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 ProjectGender Bias in Engineer, Honors 203 Project
Gender Bias in Engineer, Honors 203 Project
 
Litature Review: Research Paper work for Engineering
Litature Review: Research Paper work for EngineeringLitature Review: Research Paper work for Engineering
Litature Review: Research Paper work for Engineering
 
Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...Technology Features of Apollo HDD Machine, Its Technical Specification with C...
Technology Features of Apollo HDD Machine, Its Technical Specification with C...
 
Mohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptxMohs Scale of Hardness, Hardness Scale.pptx
Mohs Scale of Hardness, Hardness Scale.pptx
 
A Seminar on Electric Vehicle Software Simulation
A Seminar on Electric Vehicle Software SimulationA Seminar on Electric Vehicle Software Simulation
A Seminar on Electric Vehicle Software Simulation
 
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdfSummer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
Summer training report on BUILDING CONSTRUCTION for DIPLOMA Students.pdf
 

Callbacks, promises, generators - asynchronous javascript

  • 2. callbacks, promises, generators Asynchronous code ! var result = asyncFunction(); // you won't get result immediately typeof result === 'undefined'; // true
  • 3. callbacks, promises, generators Callbacks asyncFunction(function() { // i’ll be called when the execution ends ! // where is the result? // there was any error? });
  • 4. callbacks, promises, generators 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 });
  • 5. callbacks, promises, generators Callbacks - Own patterns - DON’t do it var asyncFunction = function(callback) { setTimeout(function() { callback({tasty: 'sandwich'}); }, 50); }; ! asyncFunction(function(result) { result; // {tasty: 'sandwich'} ! // but... what about errors? });
  • 6. callbacks, promises, generators Callbacks - Own patterns - DON’t do it
  • 7. callbacks, promises, generators Callbacks - Callback-based function
  • 9. callbacks, promises, generators Callbacks - Callback hell var fetchResultFromDb = function(callback) { db.fetch(function(error, result) { if (error) { callback(error); return; } ! serializeResult(result, function(error, result) { if (error) { callback(error); return; } callback(null, result); // finally! }); }); }; ! fetchResultFromDb(function(error, result) { if (error) { console.error(error); return; } ! result; // end result });
  • 11. callbacks, promises, generators Callbacks - Callback hell var function1 = function (callback) { function2(function(error, result) { if (error) { callback(error); return; } ! function3(result, function(error, result) { if (error) { callback(error); return; } ! function4(result, function(error, result) { if (error) { callback(error); return; } ! function5(result, function(error, result) { // ... }); }); }); }); };
  • 12. callbacks, promises, generators Callbacks - Callback hell - map - var map = function(input, callback) { var results = [], handleIterationResult = function(error, result) { if (error) { callback(error); return; } 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
  • 15. callbacks, promises, generators Callbacks - Introducing async ASYNC by Caolan McMahon „Higher-order functions and common patterns for asynchronous code”
  • 16. callbacks, promises, generators 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 });
  • 17. callbacks, promises, generators Callbacks - async waterfall var fetchResultFromDb = function(callback) { async.waterfall([ db.fetch.bind(db), // to preserve function context serializeResult ], callback); }; ! fetchResultFromDb(function(error, result) { if (error) { console.error(error); return; } result; });
  • 18. callbacks, promises, generators Callbacks - async MAP var sum = function(num, callback) { callback(null, num + num); }; ! async.map([1, 2, 3, 4, 5], sum, function(error, result) { if (error) { console.error(error); return; } result; // [2, 4, 6, 8, 10] });
  • 20. callbacks, promises, generators Callbacks - asynC Collections each, map, filter, reduce, some ... Control flow series, parallel, waterfall, compose ...
  • 21. callbacks, promises, generators Promises According to Promises/A+ specification „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
  • 22. callbacks, promises, generators Promises var promise = promisedFunction(); ! typeof promise !== 'undefined'; // true 'then' in promise; // true
  • 23. callbacks, promises, generators Promises - introducing Q Q by Kris Kowal „A tool for making and composing asynchronous promises in JavaScript”
  • 24. callbacks, promises, generators Promises - Promise-based function var promisedFunction = function() { var defer = Q.defer(); ! setTimeout(function() { ! // 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 };
  • 25. callbacks, promises, generators Promises - basic usage ! var promise = promisedFunction(); ! promise.then(function(result) { // handle result }, function(error) { // handle error }); ! // more "listeners" promise.then(onSuccess, onError); // ...
  • 26. callbacks, promises, generators Promises - fulfilling by promise Q.fcall(function() { var defer = Q.defer(); setTimeout(function() { defer.resolve(['tasty']); }, 50); return defer.promise; }) .then(function(result) { var defer = Q.defer(); setTimeout(function() { defer.resolve(result.concat(['sandwich'])); }, 50); return defer.promise; }) .then(function(result) { result; // ['tasty', 'sandwich'] }, function(error) { // handling error }); Remember waterfall pattern from async library?
  • 27. callbacks, promises, generators Promises - fulfilling by promise
  • 28. callbacks, promises, generators Promises - COnverting callback-based functions var callbackBasedFunction = function(callback) { setTimeout(function() { callback(null, {tasty: 'sandwich'}); }, 50); }; ! var promiseBasedFunction = Q.denodeify(callbackBasedFunction); ! promiseBasedFunction() .then(function(result) { result; // {tasty: 'sandwich'} });
  • 29. callbacks, promises, generators Promises - previous waterfall example var fetchFromDb = function() { return Q.ninvoke(db, 'fetch') .then(Q.denodeify(serializeResults)); }; ! fetchFromDb() .then(function(result) { result; }); You have to convert each callback-based function into promise-based for chaining
  • 30. callbacks, promises, generators 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.
  • 31. callbacks, promises, generators 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.”
  • 32. callbacks, promises, generators Promises AND NPM packages Always expose your package API as callback-based functions! It’s a standard
  • 34. callbacks, promises, 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 }
  • 36. callbacks, promises, generators Generators + promise var promisedStep = Q.denodeify(function(callback) { setTimeout(function() { callback(null, {tasty: 'sandwich'}); }, 50); }); ! var generatorFunction = function*() { var result = yield promisedStep; result; // {tasty: 'sandwich'} }; ! var gen = generatorFunction(); var result = gen.next(); result.value() .then(function(result) { gen.next(result); }, function(error) { gen.throw(error); });
  • 37. callbacks, promises, generators Generators + Exceptions var promisedStep = Q.denodeify(function(callback) { setTimeout(function() { callback(new Error('No butter!')); }, 50); }); ! var generatorFunction = function*() { try { var result = yield promisedStep; } catch (error) { error; // [Error: No butter!] } }; ! var gen = generatorFunction(); ! var result = gen.next(); result.value() .then(function(result) { gen.next(result); }, function(error) { gen.throw(error); });
  • 39. callbacks, promises, generators Generators - introducing CO CO by TJ Holowaychuk „The ultimate generator based flow-control goodness for nodejs (supports thunks, promises, etc)”
  • 40. callbacks, promises, generators Generators - CO var fetchResultFromDb = function*() { var records = yield thunkify(db.fetch.bind(db))(); return yield thunkify(serializeResults)(records); }; ! co(function*() { var result = yield fetchResultFromDb; })();
  • 41. callbacks, promises, generators Generators - THUNK var asyncFunction = function(arg1, arg2, calback) { setTimeout(function() { callback(null, {tasty: 'sandwich with '+arg1+' and '+arg2}) }, 50); }; co(function*() { yield asyncFunction; // what about arguments? yield asyncFunction.bind(undefined, 'butter', 'cheese'); })();
  • 42. callbacks, promises, generators 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) { });
  • 43. callbacks, promises, generators 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 ] })();
  • 45. callbacks, promises, generators Generators - NOT YET! Supported by firefox and chrome (disabled by default) Node.js 0.11.* - not stable yet
  • 46. callbacks, promises, generators CONCLUSIONs You need a library for asynchronous code Use callback-based functions for public API Pick solution that is fine for you and your team
  • 47. callbacks, promises, generators More informations Promises/A+ Performance Hits You Should Be Aware Of https://github.com/substack/node-seq http://wiki.commonjs.org/wiki/Promises
  • 49. callbacks, promises, generators Font „Blue Highway” from http://typodermicfonts.com/ Thanks!