Javascript

Control Flow







Mordechai Tikotzky / @tikotzky
Developer @ QualityBath.com
6/10/14

What Is JavaScript?

  1. Asynchronous
  2. Everywhere
  3. Awesome
  4. Not PHP 😜
☜
☞

Why is asynchronicity good?

Lets try scraping multiple sites
synchronous code execution...
asynchronous code execution...

Why is asynchronicity bad?




  1. harder to follow code
  2. call stack gets reset
  3. ?????????

Let's make async easy



Async.js

async.waterfall()
async.parallel()

before async.waterfall()


function getFromDB(callback){
    //read from DB and invoke the callback when done
    callback(null, 'google.com', 21);
}

function scrapeUrl(arg1, arg2, callback){
    //arg1 now equals 'google.com' and arg2 now equals '21'
    callback(null, 'three');
}

function saveResults(result, callback){
    //result now equals 'three'
    callback(null, 'done');
}









getFromDB(function(err, url, id){
    if (err) return console.log(err);
    scrapeUrl(url, id, function(err, result){
        if (err) return console.log(err);
        saveResults(result, function(err, result){
            if (err) return console.log(err);
            console.log(result);
        });
    });
});
JSbin

after async.waterfall()


function getFromDB(callback){
    //read from DB and invoke the callback when done
    callback(null, 'google.com', 21);
}

function scrapeUrl(arg1, arg2, callback){
    //arg1 now equals 'google.com' and arg2 now equals '21'
    callback(null, 'three');
}

function saveResults(result, callback){
    //result now equals 'three'
    callback(null, 'done');
}









async.waterfall([
    getFromDB,
    scrapeUrl,
    saveResults
], 
function (err, result) {
   if (err) return console.log(err);
   console.log(result);
});
JSbin

before async.parallel()


function taskOne(callback){
    setTimeout(function(){
        callback(null, 'one');
    }, 200);
}

function taskTwo(callback){
    setTimeout(function(){
        callback(null, 'two');
    }, 100);
}

function done(err, results){
    if (err) console.log(err);
    console.log(results);
}


var counter = 0;
var results = [];
taskOne(function(err, result){
    if (err) return done(err);
    results[0] = result;
    if (++counter == 2) {
        done(null, results);
    }
});

taskTwo(function(err, result){
    if (err) return done(err);
    results[1] = result;
    if (++counter == 2) {
        done(null, results);
    }
});
JSbin

after async.parallel()


function taskOne(callback){
    setTimeout(function(){
        callback(null, 'one');
    }, 200);
}

function taskTwo(callback){
    setTimeout(function(){
        callback(null, 'two');
    }, 100);
}

function done(err, results){
    if (err) console.log(err);
    console.log(results);
}


async.parallel([
    taskOne,
    taskTwo
], done);
JSbin

async.waterfall() + async.parallel()

scraping multiple sites


function getFromDB(callback){
    callback(null, ['google.com', 'yahoo.com', 'apple.com']);
}

function scrapeUrl(arg1, callback){
    callback(null, arg1+'-response');
}

function saveResults(results, callback){
    callback(null, results);
}

function scrapeUrls(urls, callback){
    //urls now equals ['google.com', 'yahoo.com', 'apple.com']
    var scrapes = urls.map(function(url){
        return function(callback) {
          scrapeUrl(url, callback);
        };
    });
    async.parallel(scrapes, callback);
}

async.waterfall([
    getFromDB,
    scrapeUrls,
    saveResults
], 
function (err, result) {
   if (err) return console.log(err);
   console.log(result);
});
JSbin

async.waterfall() + async.map()

scraping multiple sites


function getFromDB(callback){
    callback(null, ['google.com', 'yahoo.com', 'apple.com']);
}

function scrapeUrl(arg1, callback){
    callback(null, arg1+'-response');
}

function saveResults(results, callback){
    callback(null, results);
}

function scrapeUrls(urls, callback){
    async.map(urls, scrapeUrl, callback);
}

async.waterfall([
    getFromDB,
    scrapeUrls,
    saveResults
], 
function (err, result) {
   if (err) return console.log(err);
   console.log(result);
});
JSbin

Promises?




Lets save that for another time 😀




THANK YOU