Avez-vous déjà été confrontés à l'enfer des callbacks en Javascript ? Si oui, cette présentation est faite pour vous !

1. L’enfer des callbacks
Un cas d’étude en *(Node)JS
Aurélien Bourdon
@aurelienbourdon

2. describe('.totalValue', function() {
it('should calculate the total value of items in a space', function(done) {
var table = new Item('table', 'dining room', '07/23/2014', '1', '3000');
var chair = new Item('chair', 'living room', '07/23/2014', '3', '300');
var couch = new Item('couch', 'living room', '07/23/2014', '2', '1100');
var chair2 = new Item('chair', 'living room', '07/23/2014', '4', '500');
var bed = new Item('bed', 'dining room', '07/23/2014', '1', '2000');
table.save(function() {
chair.save(function() {
couch.save(function() {
chair2.save(function() {
bed.save(function() {
Item.totalValue({room: 'dining room'}, function(totalValue) {
expect(totalValue).to.equal(5000); done();
});
});
});
});
});
});
});
});
Sources
http://thecodebarbarian.com/2015/03/20/callback-hell-is-a-myth
https://atdreamstate.wordpress.com/2014/12/26/hell-hellfire/

3. Pourquoi est-ce l’enfer ?

4. Pourquoi est-ce l’enfer ?
Lecture en cascade

5. Pourquoi est-ce l’enfer ?
Lecture en cascade
Absence de description fonctionnelle

6. Pourquoi est-ce l’enfer ?
Lecture en cascade
Couplage fort entre les fonctions
Absence de description fonctionnelle

7. Pourquoi est-ce l’enfer ?
Lecture en cascade
Lisibilité hardue
Maintenance difficile
Source
http://memesvault.com/sad-meme-face/
Absence de description fonctionnelle
Couplage fort entre les fonctions

8. Cas d’étude

9. function parseCurrentDir() {
fs.readdir('.', function (err, files) {
if (err) {
console.error(err);
} else {
files.forEach(function (file) {
fs.readFile(file, 'utf8', function (err, content) {
if (err) {
console.error(err);
} else {
console.log(content);
}
});
});
}
});
}

10. #1 Modularisation

11. Modularisation ?
Nommage et externalisation des fonctions

12. function parseCurrentDir() {
fs.readdir('.', function (err, files) {
if (err) {
console.error(err);
} else {
files.forEach(function (file) {
fs.readFile(file, 'utf8', function (err, content) {
if (err) {
console.error(err);
} else {
console.log(content);
}
});
});
}
});
}

13. function parseCurrentDir() {
fs.readdir('.', function readFiles(err, files) {
if (err) {
console.error(err);
} else {
files.forEach(function readFile(file) {
fs.readFile(file, 'utf8', function printContent(err, content) {
if (err) {
console.error(err);
} else {
console.log(content);
}
});
});
}
});
}

14. function readFile(file) {
fs.readFile(file, 'utf8', printContent);
}
function printContent(err, content) {
if (err) {
console.error(err);
} else {
console.log(content);
}
}
function parseCurrentDir() {
fs.readdir('.', readFiles);
}
function readFiles(err, files) {
if (err) {
console.error(err);
} else {
files.forEach(readFile);
}
}

15. function readFile(file) {
fs.readFile(file, 'utf8', printContent);
}
function printContent(err, content) {
if (err) {
console.error(err);
} else {
console.log(content);
}
}
function parseCurrentDir() {
fs.readdir('.', readFiles);
}
function readFiles(err, files) {
if (err) {
console.error(err);
} else {
files.forEach(readFile);
}
}

16. #2 Découplage

17. Découplage ?
Séparation des traitements du flow d’exécution

18. Découplage ?
Séparation des traitements du flow d’exécution
En utilisant des promises :-)

19. Promises ?
“Abstraction servant de proxy pour un résultat non-
connu au moment où il est référencé pour la
première fois, car son calcul ou son obtention se
feront “plus tard” à l’exécution”
- Wikipédia

20. Promises !
(...)

21. (...)
Promises !
https://github.com/kriskowal/q

22. function parseCurrentDir() {
fs.readdir('.', readFiles);
}

23. function parseCurrentDir() {
fs.readdir('.', function (err, files) {
});
}

24. function parseCurrentDir() {
fs.readdir('.', function (err, files) {
});
}

25. function parseCurrentDir() {
Q.Promise(function (resolve, reject, notify) {
fs.readdir('.', function (err, files) {
});
});
}

26. function parseCurrentDir() {
Q.Promise(function (resolve, reject, notify) {
fs.readdir('.', function (err, files) {
if (err) {
reject(err);
} else {
resolve(files);
}
});
});
}

