rethinking async in javascript

This post is more like a drama script. I would love to see the below conversation as a one-act play on a stage!

Master: Can you write a function to read a contents of a file?

Apprentice: hmm.. that's very easy!

function read(filename){
  return fs.readFileSync(filename, 'utf8');
}

Master: Okies....say the file is like 10GB in size?

Apprentice:

function read(filename, callback){
  fs.readFile(filename, 'utf8', function (err, res){
    if (err) {
     return callback(err);
    }
    callback(null,res);
  });
}

Master: OK, not bad...now process that file.

Apprentice:

function process(file){
  /* Some processing stuff */
}

function read(filename, callback){
  fs.readFile(filename, 'utf8', function (err, res){
    if (err) {
     return callback(err);
    }
    try {
      callback(null, process(res));
    } catch (ex) {
      callback(ex);
    }
  });
}

function read(filename, callback){
  fs.readFile(filename, 'utf8', function (err, res){
    if (err) {
     return callback(err);
    }
    try {
      res = process(res);
    } catch (ex) {
      return callback(ex);
    }
    callback(null, res);
  });
}

Master: Takes a gasp and talks about

how do we avoid callback hell?

Name your functions.
Keep your code shallow.
Modularize!
Binding this

Apprentice: Makes a sad face.

Master: When you know...then you know!

Let us make a promise!

fulfilled
rejected
pending
settled

var promise = new Promise(function(resolve, reject) {
  // Some async...
  if (/* Allz well*/) {
    resolve("It worked!");
  }
  else {
    reject(Error("It did not work :'("));
  }
});

promise.then(function(result) {
  console.log(result); // "It worked!"
}, function(err) {
  console.log(err); // Error: "It don not work :'("
});

async1().then(function() {
  return async2();
}).then(function() {
  return async3();
}).catch(function(err) {
  return asyncHeal1();
}).then(function() {
  return asyncHeal4();
}, function(err) {
  return asyncHeal2();
}).catch(function(err) {
  console.log("Ignore them");
}).then(function() {
  console.log("I'm done!");
});

Let us talk about async map:

async.map(['file1','file2','file3'], fs.stat, function(err, results){
    // results is now an array of stats for each file
});

async.filter(['file1','file2','file3'], fs.exists, function(results){
    // results now equals an array of the existing files
});

async.parallel([
    function(){ ... },
    function(){ ... }
], callback);

async.series([
    function(){ ... },
    function(){ ... }
]);

A: Happ(Y)ily ever after?

M: No! We have some more issues:

Streams are broken, callbacks are not great to work with, errors are vague, tooling is not great, community convention is sort of there..

you may get duplicate callbacks
you may not get a callback at all (lost in limbo)
you may get out-of-band errors
emitters may get multiple “error” events
missing “error” events sends everything to hell
often unsure what requires “error” handlers
“error” handlers are very verbose
callbacks suck

Master: Let us talk about generators:

function *Counter(){
 let n = 0;
 while(1<2) {
   yield n;
   n = n + 1;
 }
}

let CountIter = Counter();

CountIter.next();
// Would result in { value: 0, done: false }

// Again 
CountIter.next();
//Would result in { value: 1, done: false }

