Asynchronous JavaScript - there and back again

@maciejtreder
Asynchronous and Synchronous JavaScript. There and back again.

View Slide

single thread == single action

View Slide

function saySomethingNice():void {
}
setTimeout(() => console.log(`Hello ${name}!`, 0));
saySomethingNice();
}
greet(`John`);
Nice to meet you.
Hello John!

View Slide

Those are not part of JavaScript
• setTimeout
• setInterval
• fetch
• DOM
• window

View Slide

Event Loop
stack
callbacks queue
function saySthNice():void {
}
saySthNice();
}
greet(`John`);
saySthNice();

View Slide

Event Loop
stack
callbacks queue
main()
}
saySthNice();
}
greet(`John`);
saySthNice();

View Slide

Event Loop
greet()
stack
callbacks queue
main()
}
saySthNice();
}
greet(`John`);
saySthNice();

View Slide

Event Loop
greet()
stack
callbacks queue
main()
}
saySthNice();
}
greet(`John`);
setTimeout()
saySthNice();

View Slide

Event Loop
greet()
stack setTimeout API
callbacks queue
main()
}
saySthNice();
}
greet(`John`);
setTimeout()
saySthNice();

View Slide

Event Loop
greet()
callbacks queue
main()
}
saySthNice();
}
greet(`John`);
setTimeout()
console.log() setTimeout(() => console.log(`Hello ${name}!`, 0));
saySthNice();

View Slide

Event Loop
greet()
callbacks queue
main()
}
saySthNice();
}
greet(`John`);
setTimeout()
console.log()
saySthNice();

View Slide

Event Loop
greet()
callbacks queue
main()
}
saySthNice();
}
greet(`John`);
console.log()
saySthNice();

View Slide

Event Loop
greet()
callbacks queue
main()
}
saySthNice();
}
greet(`John`);
saySthNice()
console.log()
saySthNice();

View Slide

Event Loop
greet()
callbacks queue
main()
}
saySthNice();
}
greet(`John`);
saySthNice()
console.log()
console.log()
saySthNice();

View Slide

Event Loop
greet()
callbacks queue
main()
}
saySthNice();
}
greet(`John`);
saySthNice()
console.log()
console.log()
saySthNice();
Nice to meet you.

View Slide

Event Loop
greet()
callbacks queue
main()
}
saySthNice();
}
greet(`John`);
saySthNice()
console.log()
saySthNice();
Nice to meet you.

View Slide

Event Loop
greet()
callbacks queue
main()
}
saySthNice();
}
greet(`John`);
console.log()
saySthNice();
Nice to meet you.

View Slide

Event Loop
callbacks queue
main()
}
saySthNice();
}
greet(`John`);
console.log()
saySthNice();
Nice to meet you.

View Slide

Event Loop
callbacks queue
}
saySthNice();
}
greet(`John`);
console.log()
saySthNice();
Nice to meet you.

View Slide

Event Loop
callbacks queue
}
saySthNice();
}
greet(`John`);
console.log()
saySthNice();
Nice to meet you.
Hello John!

View Slide

Event Loop
callbacks queue
}
saySthNice();
}
greet(`John`);
saySthNice();
Nice to meet you.
Hello John!

View Slide

Case study
maciejtreder.github.io/asynchronous-javascript/
[
{
"id": 1,
"name": "James Cameron"
},
{
"id": 2,
"name": "Quentin Tarantino"
},
{
"id": 3,
"name": "Wes Anderson"
},
{
"id": 4,
"name": "Stanley Kubrick"
}
]
[
{
"id": 4,
"title": "Django Unchained"
},
{
"id": 5,
"title": "Inglourious Basterds"
},
{
"id": 6,
"title": "Grindhouse"
}
]
{
"id": 1,
"reviewer": "Andy",
"rating": 10
},
{
"id": 2,
"reviewer": "Margaret",
"rating": 5
},
{
"id": 3,
"reviewer": "Bridget",
"rating": 8
}
]
/directors /directors/{id}/movies /movies/{id}/reviews