27. function parseCurrentDir() {
return Q.Promise(function (resolve, reject, notify) {
fs.readdir('.', function (err, files) {
if (err) {
reject(err);
} else {
resolve(files);
}
});
});
}

28. function parseCurrentDir() {
return Q.Promise(function (resolve, reject, notify) {
fs.readdir('.', function (err, files) {
if (err) {
reject(err);
} else {
resolve(files);
}
});
});
}
Séparation des traitements du flow d’exécution
readFiles(files);

29. function listCurrentDirFiles() {
return Q.Promise(function (resolve, reject, notify) {
fs.readdir('.', function (err, files) {
if (err) {
reject(err);
} else {
resolve(files);
}
});
});
}
Séparation des traitements du flow d’exécution
readFiles(files);

30. “Mais comment lier notre fonction avec la suivante ?”

31. “Mais comment lier notre fonction avec la suivante ?”
En utilisant le chaînage de promises !

32. listCurrentDirFiles()

33. listCurrentDirFiles()
.then(readFiles)

34. listCurrentDirFiles()
.then(readFiles)
.then(...)

35. listCurrentDirFiles()
.then(readFiles)
.then(...)
.catch(console.error)

36. listCurrentDirFiles()
.then(readFiles)
.then(...)
.catch(console.error)
.done()

37. “Du coup au final ça donne quoi ?”

38. function parseCurrentDir() {
fs.readdir('.', function (err, files) {
if (err) {
console.error(err);
} else {
files.forEach(function (file) {
fs.readFile(file, 'utf8', function (err, content) {
if (err) {
console.error(err);
} else {
console.log(content);
}
});
});
}
});
}

39. function parseCurrentDir() {
listCurrentDirFiles()
.then(readFiles)
.then(printContents)
.catch(console.error)
.done();
}

40. function readFile(file) {
return Q.Promise(function (resolve, reject) {
fs.readFile(file, 'utf8', function (err, content) {
if (err) {
reject(err);
} else {
resolve(content);
}
});
});
}
function printContents(contents) {
contents.forEach(function (content) {
if (content.state === 'fulfilled') {
console.log(content.value);
} else {
console.log('Unable to parse file due to %s', content.reason);
}
});
}
function listCurrentDirFiles() {
return Q.Promise(function (resolve, reject) {
fs.readdir('.', function (err, files) {
if (err) {
reject(err);
} else {
resolve(files);
}
});
});
}
function readFiles(files) {
return Q.allSettled(files.map(readFile));
}
function readFile(file) {
return Q.Promise(function (resolve, reject) {
fs.readFile(file, 'utf8', function (err, content) {
if (err) {
reject(err);
} else {
resolve(content);
}
});
});
}
function printContents(contents) {
contents.forEach(function (content) {
if (content.state === 'fulfilled') {
console.log(content.value);
} else {
console.error(content.reason);
}
});
}

41. function readFile(file) {
return Q.Promise(function (resolve, reject) {
fs.readFile(file, 'utf8', function (err, content) {
if (err) {
reject(err);
} else {
resolve(content);
}
});
});
}
function printContents(contents) {
contents.forEach(function (content) {
if (content.state === 'fulfilled') {
console.log(content.value);
} else {
console.log('Unable to parse file due to %s', content.reason);
}
});
}
function listCurrentDirFiles() {
return Q.denodeify(fs.readdir)('.');
}
function readFiles(files) {
return Q.allSettled(files.map(readFile));
}
function readFile(file) {
return Q.denodeify(fs.readFile)(file, 'utf8');
}
function printContents(contents) {
contents.forEach(function (content) {
if (content.state === 'fulfilled') {
console.log(content.value);
} else {
console.error(content.reason);
}
});
}

42. Pour aller plus loin
D’autres approches peuvent être utilisées
e.g., Async.JS (https://github.com/caolan/async)

43. Références
http://callbackhell.com/
http://stackabuse.com/avoiding-callback-hell-in-node-js/
http://thecodebarbarian.com/2015/03/20/callback-hell-is-a-myth
https://github.com/kriskowal/q
https://strongloop.com/strongblog/node-js-callback-hell-promises-generators/
http://colintoh.com/blog/staying-sane-with-asynchronous-programming-promises-and-generators
http://blog.ippon.fr/2015/01/27/les-promesses-en-angularjs-33/
http://complexitymaze.com/2014/03/03/javascript-promises-a-comparison-of-libraries/
https://strongloop.com/strongblog/promises-in-node-js-with-q-an-alternative-to-callbacks/

44. L’enfer des callbacks
Un cas d’étude en *(Node)JS
Aurélien Bourdon
@aurelienbourdon