function *fibonacci() {
    let [prev, curr] = [0, 1];
    for (;;) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (fib of fibonacci()) {
    if (fib === 42)
        break;
    console.log(fib);
}

function *powPuff() {
  return Math.pow((yield "x"), (yield "y"));
}

let puff = powPuff()

puff.next();

puff.next(2);

puff.next(3); // Guess ;)

function* menu(){
  while (true){
    var val = yield null;
    console.log('I ate:', val);
  }
}


let meEat = menu();

meEat.next();

meEat.next("Poori");

meEat.next("Pizza");

meEat.throw(new Error("Burp!"));

function* menu(){
  while (true){
    try{
      var val = yield null;
      console.log('I ate: ', val);
    }catch(e){
      console.log('Good, now pay the bill :P');
    }
  }
}

meEat.throw(new Error("Burp!"));

M: We can delegate!

var inorder = function* inorder(node) {
  if (node) {
    yield* inorder(node.left);
    yield node.label;
    yield* inorder(node.right);
  }
}

A: Confused

M: Deeper you must go! Hmmm

function *theAnswer() {
  yield 42;
}

var ans = theAnswer();

ans.next();

A: MORE CONFUSED

M: So....

function theAnswer() {
  var state = 0;
  return {
    next: function() {
      switch (state) {
        case 0:
          state = 1;
          return {
            value: 42, // The yielded value.
            done: false
          };
        case 1:
          return {
            value: undefined,
            done: true
          };
      }
    }
  };
}

M: But, this has not yet solved the initial issue!

M: Let us assume a function named run ~_~

run(genFunc){
 /*
   _ __ ___ __ _ __ _(_) ___ 
 | '_ ` _ \ / _` |/ _` | |/ __|
 | | | | | | (_| | (_| | | (__ 
 |_| |_| |_|\__,_|\__, |_|\___|
                  |___/        
 */
}

run(function *(){
  var data = yield read('package.json');
  var result = yield process(data);
  console.log(data);
  console.log(result);
});

var fs = require(‘fs’);

function run(fn) {
  var gen = fn();

  function next(err, res) {
    var ret = gen.next(res);
    if (ret.done) return;
    ret.value(next);
  }

  next();
}

A: WOW!

M: HMM, let us talk about THUNKS!

A: Thunks??!

let timeoutThunk = (ms) => (cb) => setTimeout(cb,ms)

function readFile(path) {
    return function(callback) {
        fs.readFile(path, callback);
    };
}

Instead of :

readFile(path, function(err, result) { ... });

We now have:

readFile(path)(function(err, result) { ... });

So that:

var data = yield read('package.json');

Master: Baaazinga!

M: More usecases! Generator-based flow control.

A: Very eager.

$ npm install thunkify

Turn a regular node function into one which returns a thunk!

var thunkify = require('thunkify');
var fs = require('fs');

var read = thunkify(fs.readFile);

read('package.json', 'utf8')(function(err, str){

});

$ npm install co

Write non-blocking code in a nice-ish way!

var co = require('co');
var thunkify = require('thunkify');
var request = require('request');
var get = thunkify(request.get);

co(function *(){
  try {
    var res = yield get('http://badhost.invalid');
    console.log(res);
  } catch(e) {
    console.log(e.code) // ENOTFOUND
 }
}());

var urls = [/* Huge list */];

// sequential

co(function *(){
  for (var i = 0; i < urls.length; i++) {
    var url = urls[i];
    var res = yield get(url);
    console.log('%s -> %s', url, res[0].statusCode);
  }
})()

// parallel

co(function *(){
  var reqs = urls.map(function(url){
    return get(url);
  });

  var codes = (yield reqs).map(function(r){ return r.statusCode });

  console.log(codes);
})()

M: Interesting? What more?

$ npm install co-sleep

var sleep = require('co-sleep');
var co = require('co');

co(function *() {
  var now = Date.now();
  // wait for 1000 ms
  yield sleep(1000);
  expect(Date.now() - now).to.not.be.below(1000);
})();

$ npm install co-ssh

var ssh = require('co-ssh');

var c = ssh({
  host: 'n.n.n.n',
  user: 'myuser',
  key: read(process.env.HOME + '/.ssh/some.pem')
});

yield c.connect();
yield c.exec('foo');
yield c.exec('bar');
yield c.exec('baz');

var monk = require('monk');
var wrap = require('co-monk'); // co-monk!
var db = monk('localhost/test');

var users = wrap(db.get('users'));

yield users.remove({});

yield users.insert({ name: 'Hemanth', species: 'Cat' });

// Par||el!
yield [
  users.insert({ name: 'Tom', species: 'Cat' }),
  users.insert({ name: 'Jerry', species: 'Rat' }),
  users.insert({ name: 'Goffy', species: 'Dog' })
];

$ npm install suspend

var suspend = require('suspend'),
    resume = suspend.resume;

suspend(function*() {
    var data = yield fs.readFile(__filename, 'utf8', resume());
    console.log(data);
})();

var readFile = require('thunkify')(require('fs').readFile);

suspend(function*() {
    var package = JSON.parse(yield readFile('package.json', 'utf8'));
    console.log(package.name);
});

A: Is that all? Can I go home now?

M: No!?

M: Koa FTW?!

$ npm install koa

var koa = require('koa');
var app = koa();

// logger

app.use(function *(next){
  var start = new Date;
  yield next;
  var ms = new Date - start;
  console.log('%s %s - %s', this.method, this.url, ms);
});

// response

app.use(function *(){
  this.body = 'Hello World';
});

app.listen(3000);

A: Something for the client?

M: Hmmm, good question, we have Task.js

generators + promises = tasks

<script type="application/javascript" src="task.js"></script>

<!-- 'yield' and 'let' keywords require version opt-in -->
<script type="application/javascript;version=1.8">
function hello() {
    let { spawn, sleep } = task;
    spawn(function() { // Firefox does not yet use the function* syntax
        alert("Hello...");
        yield sleep(1000);
        alert("...world!");
    });
}
</script>

M: Sweet and simple!

spawn(function*() {
    try {
        var [foo, bar] = yield join(read("foo.json"),
                                    read("bar.json")).timeout(1000);
        render(foo);
        render(bar);
    } catch (e) {
        console.log("read failed: " + e);
    }
});

var foo, bar;
var tid = setTimeout(function() { failure(new Error("timed out")) }, 1000);

var xhr1 = makeXHR("foo.json",
                   function(txt) { foo = txt; success() },
                   function(err) { failure() });
var xhr2 = makeXHR("bar.json",
                   function(txt) { bar = txt; success() },
                   function(e) { failure(e) });

function success() {
    if (typeof foo === "string" && typeof bar === "string") {
        cancelTimeout(tid);
        xhr1 = xhr2 = null;
        render(foo);
        render(bar);
    }
}

function failure(e) {
    xhr1 && xhr1.abort();
    xhr1 = null;
    xhr2 && xhr2.abort();
    xhr2 = null;
    console.log("read failed: " + e);
}

A: Thank you master I feel enlightened!

M: Are you sure?

A: Hmmm....

M: This is just the beginning!

M: Let me talk about async-await

async function <name>?<argumentlist><body>

=>

function <name>?<argumentlist>{ return spawn(function*() <body>); }

Example of animating elements with Promise:

function chainAnimationsPromise(elem, animations) {
    var ret = null;
    var p = currentPromise;
    animations.forEach(function(anim){
      p = p.then(function(val) {
            ret = val;
            return anim(elem);
        });
    });

    return p.catch(function(e) {
        /* ignore and keep going */
    }).then(function() {
        return ret;
    });
}

Same example with task.js:

function chainAnimationsGenerator(elem, animations) {
    return spawn(function*() {
        var ret = null;
        try {
            for(var anim of animations) {
                ret = yield anim(elem);
            }
        } catch(e) { /* ignore and keep going */ }
        return ret;
    });
}

Same example with async/await:

async function chainAnimationsAsync(elem, animations) {
    var ret = null;
    try {
        for(var anim of animations) {
            ret = await anim(elem);
        }
    } catch(e) { /* ignore and keep going */ }
    return ret;
}

Another example from the draft:

async function getData() {
  var items = await fetchAsync('http://example.com/users');
  return await* items.map(async(item) => {
    return {
      title: item.title,
      img: (await fetchAsync(item.userDataUrl)).img
    }
  }
}

M: Now let us do a performance review.

A: Runs away!!

Hope you liked the play! You might also like reading Are you async yet? post.

Hemanth.HM

A Computer Polyglot, CLI + WEB ♥'r.

Rethinking Async in Javascript

Comments