View Slide

});
});
});
});

View Slide

});
});
});
});
directors`, {json: true}, (err, res, directors) => {
let tarantinoId = directors.find(director => director.name === "Quentin Tarantino").id;

View Slide

});
});
});
});
request(`https://maciejtreder.github.io/asynchronous-javascript/directors/${tarantinoId}/
movies`, {json: true}, (err, res, movies) => {
let checkedMoviesCount = 0;

View Slide

});
});
});
});
movies.forEach(movie => {
request(`https://maciejtreder.github.io./asynchronous-javascript/movies/${movie.id}/
reviews`, {json: true}, (err, res, reviews) => {

View Slide

});
});
});
});
checkedMoviesCount++;
aggregatedScore = 0;
reviews.forEach(review => aggregatedScore += review.rating);
movie.averageRating = aggregatedScore / reviews.length;

View Slide

});
});
});
});
checkedMoviesCount++;
reviews.forEach(review => aggregatedScore += review.rating);
movie.averageRating = aggregatedScore / reviews.length;
if (checkedMoviesCount === movies.length) {
movies.sort((m1, m2) => m2.averageRating - m1.averageRating);
console.log(`The best movie by Quentin Tarantino is... ${movies[0].title} !!!`);
}

View Slide

3 REST calls & 8 nested levels

View Slide

directors`, {json: true}, (err, res, body) => findDirector(body, 'Quentin Tarantino’));

View Slide

function findDirector(directors, name) {
let directorId = directors.find(director => director.name === name).id;
request(`https://maciejtreder.github.io/asynchronous-javascript/directors/${directorId}/
movies`, {json: true}, (err, res, body) => getReviews(body, name));
}

View Slide

}
function getReviews(movies, director) {
let checkedSoFar = {count: 0};
request(`https://maciejtreder.github.io/asynchronous-javascript/movies/${movie.id}/
reviews`, {json: true}, (err, res, body) => calculateAverageScore(body, movie, director, checkedSoFar, movies
));
});
}

View Slide

));
});
}

View Slide

));
});
}
function calculateAverageScore(reviews, movie, director, checkedSoFar, movies) {
checkedSoFar.count++;
count = 0;
reviews.forEach(review => {
aggregatedScore += review.rating;
count++;
});
movie.averageRating = aggregatedScore / count;
if (checkedSoFar.count == movies.length) {
console.log(`The best movie by ${director} is... ${movies[0].title} !!!`);
}
}

View Slide

Understanding callbacks
https://www.twilio.com/blog/asynchronous-javascript-understanding-callbacks

View Slide

Organizing Callbacks for Readability and Reusability
https://www.twilio.com/blog/asynchronous-javascript-organize-callbacks-readability-reusability

View Slide

Promises

View Slide

Promises
const promise1 = new Promise(resolve => {
setTimeout(() => resolve(`Value from promise 1`), 1000);
});
promise1.then(value => console.log(`Promise resolved with value: ${value}`));
promise1.then(value => console.log(`One more time ${value}`));
Promise resolved with value: Value from promise 1
One more time Value from promise 1

View Slide

Promises
const promise1 = new Promise(resolve => {
resolve(`Value from promise 1`);
resolve(`Promise resolves only once!`);
});
promise1.then(value => console.log(`Promise resolved with value: ${value}`));
Promise resolved with value: Value from promise 1

View Slide

