When starting to dabble with Javascript, the biggest challenge for most developers is understanding how to deal with asynchronous development. During this talk, we will cover some of the different ways to handle async programming like callbacks, promises, generators, async/away and events. As we cover those, we will also plunge into some of the mechanics of the NodeJs engine, namely the event loop. Developers attending this talk will have a better understanding of asynchronous programming and will have a few new tools to their belt to tackle those issues as they come.

1. Asynchronicity: concurrency. A tale of
(a.k.a: the subtle art of making a PB&J sandwich)

2. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

3. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

4. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

5. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

6. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

7. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

8. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

9. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

10. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

11. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

12. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

13. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

14. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

15. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

16. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

17. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

18. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

19. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

20. @joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("sample.txt", () => {
console.log("After file read");
});
console.log("Before HTTP request");
const req = new XMLHttpRequest();
req.onreadystatechange = () => {
if (this.readyState === XMLHttpRequest.DONE
&& this.status === 200) {
console.log("After HTTP request");
}
};
req.open("GET", "https://swapi.co/api/planets/1");
req.send(null);
</script>
<?php
echo("Before reading filen");
$fileContents =
file_get_contents("sample.txt");
echo("After file readn");
echo("Before HTTP requestn");
$ch = curl_init("https://swapi.co/api/
planets/1/");
$data = curl_exec($ch);
curl_close($ch);
echo("After HTTP requestn");

21. TitleRace Conditions

22. @joel__lord
#CodeMash
About Me
@joel__lord
joellord

23. @joel__lord
#CodeMash
Our Agenda
! Event Loop
! Callbacks
! Promises
! Generators
! Await/Async
! Events
! Reactive Events

24. How to make a PB&J sandwich

25. @joel__lord
#CodeMash
PB&J Sandwich
• Get the ingredients
‣ Get some bread
‣ Get some PB
‣ Get some J
• Prepare the sandwich
‣ Spread PB
‣ Spread J
• Close it
• Eat it!

26. The Event Loop

27. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
!

28. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
•
!
🥪

29. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
•
!
🥪

30. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
•
!
🥪
🍞

31. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
•
!
🥪
🍞
🥜

32. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
•
!
🥪
🍞
🥜
🍓

33. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• Prepares the
sandwich
•
!
🥪
🍞
🥜
🍓

34. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• Prepares the
sandwich
• Here’s your
sandwich
!
🥪
🍞
🥜
🍓
🥪

35. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A new customer arrives:
I want a sandwich!
•
!
🥪
🍞
🥜
🍓
🥪
!
🥪

36. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A new customer arrives:
I want a sandwich!
• Another process starts
•
!
🥪
🍞
🥜
🍓
🥪
!
🥪

37. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A new customer arrives:
I want a sandwich!
• Another process starts
• Fetches the
ingredients
•
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞

38. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A new customer arrives:
I want a sandwich!
• Another process starts
• Fetches the
ingredients
• Prepares the
sandwich
•
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
!
🥪

39. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A new customer arrives:
I want a sandwich!
• Another process starts
• Fetches the
ingredients
• Prepares the
sandwich
• Here’s your
sandwich !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
!
🥪
!
🥪

40. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A new customer arrives:
I want a sandwich!
• Another process starts
• Fetches the
ingredients
• Prepares the
sandwich
• Here’s your
sandwich !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
!
🥪
🍞
!
🥪

41. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A new customer arrives:
I want a sandwich!
• Another process starts
• Fetches the
ingredients
• Prepares the
sandwich
• Here’s your
sandwich !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
!
🥪
🍞

42. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A new customer arrives:
I want a sandwich!
• Another process starts
• Fetches the
ingredients
• Prepares the
sandwich
• Here’s your
sandwich !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
!
🥪
🍞
🥜

43. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A new customer arrives:
I want a sandwich!
• Another process starts
• Fetches the
ingredients
• Prepares the
sandwich
• Here’s your
sandwich !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
!
🥪
🍞
🥜

44. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A new customer arrives:
I want a sandwich!
• Another process starts
• Fetches the
ingredients
• Prepares the
sandwich
• Here’s your
sandwich !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓

45. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A new customer arrives:
I want a sandwich!
• Another process starts
• Fetches the
ingredients
• Prepares the
sandwich
• Here’s your
sandwich !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓

46. @joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A new customer arrives:
I want a sandwich!
• Another process starts
• Fetches the
ingredients
• Prepares the
sandwich
• Here’s your
sandwich !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪

47. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪

48. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪
🍞

49. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪
🍞
🥜

50. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪
🍞
🥜
🍓

51. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪
🍞
🥜
🍓

52. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪
🍞
🥜
🍓
🥪

53. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪
🍞
🥜
🍓
🥪
🥪

54. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪
🍞
🥜
🍓
🥪
!
🥪

55. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪
🍞
🥜
🍓
🥪
🍞
!
🥪
🥪

56. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪
🍞
🥜
🍓
🥪
🍞
!
🥪
🥪
🥜

57. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪
🍞
🥜
🍓
🥪
🍞
!
🥪
🥪
🥜
!
🥪
🍓
🍞

58. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪
🍞
🥜
🍓
🥪
🍞
!
🥪
🥪
🥜
!
🥪
🍓
🍞
🥜

59. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪
🍞
🥜
🍓
🥪
🍞
!
🥪
🥪
🥜
!
🥪
🍓
🍞
🥜
🥪
🍓

60. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪
🍞
🥜
🍓
🥪
🍞
!
🥪
🥪
🥜
!
🥪
🍓
🍞
🥜
🥪
🍓
🥪

61. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪
🍞
🥜
🍓
🥪
🍞
!
🥪
🥪
🥜
!
🥪
🍓
🍞
🥜
🥪
🍓
🥪
🥪

62. @joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives:
I want a sandwich!
• Sure
• “Other worker,
make a sandwich”
• Here is your sandwich
customer 1
!
🥪
🍞
🥜
🍓
🥪
🍞
🥜
🍓
🥪
🍞
🥜
🍓
🥪
!
🥪
!
🥪
🥪
🥪
🥪

63. Synchronous JS
(2000’s)

64. @joel__lord
#CodeMash
Code
let PBnJMaker = require("./pbnjmaker");
PBnJMaker.fetchBread();
PBnJMaker.fetchPeanutButter();
PBnJMaker.fetchJam();
PBnJMaker.spreadPeanutButter();
PBnJMaker.spreadJam();
let result = PBnJMaker.closeSandwich();
console.log("Eat that " + result);

65. @joel__lord
#CodeMash
Result

66. Callbacks
(2010’s)

67. @joel__lord
#CodeMash
What is a callback
! Simply a function as
an argument to a
function
! Could be
synchronous or
asynchronous
// //Synchronous
let array = [1,2,3];
console.log("begin");
array.map((i) => {console.log(i)});
console.log("after");

68. @joel__lord
#CodeMash
What is a callback
! Simply a function as
an argument to a
function
! Could be
synchronous or
asynchronous

69. @joel__lord
#CodeMash
What is a callback
! Simply a function as
an argument to a
function
! Could be
synchronous or
asynchronous
//Asynchronous
console.log("begin");
fs.readFile("./cb.txt", (err, data) => {
console.log(“File content”);
});
console.log("after");

70. @joel__lord
#CodeMash
What is a callback
! Simply a function as
an argument to a
function
! Could be
synchronous or
asynchronous

71. @joel__lord
#CodeMash
What is a callback
! Simply a function as
an argument to a
function
! Could be
synchronous or
asynchronous
//Asynchronous
console.log("begin");
fs.readFile("./cb.txt", (err, data) => {
console.log(“File content”);
});
console.log("after");

72. @joel__lord
#CodeMash
What is a callback
! Simply a function as
an argument to a
function
! Could be
synchronous or
asynchronous
//Asynchronous
.....................
....................... (err, data) => {
console.log(“File content”);
}..
.....................

73. @joel__lord
#CodeMash
What is a callback
Asynchronous callback and the event loop
console.log("begin");
fs.readFile("./cb.txt",
(err, data) => {
console.log(data);
});
console.log("after");

74. @joel__lord
#CodeMash
What is a callback
Asynchronous callback and the event loop
fs.readFile("./cb.txt",
(err, data) => {
console.log(data);
});
console.log("after");

75. @joel__lord
#CodeMash
What is a callback
Asynchronous callback and the event loop
console.log("after"); (err, data) => {
console.log(data);
}

76. @joel__lord
#CodeMash
What is a callback
Asynchronous callback and the event loop
(err, data) => {
console.log(data);
}

77. @joel__lord
#CodeMash
What is a callback
Asynchronous callback and the event loop
(err, data) => {
console.log(data);
}

78. @joel__lord
#CodeMash
What is a callback
Asynchronous callback and the event loop

79. @joel__lord
#CodeMash
Code
let PBnJMaker = require("../pbnjmaker");
PBnJMaker.fetchBread(() => {
PBnJMaker.fetchPeanutButter(() => {
PBnJMaker.fetchJam(() => {
PBnJMaker.spreadPeanutButter(() => {
PBnJMaker.spreadJam(() => {
PBnJMaker.closeSandwich((err, output) => {
console.log("Eat that " + output);
});
});
});
});
});
});

80. @joel__lord
#CodeMash
Result

81. @joel__lord
#CodeMash
Callbacks
! It works!
! but…
let PBnJMaker = require("../pbnjmaker");
PBnJMaker.simulateError();
PBnJMaker.fetchBread((err) => {
if (err) {
console.log("An error occurred while fetching the ingredients");
} else {
PBnJMaker.fetchPeanutButter((err) => {
if (err) {
console.log("An error occurred while fetching the ingredients");
} else {
PBnJMaker.fetchJam((err) => {
if (err) {
console.log("An error occurred while fetching the ingredients");
} else {
PBnJMaker.spreadPeanutButter((err) => {
if (err) {
console.log("An error occurred while… the sandwich");
} else {
PBnJMaker.spreadJam((err) => {
if (err) {
console.log("An error occurred … the sandwich");
} else {
PBnJMaker.closeSandwich((err, result) => {
if (err) {
console.log("An error occurred");
} else {
console.log("Eat that " + result);
}
});
}
});
}
});
}
});
}
});
}
});

82. @joel__lord
#CodeMash
Callback Hell
let PBnJMaker = require("../pbnjmaker");
PBnJMaker.simulateError();
PBnJMaker.fetchBread((err) => {
if (err) {
console.log("An error occurred while fetching the ingredients");
} else {
PBnJMaker.fetchPeanutButter((err) => {
if (err) {
console.log("An error occurred while… ingredients");
} else {
PBnJMaker.fetchJam((err) => {

83. Parallel events

84. @joel__lord
#CodeMash
Step by step Parallel events
🍓🍞
🥜
🥪
🍞
🥜
🥪
🍓

85. @joel__lord
#CodeMash
Code
let PBnJMaker = require("../pbnjmaker");

86. @joel__lord
#CodeMash
Code
let ingredients = 0;
let steps = 0;

87. @joel__lord
#CodeMash
Code
function fetchIngredients() {
}

88. @joel__lord
#CodeMash
Code
function fetchIngredients() {
PBnJMaker.fetchBread(handleIngredients);
PBnJMaker.fetchPeanutButter(handleIngredients);
PBnJMaker.fetchJam(handleIngredients);
}

89. @joel__lord
#CodeMash
Code
function handleIngredients(err) {
if (err) return console.log(“Error”);
ingredients++;
if (ingredients === 3) {
prepareSandwich();
}
}

90. @joel__lord
#CodeMash
Code
function prepareSandwich() {
PBnJMaker.spreadPeanutButter(preparationStepCompleted);
PBnJMaker.spreadJam(preparationStepCompleted);
}

91. @joel__lord
#CodeMash
Code
function preparationStepCompleted(err) {
if (err) return console.log(“Error");
steps++;
if (steps === 2) {
completeSandwich();
}
}

92. @joel__lord
#CodeMash
Code
function completeSandwich(err) {
PBnJMaker.closeSandwich((err, result) => {
if (err) {
console.log("An error occurred");
} else {
console.log("Eat that " + result);
}
});
}

93. @joel__lord
#CodeMash
Code
fetchIngredients();

94. @joel__lord
#CodeMash
Result
Parallel

95. Promises
(2014)

96. @joel__lord
#CodeMash
What is a promise?
! A representation of a
callback
! Returns a .then()
method
! Error handling
simplified
//Asynchronous
console.log("begin");
asyncPromise().then(onSuccess, onFailure);
console.log("after");

97. @joel__lord
#CodeMash
What is a promise?
! A representation of a
callback
! Returns a .then()
method
! Error handling
simplified
//Asynchronous
console.log("begin");
fs.readFile("./cb.txt")
.then((data) => {
console.log(data);
}, (err) => {
console.log(err);
});
console.log("after");

98. @joel__lord
#CodeMash
What is a promise?
! A representation of a
callback
! Returns a .then()
method
! Error handling
simplified
//Asynchronous
console.log("begin");
fs.readFile("./cb.txt")
.then((data) => {
console.log(data);
}).catch((err) => {
console.log(err);
});
console.log("after");

99. @joel__lord
#CodeMash
Code Result
PBnJMaker.fetchBread()

100. @joel__lord
#CodeMash
Code Result
PBnJMaker.fetchBread().then(() => {

101. @joel__lord
#CodeMash
Code Result
PBnJMaker.fetchBread().then(() => {

102. @joel__lord
#CodeMash
Code Result
PBnJMaker.fetchBread().then(() => {
return PBnJMaker.fetchPeanutButter();
})

103. @joel__lord
#CodeMash
Code Result
PBnJMaker.fetchBread().then(() => {
return PBnJMaker.fetchPeanutButter();
}).then(() => {

104. @joel__lord
#CodeMash
Code Result
PBnJMaker.fetchBread().then(() => {
return PBnJMaker.fetchPeanutButter();
}).then(() => {
return PBnJMaker.fetchJam();

105. @joel__lord
#CodeMash
Code Result
}).then(() => {
return PBnJMaker.spreadPeanutButter();

106. @joel__lord
#CodeMash
Code Result
}).then(() => {
return PBnJMaker.spreadJam();

107. @joel__lord
#CodeMash
Code Result
}).then(() => {
return PBnJMaker.closeSandwich();

108. @joel__lord
#CodeMash
Code Result
}).then((result) => {
console.log("Eat that " + result);

109. @joel__lord
#CodeMash
Code Result
}).catch((err) => {
console.log("Error with ingredients");

110. @joel__lord
#CodeMash
Code Result
}).catch((err) => {
console.log("Error with ingredients");
}).catch((err) => {
console.log(“Error preparing”);
}).catch((err) => {
console.log(“Error somewhere”);

111. @joel__lord
#CodeMash
Code Result

112. @joel__lord
#CodeMash
Code Result

113. @joel__lord
#CodeMash
Code Result

114. @joel__lord
#CodeMash
Result
Promises

115. @joel__lord
#CodeMash
Aggregate functions
! .all()
! .race()
let PBnJMaker = require("../pbnjmaker");
Promise.all([
PBnJMaker.fetchBread(),
PBnJMaker.fetchPeanutButter(),
PBnJMaker.fetchJam()])
.then(() => {
return Promise.all([
PBnJMaker.spreadPeanutButter(),
PBnJMaker.spreadJam()]);
}).then(() => {
return PBnJMaker.closeSandwich();
}).then((result) => {
console.log("Eat that " + result);
});

116. @joel__lord
#CodeMash
Aggregate functions
! .all()
! .race()
let PBnJMaker = require("../pbnjmaker");
Promise.all([
PBnJMaker.fetchBread(),
PBnJMaker.fetchPeanutButter(),
PBnJMaker.fetchJam()])
.then(() => {
return Promise.all([
PBnJMaker.spreadPeanutButter(),
PBnJMaker.spreadJam()]);
}).then(() => {
return PBnJMaker.closeSandwich();
}).then((result) => {
console.log("Eat that " + result);
});

117. @joel__lord
#CodeMash
Aggregate functions
! .all()
! .race()
let PBnJMaker = require("../pbnjmaker");
Promise.all([
PBnJMaker.fetchBread(),
PBnJMaker.fetchPeanutButter(),
PBnJMaker.fetchJam()])
.then(() => {
return Promise.all([
PBnJMaker.spreadPeanutButter(),
PBnJMaker.spreadJam()]);
}).then(() => {
return PBnJMaker.closeSandwich();
}).then((result) => {
console.log("Eat that " + result);
});

118. @joel__lord
#CodeMash
Aggregate functions
! .all()
! .race()
let PBnJMaker = require("../pbnjmaker");
Promise.all([
PBnJMaker.fetchBread(),
PBnJMaker.fetchPeanutButter(),
PBnJMaker.fetchJam()])
.then(() => {
return Promise.all([
PBnJMaker.spreadPeanutButter(),
PBnJMaker.spreadJam()]);
}).then(() => {
return PBnJMaker.closeSandwich();
}).then((result) => {
console.log("Eat that " + result);
});

119. Generators
(2015)

120. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

121. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

122. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

123. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

124. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

125. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

126. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

127. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

128. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

129. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

130. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

131. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

132. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

133. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

134. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

135. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

136. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
let iteration = iterable();
console.log(iteration.next()); // 3
// Do stuff
console.log(iteration.next()); // 2
console.log(iteration.next()); // 1
console.log(iteration.next()); // 0
// More stuff
console.log(iteration.next()); // undefined

137. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
for (let iteration of iterable()) {
console.log(iteration);
}
// 3
// 2
// 1
// 0

138. @joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterable() {
let i = 4;
while(i--) {
yield i;
}
}
for (let iteration of iterable()) {
console.log(iteration);
}
// 3
// 2
// 1
// 0

139. @joel__lord
#CodeMash
Code Result
let PBnJMaker = require("../pbnjmaker");
PBnJMaker.verbose();
function* makePBnJ() {
yield PBnJMaker.fetchBread;
yield PBnJMaker.fetchPeanutButter;
yield PBnJMaker.fetchJam;
yield PBnJMaker.spreadPeanutButter;
yield PBnJMaker.spreadJam;
yield PBnJMaker.closeSandwich;
}
for (let step of makePBnJ()) {
step();
}
console.log("Eat that sandwich");

140. @joel__lord
#CodeMash
Async Generators
! Combining the power
of promises and
generators
module.exports = (makeGenerator) => {
let generator = makeGenerator.apply(this, arguments);
function handle(result) {
// generator returns {done: [Boolean], value: [Any}}
if (result.done)
return Promise.resolve(result.value);
return
Promise.resolve(result.value).then(function(res) {
return handle(generator.next(res));
}, function(err) {
return handle(generator.throw(err));
});
}
try {
return handle(generator.next());
} catch(e) {
return Promise.reject(e);
}
};

141. @joel__lord
#CodeMash
Code Result
let PBnJMaker = require("../pbnjmaker");
let async = require("../async");
function* makePBnJ() {
yield PBnJMaker.fetchBread();
yield PBnJMaker.fetchPeanutButter();
yield PBnJMaker.fetchJam();
yield PBnJMaker.spreadPeanutButter();
yield PBnJMaker.spreadJam();
return PBnJMaker.closeSandwich();
}
async(makePBnJ).then((result) => {
console.log("Eat that " + result);
});

142. @joel__lord
#CodeMash
Code Result
let PBnJMaker = require("../pbnjmaker");
let async = require("../async");
function* makePBnJ() {
yield PBnJMaker.fetchBread();
yield PBnJMaker.fetchPeanutButter();
yield PBnJMaker.fetchJam();
yield PBnJMaker.spreadPeanutButter();
yield PBnJMaker.spreadJam();
return PBnJMaker.closeSandwich();
}
async(makePBnJ).then((result) => {
console.log("Eat that " + result);
});

143. Async / Await
(2017)

144. @joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promises
let PBnJMaker = require("../pbnjmaker");
async function makePBnJ() {
await PBnJMaker.fetchBread();
await PBnJMaker.fetchPeanutButter();
await PBnJMaker.fetchJam();
await PBnJMaker.spreadPeanutButter();
await PBnJMaker.spreadJam();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log(“Eat that " + result)
});

145. @joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promises
let PBnJMaker = require("../pbnjmaker");
async function makePBnJ() {
await PBnJMaker.fetchBread();
await PBnJMaker.fetchPeanutButter();
await PBnJMaker.fetchJam();
await PBnJMaker.spreadPeanutButter();
await PBnJMaker.spreadJam();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log(“Eat that " + result)
});

146. @joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promises
let PBnJMaker = require("../pbnjmaker");
async function makePBnJ() {
await PBnJMaker.fetchBread();
await PBnJMaker.fetchPeanutButter();
await PBnJMaker.fetchJam();
await PBnJMaker.spreadPeanutButter();
await PBnJMaker.spreadJam();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log(“Eat that " + result)
});

147. @joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promises
let PBnJMaker = require("../pbnjmaker");
async function makePBnJ() {
await PBnJMaker.fetchBread();
await PBnJMaker.fetchPeanutButter();
await PBnJMaker.fetchJam();
await PBnJMaker.spreadPeanutButter();
await PBnJMaker.spreadJam();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log(“Eat that " + result)
});

148. @joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promises
let PBnJMaker = require("../pbnjmaker");
async function makePBnJ() {
await PBnJMaker.fetchBread();
await PBnJMaker.fetchPeanutButter();
await PBnJMaker.fetchJam();
await PBnJMaker.spreadPeanutButter();
await PBnJMaker.spreadJam();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log(“Eat that " + result)
});

149. @joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promises
let PBnJMaker = require("../pbnjmaker");
async function makePBnJ() {
await PBnJMaker.fetchBread();
await PBnJMaker.fetchPeanutButter();
await PBnJMaker.fetchJam();
await PBnJMaker.spreadPeanutButter();
await PBnJMaker.spreadJam();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log(“Eat that " + result)
});

150. @joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promises
let PBnJMaker = require("../pbnjmaker");
async function makePBnJ() {
await PBnJMaker.fetchBread();
await PBnJMaker.fetchPeanutButter();
await PBnJMaker.fetchJam();
await PBnJMaker.spreadPeanutButter();
await PBnJMaker.spreadJam();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log(“Eat that " + result)
});

151. @joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promises
let PBnJMaker = require("../pbnjmaker");
async function makePBnJ() {
await PBnJMaker.fetchBread();
await PBnJMaker.fetchPeanutButter();
await PBnJMaker.fetchJam();
await PBnJMaker.spreadPeanutButter();
await PBnJMaker.spreadJam();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log(“Eat that " + result)
});

152. @joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promises
let PBnJMaker = require("../pbnjmaker");
async function makePBnJ() {
await PBnJMaker.fetchBread();
await PBnJMaker.fetchPeanutButter();
await PBnJMaker.fetchJam();
await PBnJMaker.spreadPeanutButter();
await PBnJMaker.spreadJam();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log(“Eat that " + result)
});

153. @joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promises
let PBnJMaker = require("../pbnjmaker");
async function makePBnJ() {
await PBnJMaker.fetchBread();
await PBnJMaker.fetchPeanutButter();
await PBnJMaker.fetchJam();
await PBnJMaker.spreadPeanutButter();
await PBnJMaker.spreadJam();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log(“Eat that " + result)
});

154. @joel__lord
#CodeMash
What is async/await?
! Very easy to
parallelize processes
let PBnJMaker = require("../pbnjmaker");
async function getIngredients() {
let p1 = PBnJMaker.fetchBread();
let p2 = PBnJMaker.fetchPeanutButter();
let p3 = PBnJMaker.fetchJam();
return await p1 + await p2 + await p3;
}
async function prepareSandwich() {
let p1 = PBnJMaker.spreadPeanutButter();
let p2 = PBnJMaker.spreadJam();
return await p1 + await p2;
}
async function makePBnJ() {
await getIngredients();
await prepareSandwich();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log("Eat that " + result)
});

155. @joel__lord
#CodeMash
What is async/await?
! Very easy to
parallelize processes
let PBnJMaker = require("../pbnjmaker");
async function getIngredients() {
let p1 = PBnJMaker.fetchBread();
let p2 = PBnJMaker.fetchPeanutButter();
let p3 = PBnJMaker.fetchJam();
return await p1 + await p2 + await p3;
}
async function prepareSandwich() {
let p1 = PBnJMaker.spreadPeanutButter();
let p2 = PBnJMaker.spreadJam();
return await p1 + await p2;
}
async function makePBnJ() {
await getIngredients();
await prepareSandwich();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log("Eat that " + result)
});

156. @joel__lord
#CodeMash
What is async/await?
! Very easy to
parallelize processes
let PBnJMaker = require("../pbnjmaker");
async function getIngredients() {
let p1 = PBnJMaker.fetchBread();
let p2 = PBnJMaker.fetchPeanutButter();
let p3 = PBnJMaker.fetchJam();
return await p1 + await p2 + await p3;
}
async function prepareSandwich() {
let p1 = PBnJMaker.spreadPeanutButter();
let p2 = PBnJMaker.spreadJam();
return await p1 + await p2;
}
async function makePBnJ() {
await getIngredients();
await prepareSandwich();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log("Eat that " + result)
});

157. @joel__lord
#CodeMash
What is async/await?
! Very easy to
parallelize processes
let PBnJMaker = require("../pbnjmaker");
async function getIngredients() {
let p1 = PBnJMaker.fetchBread();
let p2 = PBnJMaker.fetchPeanutButter();
let p3 = PBnJMaker.fetchJam();
return await p1 + await p2 + await p3;
}
async function prepareSandwich() {
let p1 = PBnJMaker.spreadPeanutButter();
let p2 = PBnJMaker.spreadJam();
return await p1 + await p2;
}
async function makePBnJ() {
await getIngredients();
await prepareSandwich();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log("Eat that " + result)
});

158. @joel__lord
#CodeMash
What is async/await?
! Very easy to
parallelize processes
let PBnJMaker = require("../pbnjmaker");
async function getIngredients() {
let p1 = PBnJMaker.fetchBread();
let p2 = PBnJMaker.fetchPeanutButter();
let p3 = PBnJMaker.fetchJam();
return await p1 + await p2 + await p3;
}
async function prepareSandwich() {
let p1 = PBnJMaker.spreadPeanutButter();
let p2 = PBnJMaker.spreadJam();
return await p1 + await p2;
}
async function makePBnJ() {
await getIngredients();
await prepareSandwich();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log("Eat that " + result)
});

159. @joel__lord
#CodeMash
What is async/await?
! Very easy to
parallelize processes
let PBnJMaker = require("../pbnjmaker");
async function getIngredients() {
let p1 = PBnJMaker.fetchBread();
let p2 = PBnJMaker.fetchPeanutButter();
let p3 = PBnJMaker.fetchJam();
return await p1 + await p2 + await p3;
}
async function prepareSandwich() {
let p1 = PBnJMaker.spreadPeanutButter();
let p2 = PBnJMaker.spreadJam();
return await p1 + await p2;
}
async function makePBnJ() {
await getIngredients();
await prepareSandwich();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log("Eat that " + result)
});

160. @joel__lord
#CodeMash
What is async/await?
! Very easy to
parallelize processes
let PBnJMaker = require("../pbnjmaker");
async function getIngredients() {
let p1 = PBnJMaker.fetchBread();
let p2 = PBnJMaker.fetchPeanutButter();
let p3 = PBnJMaker.fetchJam();
return await p1 + await p2 + await p3;
}
async function prepareSandwich() {
let p1 = PBnJMaker.spreadPeanutButter();
let p2 = PBnJMaker.spreadJam();
return await p1 + await p2;
}
async function makePBnJ() {
await getIngredients();
await prepareSandwich();
return PBnJMaker.closeSandwich();
}
makePBnJ().then((result) => {
console.log("Eat that " + result)
});

161. @joel__lord
#CodeMash
Async / Await
Programatically define your steps
let PBnJMaker = require("../pbnjmaker");
let ingredients = ["Bread", "PeanutButter", "Jam"];
let steps = ingredients.map((i) => `fetch${i}`);
steps.push(...["spreadPeanutButter", "spreadJam"]);
async function makePBnJ(todo) {
for (var i = 0; i < todo.length; i++) {
await PBnJMaker[todo[i]]();
}
return PBnJMaker.closeSandwich();
}
makePBnJ(steps).then((result) => {
console.log(“Eat that " + result)
});

162. Events
(1990’s)

163. @joel__lord
#CodeMash
Events in the browser
! At the core of the
original Javascript
! window.onready = …
! button.onclick = …

164. @joel__lord
#CodeMash
Node Event Emitter
! In node, you can use
the event emitter
! Create you own
events for a library

165. @joel__lord
#CodeMash
Node Event Emitter
! In node, you can use
the event emitter
! Create you own
events for a library

166. @joel__lord
#CodeMash
Code Demo

167. @joel__lord
#CodeMash
Code Demo

168. Reactive Stream
(2017)

169. @joel__lord
#CodeMash
RxJS
! Manipulate data,
synchronous or
asynchronous as
streams
! Manipulate streams
like arrays

170. @joel__lord
#CodeMash
Code Demo

171. @joel__lord
#CodeMash
RxJS
! RTFM

172. In Conclusion
(c’est presque la faim)

173. @joel__lord
#CodeMash
Summary
Asynchronous patterns
! The Event Loop
! Callbacks
! Promises
! Generators
! Async/Await
! Events
! Reactive Stream

174. @joel__lord
#CodeMash
Summary
Asynchronous patterns
! The Event Loop
! Callbacks
! Promises
! Generators
! Async/Await
! Events
! Reactive Stream
! …. How to make a PBnJ sandwich!

175. @joel__lord
#CodeMash
Resources
More Content For You…. You Won’t Believe What Happens Next
In The Loop by Jake Archibald (video about the event loop)
http://bit.ly/event-loop-talk
Build Reactive Websites with RxJS
http://bit.ly/rxjs-book
The Awesome PBnJMaker (and other code samples)
http://bit.ly/PBnJMaker

176. Asynchronicity: concurrency. A tale of
CodeMash, Sandusky OH
January 10, 2019
@joel__lord
joellord
Special thanks to
@tomasz_ducin for the inspiration