SlideShare a Scribd company logo
1 of 176
Download to read offline
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("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");
@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");
@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");
@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");
@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");
@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");
@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");
@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");
@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");
@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");
@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");
@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");
@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");
@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");
@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");
@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");
@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");
@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");
@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");
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 sandwich
‣ Spread PB
‣ Spread J
• Close it
• Eat it!
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
• Prepares the
sandwich
•
!
🥪
🍞
🥜
🍓
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• Prepares the
sandwich
• Here’s your
sandwich
!
🥪
🍞
🥜
🍓
🥪
@joel__lord
#CodeMash
Classic Architecture
(PHP, Java)
• I want a sandwich!
• Process start
• Fetches the
ingredients
• A new customer arrives:
I want a sandwich!
•
!
🥪
🍞
🥜
🍓
🥪
!
🥪
@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
•
!
🥪
🍞
🥜
🍓
🥪
!
🥪
@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
•
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
@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
•
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
!
🥪
@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 !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
!
🥪
!
🥪
@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 !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
!
🥪
🍞
!
🥪
@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 !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
!
🥪
🍞
@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 !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
!
🥪
🍞
🥜
@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 !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
!
🥪
🍞
🥜
@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 !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
@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 !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
@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 !
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
!
🥪
🍞
🥜
🍓
🥪
@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
!
🥪
@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
!
🥪
🍞
@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
!
🥪
🍞
🥜
@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
!
🥪
🍞
🥜
🍓
@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
!
🥪
🍞
🥜
🍓
@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
!
🥪
🍞
🥜
🍓
🥪
@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
!
🥪
🍞
🥜
🍓
🥪
🥪
@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
!
🥪
🍞
🥜
🍓
🥪
!
🥪
@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
!
🥪
🍞
🥜
🍓
🥪
🍞
!
🥪
🥪
@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
!
🥪
🍞
🥜
🍓
🥪
🍞
!
🥪
🥪
🥜
@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
!
🥪
🍞
🥜
🍓
🥪
🍞
!
🥪
🥪
🥜
!
🥪
🍓
🍞
@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
!
🥪
🍞
🥜
🍓
🥪
🍞
!
🥪
🥪
🥜
!
🥪
🍓
🍞
🥜
@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
!
🥪
🍞
🥜
🍓
🥪
🍞
!
🥪
🥪
🥜
!
🥪
🍓
🍞
🥜
🥪
🍓
@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
!
🥪
🍞
🥜
🍓
🥪
🍞
!
🥪
🥪
🥜
!
🥪
🍓
🍞
🥜
🥪
🍓
🥪
@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
!
🥪
🍞
🥜
🍓
🥪
🍞
!
🥪
🥪
🥜
!
🥪
🍓
🍞
🥜
🥪
🍓
🥪
🥪
@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
!
🥪
🍞
🥜
🍓
🥪
🍞
🥜
🍓
🥪
🍞
🥜
🍓
🥪
!
🥪
!
🥪
🥪
🥪
🥪
Synchronous JS
(2000’s)
@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);
@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
asynchronous
// //Synchronous
let array = [1,2,3];
console.log("begin");
array.map((i) => {console.log(i)});
console.log("after");
@joel__lord
#CodeMash
What is a callback
! Simply a function as
an argument to a
function
! Could be
synchronous or
asynchronous
@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");
@joel__lord
#CodeMash
What is a callback
! Simply a function as
an argument to a
function
! Could be
synchronous or
asynchronous
@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");
@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”);
}..
.....................
@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");
@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");
@joel__lord
#CodeMash
What is a callback
Asynchronous callback and the event loop
console.log("after"); (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
(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.fetchPeanutButter(() => {
PBnJMaker.fetchJam(() => {
PBnJMaker.spreadPeanutButter(() => {
PBnJMaker.spreadJam(() => {
PBnJMaker.closeSandwich((err, output) => {
console.log("Eat that " + output);
});
});
});
});
});
});
@joel__lord
#CodeMash
Result
@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);
}
});
}
});
}
});
}
});
}
});
}
});
@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) => {
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.fetchPeanutButter(handleIngredients);
PBnJMaker.fetchJam(handleIngredients);
}
@joel__lord
#CodeMash
Code
function handleIngredients(err) {
if (err) return console.log(“Error”);
ingredients++;
if (ingredients === 3) {
prepareSandwich();
}
}
@joel__lord
#CodeMash
Code
function prepareSandwich() {
PBnJMaker.spreadPeanutButter(preparationStepCompleted);
PBnJMaker.spreadJam(preparationStepCompleted);
}
@joel__lord
#CodeMash
Code
function preparationStepCompleted(err) {
if (err) return console.log(“Error");
steps++;
if (steps === 2) {
completeSandwich();
}
}
@joel__lord
#CodeMash
Code
function completeSandwich(err) {
PBnJMaker.closeSandwich((err, result) => {
if (err) {
console.log("An error occurred");
} else {
console.log("Eat that " + result);
}
});
}
@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
simplified
//Asynchronous
console.log("begin");
asyncPromise().then(onSuccess, onFailure);
console.log("after");
@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");
@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");
@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(() => {
return PBnJMaker.fetchJam();
@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.log(“Error preparing”);
}).catch((err) => {
console.log(“Error somewhere”);
@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([
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);
});
@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);
});
@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);
});
@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);
});
Generators
(2015)
@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
@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
@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
@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
@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
@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
@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
@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
@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
@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
@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
@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
@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
@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
@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
@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
@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
@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
@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
@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");
@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);
}
};
@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);
});
@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);
});
Async / Await
(2017)
@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)
});
@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)
});
@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)
});
@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)
});
@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)
});
@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)
});
@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)
});
@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)
});
@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)
});
@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)
});
@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)
});
@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)
});
@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)
});
@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)
});
@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)
});
@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)
});
@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)
});
@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)
});
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
! Events
! Reactive Stream
@joel__lord
#CodeMash
Summary
Asynchronous patterns
! The Event Loop
! Callbacks
! Promises
! Generators
! Async/Await
! Events
! Reactive Stream
! …. How to make a PBnJ sandwich!
@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
Asynchronicity: concurrency. A tale of
CodeMash, Sandusky OH
January 10, 2019
@joel__lord
joellord
Special thanks to
@tomasz_ducin for the inspiration

