Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Asynchronicity: concurrency. A tale of
(a.k.a: the subtle art of making a PB&J sandwich)
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
@joel__lord
#CodeMash
PHP Javascript
<script type="text/javascript">
console.log("Before reading file");
getFileContent("s...
TitleRace Conditions
@joel__lord
#CodeMash
About Me
@joel__lord
joellord
@joel__lord
#CodeMash
Our Agenda
! Event Loop
! Callbacks
! Promises
! Generators
! Await/Async
! Events
! Reactive Events
How to make a PB&J sandwich
@joel__lord
#CodeMash
PB&J Sandwich
• Get the ingredients
‣ Get some bread
‣ Get some PB
‣ Get some J
• Prepare the sandwi...
The Event Loop
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
!
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
•
!
🥪
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
•
!
🥪
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
•
!
...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
•
!
...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
•
!
...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• Pr...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• Pr...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A ...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A ...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A ...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A ...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A ...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A ...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A ...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A ...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A ...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A ...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A ...
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A ...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
@joel__lord
#CodeMash
Event Loop
(NodeJS)
• I want a sandwich!
• Sure
• “Worker, Make a
sandwich”
• A new customer arrives...
Synchronous JS
(2000’s)
@joel__lord
#CodeMash
Code
let PBnJMaker = require("./pbnjmaker");
PBnJMaker.fetchBread();
PBnJMaker.fetchPeanutButter();
...
@joel__lord
#CodeMash
Result
Callbacks
(2010’s)
@joel__lord
#CodeMash
What is a callback
! Simply a function as
an argument to a
function
! Could be
synchronous or
asynch...
@joel__lord
#CodeMash
What is a callback
! Simply a function as
an argument to a
function
! Could be
synchronous or
asynch...
@joel__lord
#CodeMash
What is a callback
! Simply a function as
an argument to a
function
! Could be
synchronous or
asynch...
@joel__lord
#CodeMash
What is a callback
! Simply a function as
an argument to a
function
! Could be
synchronous or
asynch...
@joel__lord
#CodeMash
What is a callback
! Simply a function as
an argument to a
function
! Could be
synchronous or
asynch...
@joel__lord
#CodeMash
What is a callback
! Simply a function as
an argument to a
function
! Could be
synchronous or
asynch...
@joel__lord
#CodeMash
What is a callback
Asynchronous callback and the event loop
console.log("begin");
fs.readFile("./cb....
@joel__lord
#CodeMash
What is a callback
Asynchronous callback and the event loop
fs.readFile("./cb.txt",
(err, data) => {...
@joel__lord
#CodeMash
What is a callback
Asynchronous callback and the event loop
console.log("after"); (err, data) => {
c...
@joel__lord
#CodeMash
What is a callback
Asynchronous callback and the event loop
(err, data) => {
console.log(data);
}
@joel__lord
#CodeMash
What is a callback
Asynchronous callback and the event loop
(err, data) => {
console.log(data);
}
@joel__lord
#CodeMash
What is a callback
Asynchronous callback and the event loop
@joel__lord
#CodeMash
Code
let PBnJMaker = require("../pbnjmaker");
PBnJMaker.fetchBread(() => {
PBnJMaker.fetchPeanutButt...
@joel__lord
#CodeMash
Result
@joel__lord
#CodeMash
Callbacks
! It works!
! but…
let PBnJMaker = require("../pbnjmaker");
PBnJMaker.simulateError();
PBn...
@joel__lord
#CodeMash
Callback Hell
let PBnJMaker = require("../pbnjmaker");
PBnJMaker.simulateError();
PBnJMaker.fetchBre...
Parallel events
@joel__lord
#CodeMash
Step by step Parallel events
🍓🍞
🥜
🥪
🍞
🥜
🥪
🍓
@joel__lord
#CodeMash
Code
let PBnJMaker = require("../pbnjmaker");
@joel__lord
#CodeMash
Code
let ingredients = 0;
let steps = 0;
@joel__lord
#CodeMash
Code
function fetchIngredients() {
}
@joel__lord
#CodeMash
Code
function fetchIngredients() {
PBnJMaker.fetchBread(handleIngredients);
PBnJMaker.fetchPeanutBut...
@joel__lord
#CodeMash
Code
function handleIngredients(err) {
if (err) return console.log(“Error”);
ingredients++;
if (ingr...
@joel__lord
#CodeMash
Code
function prepareSandwich() {
PBnJMaker.spreadPeanutButter(preparationStepCompleted);
PBnJMaker....
@joel__lord
#CodeMash
Code
function preparationStepCompleted(err) {
if (err) return console.log(“Error");
steps++;
if (ste...
@joel__lord
#CodeMash
Code
function completeSandwich(err) {
PBnJMaker.closeSandwich((err, result) => {
if (err) {
console....
@joel__lord
#CodeMash
Code
fetchIngredients();
@joel__lord
#CodeMash
Result
Parallel
Promises
(2014)
@joel__lord
#CodeMash
What is a promise?
! A representation of a
callback
! Returns a .then()
method
! Error handling
simp...
@joel__lord
#CodeMash
What is a promise?
! A representation of a
callback
! Returns a .then()
method
! Error handling
simp...
@joel__lord
#CodeMash
What is a promise?
! A representation of a
callback
! Returns a .then()
method
! Error handling
simp...
@joel__lord
#CodeMash
Code Result
PBnJMaker.fetchBread()
@joel__lord
#CodeMash
Code Result
PBnJMaker.fetchBread().then(() => {
@joel__lord
#CodeMash
Code Result
PBnJMaker.fetchBread().then(() => {
@joel__lord
#CodeMash
Code Result
PBnJMaker.fetchBread().then(() => {
return PBnJMaker.fetchPeanutButter();
})
@joel__lord
#CodeMash
Code Result
PBnJMaker.fetchBread().then(() => {
return PBnJMaker.fetchPeanutButter();
}).then(() => {
@joel__lord
#CodeMash
Code Result
PBnJMaker.fetchBread().then(() => {
return PBnJMaker.fetchPeanutButter();
}).then(() => ...
@joel__lord
#CodeMash
Code Result
}).then(() => {
return PBnJMaker.spreadPeanutButter();
@joel__lord
#CodeMash
Code Result
}).then(() => {
return PBnJMaker.spreadJam();
@joel__lord
#CodeMash
Code Result
}).then(() => {
return PBnJMaker.closeSandwich();
@joel__lord
#CodeMash
Code Result
}).then((result) => {
console.log("Eat that " + result);
@joel__lord
#CodeMash
Code Result
}).catch((err) => {
console.log("Error with ingredients");
@joel__lord
#CodeMash
Code Result
}).catch((err) => {
console.log("Error with ingredients");
}).catch((err) => {
console.l...
@joel__lord
#CodeMash
Code Result
@joel__lord
#CodeMash
Code Result
@joel__lord
#CodeMash
Code Result
@joel__lord
#CodeMash
Result
Promises
@joel__lord
#CodeMash
Aggregate functions
! .all()
! .race()
let PBnJMaker = require("../pbnjmaker");
Promise.all([
PBnJMa...
@joel__lord
#CodeMash
Aggregate functions
! .all()
! .race()
let PBnJMaker = require("../pbnjmaker");
Promise.all([
PBnJMa...
@joel__lord
#CodeMash
Aggregate functions
! .all()
! .race()
let PBnJMaker = require("../pbnjmaker");
Promise.all([
PBnJMa...
@joel__lord
#CodeMash
Aggregate functions
! .all()
! .race()
let PBnJMaker = require("../pbnjmaker");
Promise.all([
PBnJMa...
Generators
(2015)
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
What is a generator?
! An iterable function
! “Pauses” the
execution of a
function
function* iterabl...
@joel__lord
#CodeMash
Code Result
let PBnJMaker = require("../pbnjmaker");
PBnJMaker.verbose();
function* makePBnJ() {
yie...
@joel__lord
#CodeMash
Async Generators
! Combining the power
of promises and
generators
module.exports = (makeGenerator) =...
@joel__lord
#CodeMash
Code Result
let PBnJMaker = require("../pbnjmaker");
let async = require("../async");
function* make...
@joel__lord
#CodeMash
Code Result
let PBnJMaker = require("../pbnjmaker");
let async = require("../async");
function* make...
Async / Await
(2017)
@joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promis...
@joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promis...
@joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promis...
@joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promis...
@joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promis...
@joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promis...
@joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promis...
@joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promis...
@joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promis...
@joel__lord
#CodeMash
What is async/await?
! Newly introduced in
ES8 (ES2017)
! Natural evolution of
generators and
promis...
@joel__lord
#CodeMash
What is async/await?
! Very easy to
parallelize processes
let PBnJMaker = require("../pbnjmaker");
a...
@joel__lord
#CodeMash
What is async/await?
! Very easy to
parallelize processes
let PBnJMaker = require("../pbnjmaker");
a...
@joel__lord
#CodeMash
What is async/await?
! Very easy to
parallelize processes
let PBnJMaker = require("../pbnjmaker");
a...
@joel__lord
#CodeMash
What is async/await?
! Very easy to
parallelize processes
let PBnJMaker = require("../pbnjmaker");
a...
@joel__lord
#CodeMash
What is async/await?
! Very easy to
parallelize processes
let PBnJMaker = require("../pbnjmaker");
a...
@joel__lord
#CodeMash
What is async/await?
! Very easy to
parallelize processes
let PBnJMaker = require("../pbnjmaker");
a...
@joel__lord
#CodeMash
What is async/await?
! Very easy to
parallelize processes
let PBnJMaker = require("../pbnjmaker");
a...
@joel__lord
#CodeMash
Async / Await
Programatically define your steps
let PBnJMaker = require("../pbnjmaker");
let ingredi...
Events
(1990’s)
@joel__lord
#CodeMash
Events in the browser
! At the core of the
original Javascript
! window.onready = …
! button.onclick...
@joel__lord
#CodeMash
Node Event Emitter
! In node, you can use
the event emitter
! Create you own
events for a library
@joel__lord
#CodeMash
Node Event Emitter
! In node, you can use
the event emitter
! Create you own
events for a library
@joel__lord
#CodeMash
Code Demo
@joel__lord
#CodeMash
Code Demo
Reactive Stream
(2017)
@joel__lord
#CodeMash
RxJS
! Manipulate data,
synchronous or
asynchronous as
streams
! Manipulate streams
like arrays
@joel__lord
#CodeMash
Code Demo
@joel__lord
#CodeMash
RxJS
! RTFM
In Conclusion
(c’est presque la faim)
@joel__lord
#CodeMash
Summary
Asynchronous patterns
! The Event Loop
! Callbacks
! Promises
! Generators
! Async/Await
! E...
@joel__lord
#CodeMash
Summary
Asynchronous patterns
! The Event Loop
! Callbacks
! Promises
! Generators
! Async/Await
! E...
@joel__lord
#CodeMash
Resources
More Content For You…. You Won’t Believe What Happens Next
In The Loop by Jake Archibald (...
Asynchronicity: concurrency. A tale of
CodeMash, Sandusky OH
January 10, 2019
@joel__lord
joellord
Special thanks to
@toma...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

Asynchronicity: concurrency. A tale of

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Asynchronicity: concurrency. A tale of

  1. 1. Asynchronicity: concurrency. A tale of (a.k.a: the subtle art of making a PB&J sandwich)
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 21. TitleRace Conditions
  22. 22. @joel__lord #CodeMash About Me @joel__lord joellord
  23. 23. @joel__lord #CodeMash Our Agenda ! Event Loop ! Callbacks ! Promises ! Generators ! Await/Async ! Events ! Reactive Events
  24. 24. How to make a PB&J sandwich
  25. 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. 26. The Event Loop
  27. 27. @joel__lord #CodeMash Classic Architecture (PHP, Java) !
  28. 28. @joel__lord #CodeMash Classic Architecture (PHP, Java) • I want a sandwich! • ! 🥪
  29. 29. @joel__lord #CodeMash Classic Architecture (PHP, Java) • I want a sandwich! • Process start • ! 🥪
  30. 30. @joel__lord #CodeMash Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • ! 🥪 🍞
  31. 31. @joel__lord #CodeMash Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • ! 🥪 🍞 🥜
  32. 32. @joel__lord #CodeMash Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • ! 🥪 🍞 🥜 🍓
  33. 33. @joel__lord #CodeMash Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • Prepares the sandwich • ! 🥪 🍞 🥜 🍓
  34. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 63. Synchronous JS (2000’s)
  64. 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. 65. @joel__lord #CodeMash Result
  66. 66. Callbacks (2010’s)
  67. 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. 68. @joel__lord #CodeMash What is a callback ! Simply a function as an argument to a function ! Could be synchronous or asynchronous
  69. 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. 70. @joel__lord #CodeMash What is a callback ! Simply a function as an argument to a function ! Could be synchronous or asynchronous
  71. 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. 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. 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. 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. 75. @joel__lord #CodeMash What is a callback Asynchronous callback and the event loop console.log("after"); (err, data) => { console.log(data); }
  76. 76. @joel__lord #CodeMash What is a callback Asynchronous callback and the event loop (err, data) => { console.log(data); }
  77. 77. @joel__lord #CodeMash What is a callback Asynchronous callback and the event loop (err, data) => { console.log(data); }
  78. 78. @joel__lord #CodeMash What is a callback Asynchronous callback and the event loop
  79. 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. 80. @joel__lord #CodeMash Result
  81. 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. 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. 83. Parallel events
  84. 84. @joel__lord #CodeMash Step by step Parallel events 🍓🍞 🥜 🥪 🍞 🥜 🥪 🍓
  85. 85. @joel__lord #CodeMash Code let PBnJMaker = require("../pbnjmaker");
  86. 86. @joel__lord #CodeMash Code let ingredients = 0; let steps = 0;
  87. 87. @joel__lord #CodeMash Code function fetchIngredients() { }
  88. 88. @joel__lord #CodeMash Code function fetchIngredients() { PBnJMaker.fetchBread(handleIngredients); PBnJMaker.fetchPeanutButter(handleIngredients); PBnJMaker.fetchJam(handleIngredients); }
  89. 89. @joel__lord #CodeMash Code function handleIngredients(err) { if (err) return console.log(“Error”); ingredients++; if (ingredients === 3) { prepareSandwich(); } }
  90. 90. @joel__lord #CodeMash Code function prepareSandwich() { PBnJMaker.spreadPeanutButter(preparationStepCompleted); PBnJMaker.spreadJam(preparationStepCompleted); }
  91. 91. @joel__lord #CodeMash Code function preparationStepCompleted(err) { if (err) return console.log(“Error"); steps++; if (steps === 2) { completeSandwich(); } }
  92. 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. 93. @joel__lord #CodeMash Code fetchIngredients();
  94. 94. @joel__lord #CodeMash Result Parallel
  95. 95. Promises (2014)
  96. 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. 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. 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. 99. @joel__lord #CodeMash Code Result PBnJMaker.fetchBread()
  100. 100. @joel__lord #CodeMash Code Result PBnJMaker.fetchBread().then(() => {
  101. 101. @joel__lord #CodeMash Code Result PBnJMaker.fetchBread().then(() => {
  102. 102. @joel__lord #CodeMash Code Result PBnJMaker.fetchBread().then(() => { return PBnJMaker.fetchPeanutButter(); })
  103. 103. @joel__lord #CodeMash Code Result PBnJMaker.fetchBread().then(() => { return PBnJMaker.fetchPeanutButter(); }).then(() => {
  104. 104. @joel__lord #CodeMash Code Result PBnJMaker.fetchBread().then(() => { return PBnJMaker.fetchPeanutButter(); }).then(() => { return PBnJMaker.fetchJam();
  105. 105. @joel__lord #CodeMash Code Result }).then(() => { return PBnJMaker.spreadPeanutButter();
  106. 106. @joel__lord #CodeMash Code Result }).then(() => { return PBnJMaker.spreadJam();
  107. 107. @joel__lord #CodeMash Code Result }).then(() => { return PBnJMaker.closeSandwich();
  108. 108. @joel__lord #CodeMash Code Result }).then((result) => { console.log("Eat that " + result);
  109. 109. @joel__lord #CodeMash Code Result }).catch((err) => { console.log("Error with ingredients");
  110. 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. 111. @joel__lord #CodeMash Code Result
  112. 112. @joel__lord #CodeMash Code Result
  113. 113. @joel__lord #CodeMash Code Result
  114. 114. @joel__lord #CodeMash Result Promises
  115. 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. 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. 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. 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. 119. Generators (2015)
  120. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 143. Async / Await (2017)
  144. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 162. Events (1990’s)
  163. 163. @joel__lord #CodeMash Events in the browser ! At the core of the original Javascript ! window.onready = … ! button.onclick = …
  164. 164. @joel__lord #CodeMash Node Event Emitter ! In node, you can use the event emitter ! Create you own events for a library
  165. 165. @joel__lord #CodeMash Node Event Emitter ! In node, you can use the event emitter ! Create you own events for a library
  166. 166. @joel__lord #CodeMash Code Demo
  167. 167. @joel__lord #CodeMash Code Demo
  168. 168. Reactive Stream (2017)
  169. 169. @joel__lord #CodeMash RxJS ! Manipulate data, synchronous or asynchronous as streams ! Manipulate streams like arrays
  170. 170. @joel__lord #CodeMash Code Demo
  171. 171. @joel__lord #CodeMash RxJS ! RTFM
  172. 172. In Conclusion (c’est presque la faim)
  173. 173. @joel__lord #CodeMash Summary Asynchronous patterns ! The Event Loop ! Callbacks ! Promises ! Generators ! Async/Await ! Events ! Reactive Stream
  174. 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. 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. 176. Asynchronicity: concurrency. A tale of CodeMash, Sandusky OH January 10, 2019 @joel__lord joellord Special thanks to @tomasz_ducin for the inspiration

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.

Views

Total views

251

On Slideshare

0

From embeds

0

Number of embeds

23

Actions

Downloads

8

Shares

0

Comments

0

Likes

0

×