SlideShare a Scribd company logo

Asynchonicity: concurrency. A tale of

J
Joel Lord

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

1 of 175
Download to read offline
Asynchronicity: concurrency. A tale of
(a.k.a: the subtle art of making a PB&J sandwich)
@joel__lord
#iJS18
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
#iJS18
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
#iJS18
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
#iJS18
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
#iJS18
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");

Recommended

Asynchronicity: concurrency. A tale of
Asynchronicity: concurrency. A tale ofAsynchronicity: concurrency. A tale of
Asynchronicity: concurrency. A tale ofJoel Lord
 
Reactive Web - Servlet & Async, Non-blocking I/O
Reactive Web - Servlet & Async, Non-blocking I/OReactive Web - Servlet & Async, Non-blocking I/O
Reactive Web - Servlet & Async, Non-blocking I/OArawn Park
 
jSession #4 - Maciej Puchalski - Zaawansowany retrofit
jSession #4 - Maciej Puchalski - Zaawansowany retrofitjSession #4 - Maciej Puchalski - Zaawansowany retrofit
jSession #4 - Maciej Puchalski - Zaawansowany retrofitjSession
 
Webinar: MongoDB Persistence with Java and Morphia
Webinar: MongoDB Persistence with Java and MorphiaWebinar: MongoDB Persistence with Java and Morphia
Webinar: MongoDB Persistence with Java and MorphiaMongoDB
 
Search Evolution - Von Lucene zu Solr und ElasticSearch
Search Evolution - Von Lucene zu Solr und ElasticSearchSearch Evolution - Von Lucene zu Solr und ElasticSearch
Search Evolution - Von Lucene zu Solr und ElasticSearchFlorian Hopf
 
Writing Swift code with great testability
Writing Swift code with great testabilityWriting Swift code with great testability
Writing Swift code with great testabilityJohn Sundell
 

More Related Content

What's hot

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
 
10 sharing files and data in windows phone 8
10   sharing files and data in windows phone 810   sharing files and data in windows phone 8
10 sharing files and data in windows phone 8WindowsPhoneRocks
 
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
 
Integration with Camel
Integration with CamelIntegration with Camel
Integration with CamelJosué Neis
 
GoCracow #5 Bartlomiej klimczak - GoBDD
GoCracow #5 Bartlomiej klimczak - GoBDDGoCracow #5 Bartlomiej klimczak - GoBDD
GoCracow #5 Bartlomiej klimczak - GoBDDBartłomiej Kiełbasa
 
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
 
PuppetDB, Puppet Explorer and puppetdbquery
PuppetDB, Puppet Explorer and puppetdbqueryPuppetDB, Puppet Explorer and puppetdbquery
PuppetDB, Puppet Explorer and puppetdbqueryPuppet
 
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
 
HtmlElements – естественное расширение PageObject
HtmlElements – естественное расширение PageObjectHtmlElements – естественное расширение PageObject
HtmlElements – естественное расширение PageObjectSQALab
 
HeadCouch - CouchDB PHP Client
HeadCouch - CouchDB PHP ClientHeadCouch - CouchDB PHP Client
HeadCouch - CouchDB PHP ClientDimitar Ivanov
 
Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Amazon Cognito使って認証したい?それならSpring Security使いましょう!Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Amazon Cognito使って認証したい?それならSpring Security使いましょう!Ryosuke Uchitate
 
Lean React - Patterns for High Performance [ploneconf2017]
Lean React - Patterns for High Performance [ploneconf2017]Lean React - Patterns for High Performance [ploneconf2017]
Lean React - Patterns for High Performance [ploneconf2017]Devon Bernard
 
NodeJs
NodeJsNodeJs
NodeJsdizabl
 

What's hot (20)

groovy & grails - lecture 12
groovy & grails - lecture 12groovy & grails - lecture 12
groovy & grails - lecture 12
 
RESTful Web Applications with Google Go
RESTful Web Applications with Google GoRESTful Web Applications with Google Go
RESTful Web Applications with Google Go
 
groovy & grails - lecture 2
groovy & grails - lecture 2groovy & grails - lecture 2
groovy & grails - lecture 2
 
10 sharing files and data in windows phone 8
10   sharing files and data in windows phone 810   sharing files and data in windows phone 8
10 sharing files and data in windows phone 8
 
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
 
Integration with Camel
Integration with CamelIntegration with Camel
Integration with Camel
 
GoCracow #5 Bartlomiej klimczak - GoBDD
GoCracow #5 Bartlomiej klimczak - GoBDDGoCracow #5 Bartlomiej klimczak - GoBDD
GoCracow #5 Bartlomiej klimczak - GoBDD
 
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
 