More Related Content

What's hot

Using Cerberus and PySpark to validate semi-structured datasets
Using Cerberus and PySpark to validate semi-structured datasetsUsing Cerberus and PySpark to validate semi-structured datasets
Using Cerberus and PySpark to validate semi-structured datasetsBartosz Konieczny
 
NoSQL Injections in Node.js - The case of MongoDB
NoSQL Injections in Node.js - The case of MongoDBNoSQL Injections in Node.js - The case of MongoDB
NoSQL Injections in Node.js - The case of MongoDBSqreen
 
RESTful Web Applications with Google Go
RESTful Web Applications with Google GoRESTful Web Applications with Google Go
RESTful Web Applications with Google GoFrank Müller
 
NodeJs
NodeJsNodeJs
NodeJsdizabl
 
HeadCouch - CouchDB PHP Client
HeadCouch - CouchDB PHP ClientHeadCouch - CouchDB PHP Client
HeadCouch - CouchDB PHP ClientDimitar Ivanov
 
Source Code for Dpilot
Source Code for Dpilot Source Code for Dpilot
Source Code for Dpilot Nidhi Chauhan
 
Dpilot Source Code With ScreenShots
Dpilot Source Code With ScreenShots Dpilot Source Code With ScreenShots
Dpilot Source Code With ScreenShots DeepAnshu Sharma
 
Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Amazon Cognito使って認証したい?それならSpring Security使いましょう!Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Amazon Cognito使って認証したい?それならSpring Security使いましょう!Ryosuke Uchitate
 
GoCracow #5 Bartlomiej klimczak - GoBDD
GoCracow #5 Bartlomiej klimczak - GoBDDGoCracow #5 Bartlomiej klimczak - GoBDD
GoCracow #5 Bartlomiej klimczak - GoBDDBartłomiej Kiełbasa
 
Read, store and create xml and json
Read, store and create xml and jsonRead, store and create xml and json
Read, store and create xml and jsonKim Berg Hansen
 
PostgreSQL High-Availability and Geographic Locality using consul
PostgreSQL High-Availability and Geographic Locality using consulPostgreSQL High-Availability and Geographic Locality using consul
PostgreSQL High-Availability and Geographic Locality using consulSean Chittenden
 
PuppetDB, Puppet Explorer and puppetdbquery
PuppetDB, Puppet Explorer and puppetdbqueryPuppetDB, Puppet Explorer and puppetdbquery
PuppetDB, Puppet Explorer and puppetdbqueryPuppet
 
