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

async.js

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

Khalid Jebbari
Paris.js #28
March 27^th, 2013
@Dj3bbZ

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.

Definitions

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®

|
@@@
type: { text: "ajaxRequest(url, function(err, response) {\n\n" } ::: Typing code

run: { command: "indentAuto", beforeDelay: 0 }

type: { text: "if (err) errorHandler(err); // Custom error management\n\n" }

run: { command: "indentAuto", beforeDelay: 0 }

type: { text: "var coolResponse = process(response);\n\n" }

run: { command: "indentAuto", beforeDelay: 0 }

type: { text: "saveSomewhere(coolResponse, function(err, dbHandler) {\n\n" }

run: { command: "indentAuto", beforeDelay: 0 }

type: { text: "if (err) errorHandler(new Error('shit not saved'));\n\n" }

run: { command: "indentAuto", beforeDelay: 0 }

type: { text: "dbHandler.getSomeData(condition, function(err, results) {\n\n" }

run: { command: "indentAuto", beforeDelay: 0 }

type: { text: "if (err) errorHandler(new Error('Lost'));\n\n" }

run: { command: "indentAuto", beforeDelay: 0 }

type: { text: "/* Continue till you reach right side of screen ... */\n\n" }

run: { command: "indentAuto", beforeDelay: 0 }

type: { text: "});\n\n"}

run: { command: "indentAuto", beforeDelay: 0 }

type: { text: "});\n\n" }

run: { command: "indentAuto", beforeDelay: 0 }

type: { text: "});\n\n\n" }

run: { command: "indentAuto", beforeDelay: 0 }

type: { text: "// Can't use this part of code" } ::: Problem : unusable part of code

The problem (2/2)

Prisoner of the callbacks
Code flow derived from 1:1 between code/execution
Human is used to read code in one plan

async.js to the rescue

The toolbox to manage any asynchronous code flow

async.each

Equivalent of Array.forEach with asynchronous iterations.

var ids = [1, 3, 22, 89];
async.each(ids, function(id, next) {
    var url = "http://example.com/post/" + id;
    $.ajax(url)
        .fail(function(jqXHR, textStatus, err) {
            next(err); // exit the loop and move to the final callback
        })
        .done(function(data) {
            process(data);
            next(); // or next(null) -> next loop iteration
        });
}, function(err) {
    // Always manage errors
    if (err) errorHandler(err);

// Continue after all Ajax requests succeeded
    // ...
});
@@@
tooltip: { text: "async.each iterates through the `ids` array", pos: "0:15", hideDelay: 2000} ::: Iteration

tooltip: { text: "Each `id` is passed through an iterator...", pos: "1:20", hideDelay: 2000}

tooltip: { text: "which is passed a callback by async", pos: "1:31", hideDelay: 2000}

tooltip: { text: "When the callback is called with an error...", pos: "5:14", hideDelay: 2000}

tooltip: { text: "...the loop exits and moves to the final callback", pos: "11:8", hideDelay: 2000}

tooltip: { text: "When called without params, it moves to the next loop iteration", pos: "9:15", hideDelay: 2000}

tooltip: { text: "Nothing guarantees the order of execution of loop iterations", pos: "1:20", hideDelay: 2000} ::: Order

tooltip: { text: "Ajax responses may arrive and be processed in any order", pos: "3:8", hideDelay: 2000}

async.map

Equivalent of Array.map with asynchronous transformations

var ids = [1, 3, 22, 89];
async.map(ids, function(id, next) {
    var url = "http://example.com/post/" + id;
    $.ajax(url)
        .fail(function() {
            next(new Error("Something's wrong with " + url)); // exit the loop and move to the final callback
        })
        .done(function(data) {
            var post = process(data);
            next(null, post); // next loop transformation
        });
}, function(err, results) {
    // Always manage errors
    if (err) return errorHandler(err); // return is just a way of stopping execution, YMMV

// results is an array of posts
    // in the same order than the `ids` array
    // ...
});
@@@
tooltip: { text: "async.map is passed an array...", pos: "1:13", HideDelay: 2000 } ::: Transformation

tooltip: { text: "...and an async tranformation function...", pos: "1:19", HideDelay: 2000 }

tooltip: { text: "...and will return an array.", pos: "11:21", HideDelay: 2000 }

tooltip: { text: "The transformation function can be executed in any order...", pos: "3:8", HideDelay: 2000 } ::: Results order

tooltip: { text: "...but the results array is guaranteed to have the same order than the input one.", pos: "11:21", HideDelay: 2000 }

Other async.js helpers

filter, reduce and others from ECMA 5
eachSeries, mapSeries etc. to guarantee order of execution
eachLimit, mapLimit, etc. to limit # of parallel iterators
series, parallel, waterfall, queue, compose, memoize, ...

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

`async.auto`

THE killer feature

What's `async.auto` ?

A simple way to describe an asynchronous dependency graph.

Helps writing an asynchronous multi-steps algorithm
Helps managing dependencies between those steps
Manages the order of steps
Gives you the results of all steps at the end

`async.auto` in action

async.auto({
  posts: function(next) {
    $.ajax(url, function(err, results) {
        if(err) return next(err);
        next(null, results);
    });
  },
  coolPosts: ['posts', function(next, results) {
    var coolPosts = preparePosts(resulsts.posts);
  }],
  freeBeer: function(next) {
    freeBeer4All();
  }
}, function(err, results) {
  if (err) return errorHandler(err);

// Use results
  results.posts;
  results.coolPosts;
  results.freeBeer;
@@@
tooltip: { text: "Call async.auto with an object parameter", pos: "0:8", hideDelay: 2000 } ::: Steps

tooltip: { text: "Each key-value of this object...", pos: "1:5", hideDelay: 2000 }

tooltip: { text: "...is a step of the async algorithm...", pos: "7:5", hideDelay: 2000 }

tooltip: { text: "...where the key names the step.", pos: "10:5", hideDelay: 2000 }

tooltip: { text: "Each step is a function which is passed a callback by async", pos: "1:23", hideDelay: 2000 }

tooltip: { text: "As usual, if something goes wrong the callback should be called with the error", pos: "3:34", hideDelay: 2000 }

tooltip: { text: "Otherwise pass `null` as the error and the data you need for others steps", pos: "4:27", hideDelay: 3000 }

tooltip: { text: "Dependencies are described using an array syntax...", pos: "7:14", hideDelay: 2000 } ::: Dependencies

tooltip: { text: "...where the string(s) is(are) the dependencie(s) of the current step.", pos: "7:18", hideDelay: 2000 }

tooltip: { text: "We can use the results of dependencies as they're already finished", pos: "8:45", hideDelay: 3000 }

tooltip: { text: "The optional final callback is passed the results of all steps", pos: "13:21", hideDelay: 2000 } ::: Final callback

`async.auto`'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 : https://github.com/caolan/async

Slides : https://github.com/DjebbZ/async-paris-js (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 !