Promises
const promise2 = new Promise((resolve, reject) => {
reject({reason: `Reject type doesn't depend on the Promise type, and it's always any.`});
});
promise2.then(value => {}, rejection => console.log(`Handled rejection`, rejection));
promise2.then(value => {}).catch(rejection => console.log(`Another way of handling rejection`,
rejection));
Handled rejection { reason:
'Reject type doesn\'t depend on the Promise type, and it\'s always any.’}
Another way of handling rejection { reason:

View Slide

Promises
const promise2 = new Promise((resolve) => {
throw {reason: `Reject type doesn't depend on the Promise type, and it's always any.`};
});
promise2.then(value => {}, rejection => console.log(`Handled rejection`, rejection));
promise2.then(value => {}).catch(rejection => console.log(`Another way of handling rejection`,
rejection));
Handled rejection { reason:
Another way of handling rejection { reason:

View Slide

This won’t work
const promise2 = new Promise((resolve, reject) => {
reject({reason: `Reject type doesn't depend on the Promise type, and it's always any.`});
});
promise2.then(value => {}); //unhandled rejection
try {
promise2.then(value => {});
} catch(error) {
console.log(`Catched error`);
}
(node:14312) UnhandledPromiseRejectionWarning: #

View Slide

Chaining
promise1
.then(val => square(val))
.then(value => console.log(value));
9
const promise1 = Promise.resolve(3);
const square = (val) => Promise.resolve(val * val);
promise1.then(value => {
square(value).then(value => {
console.log(value);
});
});
==

View Slide

Chaining
promise1
.then(() => {throw {};})
.then(val => console.log(val))
.catch(error => console.log(`Catched`))
.finally(() => console.log(`Finally statement`));
Catched
Finally statement

View Slide

Chaining
promise1
.then(() => {throw null;})
.catch(error => {
console.log(`Error in second promise`)
return 1;
})
.catch(error => console.log(`Catched: ${error}`))
.finally(() => console.log(`Finally statement`));
Error in second promise
1
Finally statement

View Slide

Combining
const promise2 = Promise.reject('Rejecting that!');
Promise.all([promise1, square(2)]).then(val => console.log(val));
Promise.all([promise1, square(2), promise2])
.catch(error => console.log(`Failed because of: ${error}`));
[ 3, 4 ]
Failed because of: Rejecting that!

View Slide

Combining
Promise.all([
promise1.catch(() => undefined),
square(2).catch(() => undefined ),
promise2.catch(() => undefined )
])
[ 3, 4, undefined ]

View Slide

Combining
const allSettled = require('promise.allsettled');
allSettled.shim();
Promise.allSettled([promise1, square(2), promise2])
[ { status: 'fulfilled', value: 3 },
{ status: 'fulfilled', value: 4 },
{ status: 'rejected', reason: 'Rejecting that!' } ]

View Slide

Combining
Promise.race([promise1, square(2), promise2])
3

View Slide

Combining
function watchDog() {
return new Promise((resolve, reject) => setTimeout(() => reject(), 2000));
}
Promise.race([
promise2.catch(() => new Promise()),
square(2),
promise1,
watchDog()
])
.catch(_ => console.log(`Non of the promises resolves before watchdog`));
3

View Slide

const fetch = require('node-fetch');
fetch(`https://maciejtreder.github.io/asynchronous-javascript/directors/`)
.then(response => response.json())
List of directors

View Slide

.then(directors => {
return fetch(`https://maciejtreder.github.io/asynchronous-javascript/directors/${tarantinoId}/
movies`);
})
Quentin Movies

View Slide

.then(directors => {
movies`);
})
.then(movies => {
let reviewsArr = [];
reviewsArr.push(
fetch(`https://maciejtreder.github.io/asynchronous-javascript/movies/${movie.id}/
reviews`)
.then(response => response.json()).then(reviews => {
return {movie: movie, reviews: reviews};
})
);
});
return Promise.all(reviewsArr);
})
[{title: movie, reviews: []}]

View Slide

movies`);
})
.then(movies => {
reviewsArr.push(
reviews`)
})
);
});
})
[{title: movie, reviews: []}]

View Slide

movies`);
})
.then(movies => {
reviewsArr.push(
reviews`)
})
);
});
})
.then(reviewSets => {
let moviesAndRatings = [];
reviewSets.forEach(reviews => {
let aggregatedScore = 0;
reviews.reviews.forEach( review => aggregatedScore += review.rating );
let averageScore = aggregatedScore / reviews.reviews.length;
moviesAndRatings.push({title: reviews.movie, averageScore: averageScore});
});
return moviesAndRatings.sort((m1, m2) => m2.averageScore - m1.averageScore)[0].title;
})
.then(movie => console.log(` ${movie.title} !`))
[{title: movie,
averageScore: score}]

View Slide

fetch(`/directors/`)
/directors
/directors/2/movies .then(directors => {
let tarantinoId = directors.findTarantino();
return fetch(`/directors/${tarantinoId}/movies`);
})
/movies/{id}/reviews .then(movies => {
let reviewsArr = fetchAllReviews(movies);
})
.then(reviewSets => {
let moviesAndRatings =
calculateAverageScores(reviewSets);
return moviesAndRatings.sort((m1, m2) => m2.aver
ageScore - m1.averageScore)[0].title;
})
.then(movie => console.log(`The best movie by Quen
tin Tarantino is... ${movie.title}!`));

View Slide

Introduction to JavaScript Promises
https://www.twilio.com/blog/asynchronous-javascript-introduction-promises

View Slide

Advanced Promises with Node.js
https://www.twilio.com/blog/asynchronous-javascript-advanced-promises-chaining-collections-nodejs

View Slide

Introduction to JavaScript Promises
https://www.twilio.com/blog/asynchronous-javascript-refactor-callbacks-promises-node-js

View Slide

RxJS

View Slide

import { Observable, Observer } from 'rxjs';
const clock$: Observable = Observable.create((observer: Observer) => {
console.log('In Observable');
setInterval(() => {
observer.next('tick');
}, 1000);
});
RxJS
clock$.subscribe(val => console.log(val));
In Observable; tick; tick; tick; tick; …

View Slide

RxJS
const clock$: Subject = new Subject();
const interval = setInterval(() => {
clock$.next('tick');
}, 1000);
tick; tick
let subscription = clock$.subscribe(val => console.log(val));
setTimeout(() => subscription.unsubscribe(), 3 * 1000);

View Slide

RxJS
}, 1000);
tick; tick
setTimeout(() => clock$.complete(), 8 * 1000);
setTimeout(() => clearInterval(interval), 9 * 1000);
let subscription = clock$.subscribe(val => console.log(val));
setTimeout(() => subscription.unsubscribe(), 3 * 1000);
setTimeout(() => subscription = clock$.subscribe(val => console.log(val)), 4*1000);
tick; tick; tick; tick

View Slide

Manipulating data
}, 1000);
setTimeout(() => clock$.complete(), 8 * 1000)
tick; tock; tick; tock; tick; tock; tick; tock
clock$.pipe(
map((val, index) => index % 2 == 0 ? val : 'tock')
).subscribe(val => console.log(val));
import { map } from 'rxjs/operators';

View Slide

Error catching
import { , Subject } from 'rxjs';
import { map, } from ‘rxjs/operators';
}, 1000);
clock$.pipe(
map((val, index) => index % 2 == 0 ? val : ‘tock’),
tick; tock; tick; tock;
setTimeout(() => console.log('Still alive?'), 12 * 1000);

View Slide

Error catching
}, 1000);
clock$.pipe(
tick; tock; tick; tock; Error: BOOOM!
setTimeout(() => clock$.error(new Error('BOOOM!')), 5 * 1000);

View Slide

Error catching
}, 1000);
clock$.pipe(
tick; tock; tick; tock;
setTimeout(() => clock$.error(new Error('BOOOM!')), 5 * 1000);
catchError(error => of('Explosion!'))
catchError
of
Explosion! Still alive?

View Slide

RxJS
12
6
3 9
1 2 4 5 7 8 10 11
tick tick tick tick tick tick
tick tick tick tick
tick tock tick tock
tick tock tick tock
BOOM!
Explosion! Still alive?
import { of, Subject } from 'rxjs';
import { map, catchError } from ‘rxjs/operators';
}, 1000);
setTimeout(() => clock$.error(new Error('BOOOM!')), 5 * 1000)
clock$.pipe(
map((val, index) => index % 2 == 0 ? val : 'tock'),
catchError(error => of('Explosion!'))

View Slide

RxJS & REST
const Axios = require('axios-observable').Axios;
const map = require('rxjs/operators').map;
const flatMap = require('rxjs/operators').flatMap;
const combineLatest = require('rxjs').combineLatest;
Axios.get('https://maciejtreder.github.io/asynchronous-javascript/directors/')
.pipe(
map(response => response.data),
List of directors

View Slide

RxJS & REST
.pipe(
map(response => response.find(director => director.name == 'Quentin Tarantino').id),
flatMap(id => Axios.get(`https://maciejtreder.github.io/asynchronous-javascript/directors/
${id}/movies`)),
Quentin Movies

View Slide

RxJS & REST
.pipe(
${id}/movies`)),
flatMap(movies => {
const observables$ = [];
Quentin Movies

View Slide

RxJS & REST
${id}/movies`)),
flatMap(movies => {
Quentin Movies

View Slide

RxJS & REST
${id}/movies`)),
flatMap(movies => {
observables$.push(
Axios.get(`https://maciejtreder.github.io/asynchronous-javascript/movies/$
{movie.id}/reviews`)
.pipe(
map(reviews => {
let count = 0; let sum = 0;
reviews.forEach(review => {count++; sum+=review.score});
return sum/reviews.length;
}),
map(average => {
return {title: movie.title, averageScore: average};
})
)
);
});
Quentin Movies

View Slide

RxJS & REST
${id}/movies`)),
flatMap(movies => {
observables$.push(
.pipe(
map(reviews => {
}),
map(average => {
})
)
);
});
return combineLatest(observables$);
}),
map(movies => movies.sort((movie1, movie2) => movie2.averageScore - movie1.averageScore)),
map(movies => movies[0].title)
)
[{title: movie,

View Slide

RxJS & REST
${id}/movies`)),
flatMap(movies => {
observables$.push(
.pipe(
map(reviews => {
}),
map(average => {
})
)
);
});
return combineLatest(observables$);
}),
map(movies => movies.sort((movie1, movie2) => movie2.averageScore - movie1.averageScore)),
map(movies => movies[0].title)
)
.subscribe(console.log);
[{title: movie,

View Slide

RxJS pros
const retry = require('rxjs/operators').retry;
Axios.get('https://maciejtreder.github.io/asynchronous-javascript/directors/123')
.pipe(
map(resp => resp.data)
)
.subscribe(console.log);
retry(3),

View Slide

Introducing ReactiveX and RxJS Observables
https://www.twilio.com/blog/asynchronous-javascript-reactivex-rxjs-observables-nodejs

View Slide

Using RxJS Observables with REST APIs in Node.js
https://www.twilio.com/blog/asynchronous-javascript-refactor-callbacks-promises-node-js

View Slide

Tracking the ISS with Real-Time Event Notifications Using Node.js, RxJS Observables,
and Twilio Programmable SMS
https://www.twilio.com/blog/real-time-event-notifications-using-node-js-rxjs-observables-twilio-programmable-sms

View Slide

Which Operator to Use?
https://xgrommx.github.io/rx-book/content/which_operator_do_i_use/index.html

View Slide

callback, then(), subscribe() …

View Slide

Make the code synchronous again

View Slide

Make the code synchronous again
const getMultiplier = Promise.resolve(2);
const multiply = (multiply, multiplier) => Promise.resolve(multiply * multiplier);
let multiplier = getMultiplier;
let result = multiply(10, multiplier);
console.log(`Multiply result: ${result}`);
getMultiplier
.then(value => multiply(10, value))
.then(result => console.log(`Multiply result: ${result}`));
await
await
var multiplier = await getMultiplier;
^^^^^
SyntaxError: await is only valid in async function
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:283:19)

View Slide

Make the code asynchronous again!
const multiplier = getMultiplier;
const result = multiply(10, multiplier);
await
await
(async () => {
})();
async function myFunction() {
return "someValue";
}
== function myFunction() {
return Promise.resolve("someValue");
}
Multiply result: 20
const getMultiplier = Promise.resolve(2);
const multiply = (multiply, multiplier) => Promise.resolve(multiply * multiplier);

View Slide

vs
let multiplier = getMultiplier;
let result = multiply(10, multiplier);
await
await
(async () => {
})();
getMultiplier
.then(value => multiply(10, value))
.then(result => console.log(`Multiply result: ${result}`));

View Slide

async-await and RxJS
import { Subject } from 'rxjs';
let i = 0;
clock$.next(i++);
}, 1000);
setTimeout(() => clock$.complete(), 4*1000);
(async () => {
console.log(await clock$.toPromise());
})();
2