Integration with Camel
Integration with CamelIntegration with Camel
Integration with CamelJosué Neis
 
Developing application for Windows Phone 7 in TDD
Developing application for Windows Phone 7 in TDDDeveloping application for Windows Phone 7 in TDD
Developing application for Windows Phone 7 in TDDMichele Capra
 

What's hot (19)

Using Cerberus and PySpark to validate semi-structured datasets
Using Cerberus and PySpark to validate semi-structured datasetsUsing Cerberus and PySpark to validate semi-structured datasets
Using Cerberus and PySpark to validate semi-structured datasets
 
Java
JavaJava
Java
 
groovy & grails - lecture 12
groovy & grails - lecture 12groovy & grails - lecture 12
groovy & grails - lecture 12
 
NoSQL Injections in Node.js - The case of MongoDB
NoSQL Injections in Node.js - The case of MongoDBNoSQL Injections in Node.js - The case of MongoDB
NoSQL Injections in Node.js - The case of MongoDB
 
groovy & grails - lecture 2
groovy & grails - lecture 2groovy & grails - lecture 2
groovy & grails - lecture 2
 
RESTful Web Applications with Google Go
RESTful Web Applications with Google GoRESTful Web Applications with Google Go
RESTful Web Applications with Google Go
 
NodeJs
NodeJsNodeJs
NodeJs
 
HeadCouch - CouchDB PHP Client
HeadCouch - CouchDB PHP ClientHeadCouch - CouchDB PHP Client
HeadCouch - CouchDB PHP Client
 
groovy & grails - lecture 11
groovy & grails - lecture 11groovy & grails - lecture 11
groovy & grails - lecture 11
 
Source Code for Dpilot
Source Code for Dpilot Source Code for Dpilot
Source Code for Dpilot
 
Dpilot Source Code With ScreenShots
Dpilot Source Code With ScreenShots Dpilot Source Code With ScreenShots
Dpilot Source Code With ScreenShots
 
Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Amazon Cognito使って認証したい?それならSpring Security使いましょう!Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Amazon Cognito使って認証したい?それならSpring Security使いましょう!
 
GoCracow #5 Bartlomiej klimczak - GoBDD
GoCracow #5 Bartlomiej klimczak - GoBDDGoCracow #5 Bartlomiej klimczak - GoBDD
GoCracow #5 Bartlomiej klimczak - GoBDD
 
Read, store and create xml and json
Read, store and create xml and jsonRead, store and create xml and json
Read, store and create xml and json
 
PostgreSQL High-Availability and Geographic Locality using consul
PostgreSQL High-Availability and Geographic Locality using consulPostgreSQL High-Availability and Geographic Locality using consul
PostgreSQL High-Availability and Geographic Locality using consul
 
PuppetDB, Puppet Explorer and puppetdbquery
PuppetDB, Puppet Explorer and puppetdbqueryPuppetDB, Puppet Explorer and puppetdbquery
PuppetDB, Puppet Explorer and puppetdbquery
 
Integration with Camel
Integration with CamelIntegration with Camel
Integration with Camel
 
Developing application for Windows Phone 7 in TDD
Developing application for Windows Phone 7 in TDDDeveloping application for Windows Phone 7 in TDD
Developing application for Windows Phone 7 in TDD
 
Little Big Ruby
Little Big RubyLittle Big Ruby
Little Big Ruby
 

Similar to Asynchronicity: concurrency. A tale of

Introduction to Vert.x
Introduction to Vert.xIntroduction to Vert.x
Introduction to Vert.xYiguang Hu
 
WebTalk - Implementing Web Services with a dedicated Java daemon
WebTalk - Implementing Web Services with a dedicated Java daemonWebTalk - Implementing Web Services with a dedicated Java daemon
WebTalk - Implementing Web Services with a dedicated Java daemonGeert Van Pamel
 
Monitoring OSGi Applications with the Web Console
Monitoring OSGi Applications with the Web ConsoleMonitoring OSGi Applications with the Web Console
Monitoring OSGi Applications with the Web ConsoleCarsten Ziegeler
 
Monitoring OSGi Applications with the Web Console - Carsten Ziegeler
Monitoring OSGi Applications with the Web Console - Carsten ZiegelerMonitoring OSGi Applications with the Web Console - Carsten Ziegeler
Monitoring OSGi Applications with the Web Console - Carsten Ziegelermfrancis
 