PuppetDB, Puppet Explorer and puppetdbquery
PuppetDB, Puppet Explorer and puppetdbqueryPuppetDB, Puppet Explorer and puppetdbquery
PuppetDB, Puppet Explorer and puppetdbquery
 
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
 
Mongo db for c# developers
Mongo db for c# developersMongo db for c# developers
Mongo db for c# developers
 
Dropwizard
DropwizardDropwizard
Dropwizard
 
HtmlElements – естественное расширение PageObject
HtmlElements – естественное расширение PageObjectHtmlElements – естественное расширение PageObject
HtmlElements – естественное расширение PageObject
 
groovy & grails - lecture 11
groovy & grails - lecture 11groovy & grails - lecture 11
groovy & grails - lecture 11
 
HeadCouch - CouchDB PHP Client
HeadCouch - CouchDB PHP ClientHeadCouch - CouchDB PHP Client
HeadCouch - CouchDB PHP Client
 
Mongo db for C# Developers
Mongo db for C# DevelopersMongo db for C# Developers
Mongo db for C# Developers
 
Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Amazon Cognito使って認証したい?それならSpring Security使いましょう!Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Amazon Cognito使って認証したい?それならSpring Security使いましょう!
 
Lean React - Patterns for High Performance [ploneconf2017]
Lean React - Patterns for High Performance [ploneconf2017]Lean React - Patterns for High Performance [ploneconf2017]
Lean React - Patterns for High Performance [ploneconf2017]
 
NodeJs
NodeJsNodeJs
NodeJs
 

Similar to Asynchonicity: concurrency. A tale of

Introduction to Vert.x
Introduction to Vert.xIntroduction to Vert.x
Introduction to Vert.xYiguang Hu
 
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
 
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
 
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
 
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
 
お題でGroovyプログラミング: Part A
お題でGroovyプログラミング: Part Aお題でGroovyプログラミング: Part A
お題でGroovyプログラミング: Part AKazuchika Sekiya
 
jQuery - Chapter 5 - Ajax
jQuery - Chapter 5 -  AjaxjQuery - Chapter 5 -  Ajax
jQuery - Chapter 5 - AjaxWebStackAcademy
 
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
 
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
 
Tomcat连接池配置方法V2.1
Tomcat连接池配置方法V2.1Tomcat连接池配置方法V2.1
Tomcat连接池配置方法V2.1Zianed Hou
 
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
 

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

Introduction to Vert.x
Introduction to Vert.xIntroduction to Vert.x
Introduction to Vert.x
 
Paris js extensions
Paris js extensionsParis js extensions
Paris js extensions
 
J query 01.07.2013.html
J query 01.07.2013.htmlJ query 01.07.2013.html
J query 01.07.2013.html
 
J query 01.07.2013
J query 01.07.2013J query 01.07.2013
J query 01.07.2013
 
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
 
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
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
 
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
 
Ajax chap 4
Ajax chap 4Ajax chap 4
Ajax chap 4
 
お題でGroovyプログラミング: Part A
お題でGroovyプログラミング: Part Aお題でGroovyプログラミング: Part A
お題でGroovyプログラミング: Part A
 
Xml http request
Xml http requestXml http request
Xml http request
 
jQuery - Chapter 5 - Ajax
jQuery - Chapter 5 -  AjaxjQuery - Chapter 5 -  Ajax
jQuery - Chapter 5 - Ajax
 
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
 
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
 
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 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
Tomcat连接池配置方法V2.1
Tomcat连接池配置方法V2.1Tomcat连接池配置方法V2.1
Tomcat连接池配置方法V2.1
 
Ajax - a quick introduction
Ajax - a quick introductionAjax - a quick introduction
Ajax - a quick introduction
 
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
 

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

Red shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's CyberspaceRed shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's Cyberspacesttyk
 
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff HustonDNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff HustonAPNIC
 
Model Jaringan network jaringan komputer.pdf
Model Jaringan network jaringan komputer.pdfModel Jaringan network jaringan komputer.pdf
Model Jaringan network jaringan komputer.pdfgalfinprihardiputra0
 
Augmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & DefenseAugmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & Defensethirdeyegen65
 
Disobey 2024: Karri Huhtanen: Wi-Fi Roaming Security and Privacy
Disobey 2024: Karri Huhtanen: Wi-Fi Roaming Security and PrivacyDisobey 2024: Karri Huhtanen: Wi-Fi Roaming Security and Privacy
Disobey 2024: Karri Huhtanen: Wi-Fi Roaming Security and PrivacyKarri Huhtanen
 
AWS Overview of AWS Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS  Clarify, Feature Store, Hyper parameter TuningAWS Overview of AWS  Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS Clarify, Feature Store, Hyper parameter TuningVarun Garg
 
Biometrics Technology Intresting PPT
Biometrics Technology Intresting PPTBiometrics Technology Intresting PPT
Biometrics Technology Intresting PPTPraveenKumarThota7
 
Augmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical ProfessionalsAugmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical Professionalsthirdeyegen65
 
NANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff HustonNANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff HustonAPNIC
 
Regulation is Coming - Trusted Media Summit 2023
Regulation is Coming - Trusted Media Summit 2023Regulation is Coming - Trusted Media Summit 2023
Regulation is Coming - Trusted Media Summit 2023Damar Juniarto
 

Recently uploaded (10)

Red shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's CyberspaceRed shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's Cyberspace
 
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff HustonDNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
 
Model Jaringan network jaringan komputer.pdf
Model Jaringan network jaringan komputer.pdfModel Jaringan network jaringan komputer.pdf
Model Jaringan network jaringan komputer.pdf
 
Augmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & DefenseAugmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & Defense
 
Disobey 2024: Karri Huhtanen: Wi-Fi Roaming Security and Privacy
Disobey 2024: Karri Huhtanen: Wi-Fi Roaming Security and PrivacyDisobey 2024: Karri Huhtanen: Wi-Fi Roaming Security and Privacy
Disobey 2024: Karri Huhtanen: Wi-Fi Roaming Security and Privacy
 
AWS Overview of AWS Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS  Clarify, Feature Store, Hyper parameter TuningAWS Overview of AWS  Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS Clarify, Feature Store, Hyper parameter Tuning
 
Biometrics Technology Intresting PPT
Biometrics Technology Intresting PPTBiometrics Technology Intresting PPT
Biometrics Technology Intresting PPT
 
Augmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical ProfessionalsAugmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical Professionals
 
NANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff HustonNANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff Huston
 
Regulation is Coming - Trusted Media Summit 2023
Regulation is Coming - Trusted Media Summit 2023Regulation is Coming - Trusted Media Summit 2023
Regulation is Coming - Trusted Media Summit 2023
 

