Geneza tematu

• bezpłatne warsztaty dla developerów
• doświadczeni programiści,
  a kod w NodeJS na poziomie...
• dlaczego?

Dlaczego?

• całe API jest asynchroniczne (3 wyjątki – require, fs.writeFileSync, fs.readFileSync)
• zupełnie na odwrót niż w CSJS

• fs.readFile('sth.json', function (err, data) {
      if (err) return console.log('ups!');
      console.log(data);
  });

Gdzie ta pułapka?

Złap errora – def czy call?

try {
    var fn = function () {
        throw new Error();
    };
}
catch (err) {
    console.log('def', err);
}
 
try {
    setTimeout(fn, 1);
}
catch (err) {
    console.log('call', err);
}

Ups!

dziurawy catch...

Ups!

...wywala nam serwer...

Ups!

process.on('uncaughtException', function (err) {
    console.log('ups', err);
});

Ups!

Node'owa konwencja: fs.writeFile('sth', function (err, result) {});

Incepcja

• załóżmy, że tworzymy stronę w Expressie
• pobieramy z bazy artykuł po tytule
• pobieramy do niego komentarze
• i listę tagów
• to proste!

Incepcja

Synchroniczne API:

app.get('/post/:title', function (req, res) {
    var post = db.getPostByTitle(req.params.title);
    var comments = post.getComments();
    var tags = post.getTags();
 
    res.render({
        post: post,
        comments: comments,
        tags: tags
    });
});

Incepcja

Asynchroniczne API:

app.get('/post/:title', function (req, res) {
    db.getPostByTitle(req.params.title, function (err, post) {
        post.getComments(function (err, comments) {
            post.getTags(function (err, tags) {
                res.render({
                    post: post,
                    comments: comments,
                    tags: tags
                });
            })
        });
    });
});

Incepcja – wyjątki

Synchroniczne API:

app.get('/post/:title', function (req, res) {
    try {
        var post = db.getPostByTitle(req.params.title);
        var comments = post.getComments();
        var tags = post.getTags();
 
        res.render({
            post: post,
            comments: comments,
            tags: tags
        });
    }
    catch (err) {
        res.render500(err);
    }
});

Incepcja – wyjątki

Asynchroniczne API:

app.get('/post/:title', function (req, res) {
    db.getPostByTitle(req.params.title, function (err, post) {
        if (err) return res.render500(err);
        post.getComments(function (err, comments) {
            if (err) return res.render500(err);
            post.getTags(function (err, tags) {
                if (err) return res.render500(err);
                res.render({
                    post: post,
                    comments: comments,
                    tags: tags
                });
            })
        });
    });
});

Synchronizacja

Konkatenacja plików w katalogu:

1. odczytanie listy plików w katalogu
2. odczytanie zawartości każdego z plików
3. synchronizacja callbacków!
4. połączenie zawartości
5. zapisanie pliku wynikowego

Synchronizacja

fs.readdir(__dirname, function (err, names) {
    var l = names.length, opened = 0, content = [];
    names.forEach(function (name, i) {
        fs.readFile(name, 'utf-8', function (err, c) {
            content[i] = c;
            if (++opened === l) write();
        });
    });
    var write = function () {
        fs.writeFile('lib.js', content.join("\n"), function (err) {
            console.log('done');
        });
    };
});

Synchronizacja

fs.readdir(__dirname, function (err, names) {
    var l = names.length, opened = 0, content = [];
    names.forEach(function (name, i) {
        fs.readFile(name, 'utf-8', function (err, c) { 
            content[i] = c;
            if (++opened === l) write();
        });
    });
    var write = function () { 
        fs.writeFile('lib.js', content.join("\n"), function (err) { 
            console.log('done');
        });
    };
});

Kto nas uratuje z pułapki?

Ktoś kto...

• obsłuży błędy
• zsynchronizuje asynchroniczne callbacki
• zlikwiduje zagnieżdżenia
• skróci kod

Bruce!

• • https://github.com/caolan/async
  • https://github.com/medikoo/deferred
  • https://github.com/kriskowal/q
  • https://github.com/creationix/step
  • https://github.com/willconant/flow-js
  • https://github.com/fjakobs/async.js
  • https://github.com/kriszyp/node-promise
  • https://github.com/laverdet/node-fibers
  • ... itd., itp.

Async

• series(tasks, [callback]) – Run an array of functions in series, each one running once the previous function has completed.
• parallel(tasks, [callback]) – Run an array of functions in parallel, without waiting until the previous function has completed.
• waterfall(tasks, [callback]) – Runs an array of functions in series, each passing their results to the next in the array.
• i wiele innych

Async

async.parallel([
    function(callback){
        setTimeout(function () {
            callback(null, 'one');
        }, 200);
    },
    function(callback){
        setTimeout(function () {
            callback(null, 'two');
        }, 100);
    },
],
function (err, results) {
    results; // -> ['two', 'one']
});

Async

app.get('/post/:title', function (req, res) {
    async.waterfall([
        db.getPostByTitle.bind(db, req.params.title),
        function (post, callback) {
            async.parallel({
                c: post.getComments.bind(post),
                t: post.getTags.bind(post)
            },
            function (err, results) {
                callback(err, post, results.c, results.t);
            });
        }
    ],
    function (err, post, comments, tags) {
        if (err) return res.render500(err);
        res.render({ ... });
    });
});

Deferred i promise'y

Załóżmy, że mamy asynchroniczną funkcję:

var oneOneSecondLater = function (callback) {
    setTimeout(function () {
        callback(1);
    }, 1000);
};
 
oneOneSecondLater(function (v) { console.log(v); });

• musimy zagnieżdżać wywołania
• nie możemy przekazać "stanu odroczenia" jako wartości

Deferred i promise'y

Spróbujmy inaczej:

var maybeOneOneSecondLater = function () {
    var callback;
    setTimeout(function () {
        callback(1);
    }, 1000);
    return {
        then: function (_callback) {
            callback = _callback;
        }
    };
};
 
maybeOneOneSecondLater().then(function (v) {
    console.log(v);
});

całość rozmyślań u Krisa Kowala (https://github.com/kriskowal/q/blob/master/design/README.js)

Deferred i promise'y

• https://github.com/medikoo/deferred
• made in Poland
• zainspirowany przez implementację Krisa Kowala i innych
• ciekawie współpracuje z es5-ext (https://github.com/medikoo/es5-ext)
• kod wykorzystujący deferred i es5-ext przestaje przypominać JavaScript (to plus, czy minus?)

• a2p(fs.readFile, __filename, 'utf-8')
  (invoke('toUpperCase'))
  (console.log)
  .end();

• :|

Deferred i promise'y

var later = function () {
    var d = deferred();
    setTimeout(function () {
        d.resolve(1);
    }, 1000);
    return d.promise;
};
 
later().then(function (n) {
    console.log(n); // 1
});

Ale promise, to tak naprawdę then, więc prościej:

later()
(function (n) {
    console.log(n); // 1
});

Deferred i promise'y

• series/waterfall:

  later()
  (function (n) {
      return n + 1;
  })
  (function (n) {
      console.log(n); // 2
  });

• waterfall/series – all(...):

  all(p1, p2, p3)
  (function (results) {
      // results is array of resolved values of p1, p2 and p3.
  });

• parallel – join(...):

  join(p1, p2, p3)
  (function (results) {
      // results is array of resolved values of p1, p2 and p3.
  });

Deferred i promise'y

• async to promise:

  var a2p = deferred.asyncToPromise.call,
      ba2p = deferred.asyncToPromise.bind;
   
  a2p(fs.readFile, __filename, 'utf-8')
  (function (content) {
      // change content
      return content;
  })
  (ba2p(fs.writeFile, __filename + '.changed'));

Deferred i promise'y

• obsługa błędów:

  later()(function (n) { throw new Error('error!'); })
  (function () {
      // never called
  }, function (err) {
      // handle error
  });

• bądź:

  later()(function (n) { throw new Error('error!'); })
  .end(function (err) {
      // handle error
  });

Deferred i promise'y

Konkatenacja plików w katalogu:

all(
    // Read all filenames in given path
    a2p(fs.readdir, __dirname),
    // Read files content
    function (files) {
        return join(files.map(function (name) {
            return a2p(fs.readFile, name, 'utf-8');
        }));
    },
    // Concat into one string
    function (data) {
        return data.join("\n");
    },
    // Write to lib.js
    ba2p(fs.writeFile, __dirname + '/lib.js')
).end();

Deferred i promise'y

W skrócie:

all(
    a2p(fs.readdir, __dirname),
    invoke('map', function (name) {
        return a2p(fs.readFile, name, 'utf-8');
    }), join,
    invoke('join', "\n"),
    ba2p(fs.writeFile, __dirname + '/lib.js')
).end();

Deferred i promise'y

app.get('/post/:title', function (req, res) {
    a2p(db.getPostByTitle.bind(db), req.params.title)
    (function (post) {
        return all(
            post,
            a2p(post.getComments.bind(post)),
            a2p(post.getTags.bind(post))
        );
    })
    (function (args) {
        res.render({
            post: args[0],
            comments: args[1],
            tags: args[2]
        });
    })
    .end(function (err) {
        res.render500(err);
    });
});

Deferred i promise'y

Bądź gdybyśmy korzystali z deferred również w bazie:

app.get('/post/:title', function (req, res) {
    db.getPostByTitle(req.params.title)
    (function (post) {
        return all(
            post, post.getComments(), post.getTags()
        );
    })
    (function (args) {
        res.render({
            post: args[0],
            comments: args[1],
            tags: args[2]
        });
    })
    .end(function (err) {
        res.render500(err);
    });
});

Deferred i promise'y

Porównanie z synchronicznym API:

app.get('/post/:title', function (req, res) {
    try {
        var post = db.getPostByTitle(req.params.title);
        var comments = post.getComments();
        var tags = post.getTags();
 
        res.render({
            post: post,
            comments: comments,
            tags: tags
        });
    }
    catch (err) {
        res.render500(err);
    }
});

Async czy deferred czy ...?

Debugowanie

• gdzie wystąpił błąd?

  > (function () { throw new Error('Ratunku'); }());
  Error: Ratunku
      at repl:1:22
      at repl:1:44
      at REPLServer.eval (repl.js:80:28)

• łatwiej z NFE (named function expression):

  > (function fn() { throw new Error('Ratunku'); }());
  Error: Ratunku
      at fn (repl:1:24)
      at repl:1:46
      at REPLServer.eval (repl.js:80:28)

• nie mylić NFE z FD (function declaration): http://code42.pl/2011/08/20/co-lepiej-wiedziec-o-javascriptcie-cz-2-hoisting-deklaracje-funkcji-i-wyrazenia-funkcyjne/

Rozterki na przyszłość

• debugowanie
• jeden standard
• edukacja developerów

Pytania?