Monitoring OSGi Applications with the Web Console
Monitoring OSGi Applications with the Web ConsoleMonitoring OSGi Applications with the Web Console
Monitoring OSGi Applications with the Web ConsoleAdobe
 
jQuery - Chapter 5 - Ajax
jQuery - Chapter 5 -  AjaxjQuery - Chapter 5 -  Ajax
jQuery - Chapter 5 - AjaxWebStackAcademy
 
Scalable network applications, event-driven - Node JS
Scalable network applications, event-driven - Node JSScalable network applications, event-driven - Node JS
Scalable network applications, event-driven - Node JSCosmin Mereuta
 
お題でGroovyプログラミング: Part A
お題でGroovyプログラミング: Part Aお題でGroovyプログラミング: Part A
お題でGroovyプログラミング: Part AKazuchika Sekiya
 
Using and scaling Rack and Rack-based middleware
Using and scaling Rack and Rack-based middlewareUsing and scaling Rack and Rack-based middleware
Using and scaling Rack and Rack-based middlewareAlona Mekhovova
 
HTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJSHTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJSRobert Nyman
 
Paris js extensions
Paris js extensionsParis js extensions
Paris js extensionserwanl
 
HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranRobert Nyman
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?Remy Sharp
 

Similar to Asynchronicity: concurrency. A tale of (20)

Introduction to Vert.x
Introduction to Vert.xIntroduction to Vert.x
Introduction to Vert.x
 
Ajax chap 4
Ajax chap 4Ajax chap 4
Ajax chap 4
 
WebTalk - Implementing Web Services with a dedicated Java daemon
WebTalk - Implementing Web Services with a dedicated Java daemonWebTalk - Implementing Web Services with a dedicated Java daemon
WebTalk - Implementing Web Services with a dedicated Java daemon
 
Monitoring OSGi Applications with the Web Console
Monitoring OSGi Applications with the Web ConsoleMonitoring OSGi Applications with the Web Console
Monitoring OSGi Applications with the Web Console
 
Monitoring OSGi Applications with the Web Console - Carsten Ziegeler
Monitoring OSGi Applications with the Web Console - Carsten ZiegelerMonitoring OSGi Applications with the Web Console - Carsten Ziegeler
Monitoring OSGi Applications with the Web Console - Carsten Ziegeler
 
Monitoring OSGi Applications with the Web Console
Monitoring OSGi Applications with the Web ConsoleMonitoring OSGi Applications with the Web Console
Monitoring OSGi Applications with the Web Console
 
Frontend Servers and NGINX: What, Where and How
Frontend Servers and NGINX: What, Where and HowFrontend Servers and NGINX: What, Where and How
Frontend Servers and NGINX: What, Where and How
 
jQuery - Chapter 5 - Ajax
jQuery - Chapter 5 -  AjaxjQuery - Chapter 5 -  Ajax
jQuery - Chapter 5 - Ajax
 
Scalable network applications, event-driven - Node JS
Scalable network applications, event-driven - Node JSScalable network applications, event-driven - Node JS
Scalable network applications, event-driven - Node JS
 
J query 01.07.2013
J query 01.07.2013J query 01.07.2013
J query 01.07.2013
 
J query 01.07.2013.html
J query 01.07.2013.htmlJ query 01.07.2013.html
J query 01.07.2013.html
 
お題でGroovyプログラミング: Part A
お題でGroovyプログラミング: Part Aお題でGroovyプログラミング: Part A
お題でGroovyプログラミング: Part A
 
Xml http request
Xml http requestXml http request
Xml http request
 
php part 2
php part 2php part 2
php part 2
 
Using and scaling Rack and Rack-based middleware
Using and scaling Rack and Rack-based middlewareUsing and scaling Rack and Rack-based middleware
Using and scaling Rack and Rack-based middleware
 
HTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJSHTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJS
 
Paris js extensions
Paris js extensionsParis js extensions
Paris js extensions
 
HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - Altran
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?
 

More from Joel Lord

From Ceasar Cipher To Quantum Cryptography
From Ceasar Cipher To Quantum CryptographyFrom Ceasar Cipher To Quantum Cryptography
From Ceasar Cipher To Quantum CryptographyJoel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Joel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
Mot de passe oublié? Absolument!
Mot de passe oublié? Absolument!Mot de passe oublié? Absolument!
Mot de passe oublié? Absolument!Joel Lord
 