Asynchonicity: 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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");
  • 25. @joel__lord #iJS18 Our Agenda ! Event Loop ! Callbacks ! Promises ! Generators ! Await/Async ! Events ! Reactive Events
  • 26. How to make a PB&J sandwich
  • 27. @joel__lord #iJS18 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!
  • 31. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • ! 🥪
  • 32. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • ! 🥪 🍞
  • 33. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • ! 🥪 🍞 🥜
  • 34. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • ! 🥪 🍞 🥜 🍓
  • 35. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • Prepares the sandwich • ! 🥪 🍞 🥜 🍓
  • 36. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • Prepares the sandwich • Here’s your sandwich ! 🥪 🍞 🥜 🍓 🥪
  • 37. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • A new customer arrives: I want a sandwich! • ! 🥪 🍞 🥜 🍓 🥪 ! 🥪
  • 38. @joel__lord #iJS18 Classic Architecture (PHP, Java) • I want a sandwich! • Process start • Fetches the ingredients • A new customer arrives: I want a sandwich! • Another process starts • ! 🥪 🍞 🥜 🍓 🥪 ! 🥪
  • 39. @joel__lord #iJS18 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 • ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞
  • 40. @joel__lord #iJS18 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 • ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 ! 🥪
  • 41. @joel__lord #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓
  • 48. @joel__lord #iJS18 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 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 🥪 ! 🥪 🍞 🥜 🍓 🥪
  • 49. @joel__lord #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 Event Loop (NodeJS) • I want a sandwich! • Sure • “Worker, Make a sandwich” • A new customer arrives: I want a sandwich! • Sure • “Other worker, make a sandwich” • Here is your sandwich customer 1 ! 🥪 🍞 🥜 🍓 🥪 🍞 ! 🥪 🥪 🥜 ! 🥪 🍓 🍞 🥜 🥪 🍓 🥪
  • 63. @joel__lord #iJS18 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 #iJS18 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 ! 🥪 🍞 🥜 🍓 🥪 🍞 🥜 🍓 🥪 🍞 🥜 🍓 🥪 ! 🥪 ! 🥪 🥪 🥪 🥪
  • 66. @joel__lord #iJS18 Code let PBnJMaker = require("./pbnjmaker"); PBnJMaker.fetchBread(); PBnJMaker.fetchPeanutButter(); PBnJMaker.fetchJam(); PBnJMaker.spreadPeanutButter(); PBnJMaker.spreadJam(); let result = PBnJMaker.closeSandwich(); console.log("Eat that " + result);
  • 69. @joel__lord #iJS18 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");
  • 70. @joel__lord #iJS18 What is a callback ! Simply a function as an argument to a function ! Could be synchronous or asynchronous
  • 71. @joel__lord #iJS18 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 #iJS18 What is a callback ! Simply a function as an argument to a function ! Could be synchronous or asynchronous
  • 73. @joel__lord #iJS18 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");
  • 74. @joel__lord #iJS18 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”); }.. .....................
  • 75. @joel__lord #iJS18 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");
  • 76. @joel__lord #iJS18 What is a callback Asynchronous callback and the event loop fs.readFile("./cb.txt", (err, data) => { console.log(data); }); console.log("after");
  • 77. @joel__lord #iJS18 What is a callback Asynchronous callback and the event loop console.log("after"); (err, data) => { console.log(data); }
  • 78. @joel__lord #iJS18 What is a callback Asynchronous callback and the event loop (err, data) => { console.log(data); }
  • 79. @joel__lord #iJS18 What is a callback Asynchronous callback and the event loop (err, data) => { console.log(data); }
  • 80. @joel__lord #iJS18 What is a callback Asynchronous callback and the event loop
  • 81. @joel__lord #iJS18 Code let PBnJMaker = require("../pbnjmaker"); PBnJMaker.fetchBread(() => { PBnJMaker.fetchPeanutButter(() => { PBnJMaker.fetchJam(() => { PBnJMaker.spreadPeanutButter(() => { PBnJMaker.spreadJam(() => { PBnJMaker.closeSandwich((err, output) => { console.log("Eat that " + output); }); }); }); }); }); });
  • 83. @joel__lord #iJS18 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); } }); } }); } }); } }); } }); } });
  • 84. @joel__lord #iJS18 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) => {
  • 86. @joel__lord #iJS18 Step by step Parallel events 🍓🍞 🥜 🥪 🍞 🥜 🥪 🍓
  • 87. @joel__lord #iJS18 Code let PBnJMaker = require("../pbnjmaker");
  • 91. @joel__lord #iJS18 Code function handleIngredients(err) { if (err) return console.log(“Error”); ingredients++; if (ingredients === 3) { prepareSandwich(); } }
  • 93. @joel__lord #iJS18 Code function preparationStepCompleted(err) { if (err) return console.log(“Error"); steps++; if (steps === 2) { completeSandwich(); } }
  • 94. @joel__lord #iJS18 Code function completeSandwich(err) { PBnJMaker.closeSandwich((err, result) => { if (err) { console.log("An error occurred"); } else { console.log("Eat that " + result); } }); }
  • 98. @joel__lord #iJS18 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");
  • 99. @joel__lord #iJS18 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");
  • 100. @joel__lord #iJS18 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");
  • 104. @joel__lord #iJS18 Code Result PBnJMaker.fetchBread().then(() => { return PBnJMaker.fetchPeanutButter(); })
  • 105. @joel__lord #iJS18 Code Result PBnJMaker.fetchBread().then(() => { return PBnJMaker.fetchPeanutButter(); }).then(() => {
  • 106. @joel__lord #iJS18 Code Result PBnJMaker.fetchBread().then(() => { return PBnJMaker.fetchPeanutButter(); }).then(() => { return PBnJMaker.fetchJam();
  • 107. @joel__lord #iJS18 Code Result }).then(() => { return PBnJMaker.spreadPeanutButter();
  • 108. @joel__lord #iJS18 Code Result }).then(() => { return PBnJMaker.spreadJam();
  • 109. @joel__lord #iJS18 Code Result }).then(() => { return PBnJMaker.closeSandwich();
  • 110. @joel__lord #iJS18 Code Result }).then((result) => { console.log("Eat that " + result);
  • 112. @joel__lord #iJS18 Code Result }).catch((err) => { console.log("Error with ingredients");
  • 113. @joel__lord #iJS18 Code Result }).catch((err) => { console.log("Error with ingredients"); }).catch((err) => { console.log(“Error preparing”); }).catch((err) => { console.log(“Error somewhere”);
  • 115. @joel__lord #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 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 #iJS18 Events in the browser ! At the core of the original Javascript ! window.onready = … ! button.onclick = …
  • 164. @joel__lord #iJS18 Node Event Emitter ! In node, you can use the event emitter ! Create you own events for a library
  • 165. @joel__lord #iJS18 Node Event Emitter ! In node, you can use the event emitter ! Create you own events for a library
  • 169. @joel__lord #iJS18 RxJS ! Manipulate data, synchronous or asynchronous as streams ! Manipulate streams like arrays
  • 173. @joel__lord #iJS18 Summary Asynchronous patterns ! The Event Loop ! Callbacks ! Promises ! Generators ! Async/Await ! Events ! Reactive Stream
  • 174. @joel__lord #iJS18 Summary Asynchronous patterns ! The Event Loop ! Callbacks ! Promises ! Generators ! Async/Await ! Events ! Reactive Stream ! …. How to make a PBnJ sandwich!
  • 175. Asynchronicity: concurrency. A tale of iJS, London, UK April 11, 2018 @joel__lord joellord Special thanks to @tomasz_ducin for the inspiration