Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser, and activate Javascript


aka "How to free yourself from the callbacks pyramid and organise async code ?"

  • Khalid Jebbari
  • Paris.js #28
  • March 27th, 2013

The problem (1/2)

Code writing (in editor) and code execution (in time) have a one-one relation in synchronous (blocking) languages.

The coder expects its code to be executed in the same order it's written.

No longer true in asynchronous code.

Why so asynchronous ?


High-order function:
Function that takes anothter function as a parameter.
Callback :
Function that is passed to another function.
A reference to executable code, or a piece of executable code, that is passed as an argument to other code. Wikipedia
Asynchronous callback :
Callback that will be executed later.
Deferred callbacks are often used in the context of I/O operations or event handling. Wikipedia

The classical async example

But then how do I return the value ? - With a callback.

The callbacks pyramid aka Pyramid of Doom®

The problem (2/2)

async.js to the rescue

The toolbox to manage any asynchronous code flow


Equivalent of Array.forEach with asynchronous iterations.

Equivalent of with asynchronous transformations

Other async.js helpers

Check the API, you will find something for your use case

THE killer feature

What's ?

A simple way to describe an asynchronous dependency graph. in action's pro tip®

Don't mess with the results variable.

Use it, don't change it. You've been warned.

That's all folks ! Questions ?

async.js :

Slides : (feel free to read & fork !)

Me : Khalid Jebbari ; Twitter : @Dj3bbZ

Powered by CodeMirror, CodeMirror Movie, Impress.js and Foundation

Special credits to Sergey Chikuyonok (CodeMirror Movie author) for his support !