Learning Machine Learning
Learning Machine LearningLearning Machine Learning
Learning Machine LearningJoel Lord
 
Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Joel Lord
 
WTH is a JWT
WTH is a JWTWTH is a JWT
WTH is a JWTJoel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Joel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
WTH is a JWT
WTH is a JWTWTH is a JWT
WTH is a JWTJoel Lord
 
I Don't Care About Security
I Don't Care About Security I Don't Care About Security
I Don't Care About Security Joel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)Joel Lord
 
Secure your SPA with Auth0
Secure your SPA with Auth0Secure your SPA with Auth0
Secure your SPA with Auth0Joel Lord
 
Learning Machine Learning
Learning Machine LearningLearning Machine Learning
Learning Machine LearningJoel Lord
 
Learning Machine Learning
Learning Machine LearningLearning Machine Learning
Learning Machine LearningJoel Lord
 

More from Joel Lord (20)

From Ceasar Cipher To Quantum Cryptography
From Ceasar Cipher To Quantum CryptographyFrom Ceasar Cipher To Quantum Cryptography
From Ceasar Cipher To Quantum Cryptography
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Forgot Password? Yes I Did!
Forgot Password? Yes I Did!
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
Mot de passe oublié? Absolument!
Mot de passe oublié? Absolument!Mot de passe oublié? Absolument!
Mot de passe oublié? Absolument!
 
Learning Machine Learning
Learning Machine LearningLearning Machine Learning
Learning Machine Learning
 
Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Forgot Password? Yes I Did!
Forgot Password? Yes I Did!
 
WTH is a JWT
WTH is a JWTWTH is a JWT
WTH is a JWT
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
Forgot Password? Yes I Did!
Forgot Password? Yes I Did!Forgot Password? Yes I Did!
Forgot Password? Yes I Did!
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
WTH is a JWT
WTH is a JWTWTH is a JWT
WTH is a JWT
 
I Don't Care About Security
I Don't Care About Security I Don't Care About Security
I Don't Care About Security
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)I Don't Care About Security (And Neither Should You)
I Don't Care About Security (And Neither Should You)
 
Secure your SPA with Auth0
Secure your SPA with Auth0Secure your SPA with Auth0
Secure your SPA with Auth0
 
Learning Machine Learning
Learning Machine LearningLearning Machine Learning
Learning Machine Learning
 
Learning Machine Learning
Learning Machine LearningLearning Machine Learning
Learning Machine Learning
 

Recently uploaded

SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Paul Calvano
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhimiss dipika
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationLinaWolf1
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Sonam Pathan
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxmibuzondetrabajo
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一z xss
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作ys8omjxb
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
Internet of Things Presentation (IoT).pptx
Internet of Things Presentation (IoT).pptxInternet of Things Presentation (IoT).pptx
Internet of Things Presentation (IoT).pptxErYashwantJagtap
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationMarko4394
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxeditsforyah
 

Recently uploaded (17)

SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhi
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 Documentation
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptx
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
 
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
Internet of Things Presentation (IoT).pptx
Internet of Things Presentation (IoT).pptxInternet of Things Presentation (IoT).pptx
Internet of Things Presentation (IoT).pptx
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentation
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptx
 

Asynchronicity: concurrency. A tale of

  • 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");
  • 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!
  • 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 ! 🥪 🍞 🥜 🍓 🥪 🍞 🥜 🍓 🥪 🍞 🥜 🍓 🥪 ! 🥪 ! 🥪 🥪 🥪 🥪
  • 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);
  • 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); }); }); }); }); }); });
  • 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) => {
  • 84. @joel__lord #CodeMash Step by step Parallel events 🍓🍞 🥜 🥪 🍞 🥜 🥪 🍓
  • 85. @joel__lord #CodeMash Code let PBnJMaker = require("../pbnjmaker");
  • 89. @joel__lord #CodeMash Code function handleIngredients(err) { if (err) return console.log(“Error”); ingredients++; if (ingredients === 3) { prepareSandwich(); } }
  • 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); } }); }
  • 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");
  • 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”);
  • 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); });
  • 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); });
  • 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) });
  • 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
  • 169. @joel__lord #CodeMash RxJS ! Manipulate data, synchronous or asynchronous as streams ! Manipulate streams like arrays
  • 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