View Slide

async-await error catching
const promise = Promise.reject('rejection reason');
(async () => {
try {
console.log(await promise);
} catch (err) {
console.log(`Error catched: ${err}`);
} finally {
console.log('Finally executes');
}
})();
Error catched: rejection reason
Finally executes

View Slide

(async () => {
})();

View Slide

(async () => {
})();
const directors = await fetch(`https://maciejtreder.github.io/asynchronous-javascript/directors/`)
.then(response => response.json());
const tarantinoId = directors.find(director => director.name === "Quentin Tarantino").id;

View Slide

(async () => {
})();
const quentinMovies = await fetch(`https://maciejtreder.github.io/asynchronous-javascript/
directors/${tarantinoId}/movies`)

View Slide

(async () => {
})();
const reviewsCall = [];
quentinMovies.forEach(movie => {
reviewsCall.push(fetch(`https://maciejtreder.github.io/asynchronous-javascript/movies/$
.then(resp => resp.json())
.then(resp => {
return {title: movie.title, reviews: resp};
}));
});
const reviews = await Promise.all(reviewsCall);

View Slide

(async () => {
})();
const reviewsCall = [];
quentinMovies.forEach(movie => {
reviewsCall.push(fetch(`https://maciejtreder.github.io/asynchronous-javascript/movies/$
.then(resp => resp.json())
.then(resp => {
return {title: movie.title, reviews: resp};
}));
});
const reviews = await Promise.all(reviewsCall);
reviews.forEach(entry => {
let aggregatedScore = 0;
entry.reviews.forEach(review => aggregatedScore += review.rating);
entry.score = aggregatedScore / entry.reviews.length;
});
const best = reviews.sort((movie1, movie2) => movie2.score - movie1.score)[0].title;
console.log(`The best movie by Quentin Tarantino is ${best}`);

View Slide

Performance pitfall
function promiseFunction1() {
return new Promise(resolve => {
setTimeout(() => {
resolve("abc");
}, 2000);
});
}
function promiseFunction2() {
return new Promise(resolve => {
setTimeout(() => {
resolve("abc");
}, 2000);
});
}
(async () => {
console.log(await promiseFunction1());
console.log(await promiseFunction2());
})();
(async () => {
const promisefn1 = promiseFunction1();
const promisefn2 = promiseFunction2();
console.log(await promisefn1);
console.log(await promisefn2);
})();
2 sec
4 sec

View Slide

Introducing async and await
https://www.twilio.com/blog/asynchronous-javascript-introducing-async-and-await

View Slide

Using Promises With REST APIs in Node.js
https://www.twilio.com/blog/asynchronous-javascript-using-promises-rest-apis-nodejs

View Slide

Callbacks RxJS
Promises async-await
asynchronous synchronous?
asynchronous asynchronous
repeatable one-shot repeatable
(not) reusable reusable reusable
(not) manipulatable manipulatable manipulatable
REST WebSocket Dependent operations
DOM events

View Slide

Feedback
https://bit.ly/2UthmIy

View Slide

@maciejtreder

View Slide

Asynchronous JavaScript - there and back again

Asynchronous JavaScript - there and back again

Maciej Treder

More Decks by Maciej Treder

Other Decks in Technology

Featured

Transcript