A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief...

57
A Brief History of Asynchronous JavaScript A Brief History of Asynchronous JavaScript

Transcript of A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief...

Page 1: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

A Brief History of Asynchronous JavaScript

A Brief History of Asynchronous JavaScript

Page 2: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Tom Wey - Developer

twitter.com/tjmwy

github.com/tjmw

A Brief History of Asynchronous JavaScript

Page 3: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Why JavaScript?

A Brief History of Asynchronous JavaScript

Page 4: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

It's Everywhere!

A Brief History of Asynchronous JavaScript

Page 5: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

It's got some interesting features

Credit: https://twitter.com/anler

A Brief History of Asynchronous JavaScript

Page 6: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Synchronous Programming

const a = 1, b = 2;

let result = a + b;console.log(result); // => 3

result = Math.pow(result, 2);console.log(result); // => 9

A Brief History of Asynchronous JavaScript

Page 7: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Asynchronous Programming

setTimeout(() => { console.log("Timeout completed!");}, 1000);

console.log("Hello!");

// "Hello!"// "Timeout completed!"

A Brief History of Asynchronous JavaScript

Page 8: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

JavaScript’s Concurrency Model

A Brief History of Asynchronous JavaScript

Page 9: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Single Threaded

A Brief History of Asynchronous JavaScript

Page 10: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Non-Blocking I/O

A Brief History of Asynchronous JavaScript

Page 11: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

The Event Loop, Message Queue & run-to-completion

A Brief History of Asynchronous JavaScript

Page 12: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

A Brief History of Asynchronous JavaScript

Page 13: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

A Brief History of Asynchronous JavaScript

Page 14: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

setTimeout(() => { console.log("Timeout completed!");}, 1000);

longRunningSynchronousTask();

A Brief History of Asynchronous JavaScript

Page 15: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Working with Async

A Brief History of Asynchronous JavaScript

Page 16: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Callbacks

A Brief History of Asynchronous JavaScript

Page 17: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

$.ajax({ url : "example.com", type: "GET", success: data => { // Do something with the result }});

A Brief History of Asynchronous JavaScript

Page 18: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Error Handling with Callbacks

someAsyncFunction((err, result) => { if (err) { // Handle error } else { // Success }});

A Brief History of Asynchronous JavaScript

Page 19: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Drawbacks of Callbacks

A Brief History of Asynchronous JavaScript

Page 20: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Callback HellAKA the pyramid of doom

Credit: https://medium.com/@pranavrajs/promises-in-sails-js-remove-callback-hell-46899a2ff1b1

A Brief History of Asynchronous JavaScript

Page 21: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Specifying Multiple Callbacks

A Brief History of Asynchronous JavaScript

Page 22: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Error Handling

A Brief History of Asynchronous JavaScript

Page 23: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Trustability of Callbacks

A Brief History of Asynchronous JavaScript

Page 24: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Don't Unleash Zalgo!

A Brief History of Asynchronous JavaScript

Page 25: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Promises

A Brief History of Asynchronous JavaScript

Page 26: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

"A Promise is an object representing the eventual completion or failure

of an asynchronous operation" - MDN

A Brief History of Asynchronous JavaScript

Page 27: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

A promise either completes successfully (is resolved) or fails (is

rejected)

A Brief History of Asynchronous JavaScript

Page 28: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

new Promise((resolve, reject) => { // Work in here, then call resolve() or reject()});

// setTimeout promise-ifiednew Promise((resolve, _reject) => { setTimeout(resolve, 5000);});

A Brief History of Asynchronous JavaScript

Page 29: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Handling Promise outcomes

const promise = promiseGeneratingFunction();

promise.then(result => { // Handle success});

promise.catch(error => { // Handle error});

A Brief History of Asynchronous JavaScript

Page 30: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Chainability

const responsePromise = fetch("https://api.example.com/todos/1");

const decodePromise = responsePromise.then(response => response.json());

decodePromise.then(decodedData => handleData(decodedData));

A Brief History of Asynchronous JavaScript

Page 31: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Or...

fetch("https://api.example.com/todos/1") .then(response => response.json() ). .then(decodedData => handleData(decodedData) );

A Brief History of Asynchronous JavaScript

Page 32: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Promise.all

Promise.all([promise, anotherPromise]).then(results => { // handle results});

A Brief History of Asynchronous JavaScript

Page 33: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Native Promises in JavaScript since ES6

A Brief History of Asynchronous JavaScript

Page 34: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Promises Support

Credit: https://caniuse.com

A Brief History of Asynchronous JavaScript

Page 35: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Async/await

A Brief History of Asynchronous JavaScript

Page 36: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

function foo() { return "foo" }foo() // => "foo"

async function asyncFoo() { return "foo" }asyncFoo() // => Promise { status: "resolved", result: "foo" }

A Brief History of Asynchronous JavaScript

Page 37: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

async function fetchAndTransformPost() { const response = await fetch(postEndpoint); const post = await response.json(); const transformedPost = transformPost(post); return transformedPost;}

A Brief History of Asynchronous JavaScript

Page 38: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

async function withAsyncAwait() { const response = await fetch(postEndpoint); const post = await response.json();

if (post.status === "published") { const commentsResponse = await fetch(commentsEndpoint); const comments = await commentsResponse.json();

return { ...post, comments }; } else { return post; }}

A Brief History of Asynchronous JavaScript

Page 39: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

function withPromises() { return fetch(postEndpoint) .then(response => response.json()) .then(post => { if (post.status === "published") { return fetch(commentsEndpoint) .then(commentsResponse => commentsResponse.json()) .then(comments => ({ ...post, comments })); } else { return post; } });}

A Brief History of Asynchronous JavaScript

Page 40: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Concurrent Async Operations

A Brief History of Asynchronous JavaScript

Page 41: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

!

async function multi() { const result1 = await fetchResult1(); const result2 = await fetchResult2(); return [result1, result2].join(",");}

A Brief History of Asynchronous JavaScript

Page 42: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

!

async function multi() { const results = await Promise.all([ fetchResult1(), fetchResult2(), ]); return results.join(",");}

A Brief History of Asynchronous JavaScript

Page 43: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Result/Error Handling

A Brief History of Asynchronous JavaScript

Page 44: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

asyncFunction() .catch(error => { // handle error });

A Brief History of Asynchronous JavaScript

Page 45: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

// OR within our async function

try { return await thisMayFail();} catch (e) { return DEFAULT;}

A Brief History of Asynchronous JavaScript

Page 46: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

!

// index.js

const result = await asyncFunction();console.log(result);

A Brief History of Asynchronous JavaScript

Page 47: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Async/await Support

Credit: https://caniuse.com

A Brief History of Asynchronous JavaScript

Page 48: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Generators

A Brief History of Asynchronous JavaScript

Page 49: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Iterators

A Brief History of Asynchronous JavaScript

Page 50: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Iterator Interface

next() => { value: 1, done: false }

A Brief History of Asynchronous JavaScript

Page 51: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Generators are Controlled By Iterators

A Brief History of Asynchronous JavaScript

Page 52: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

function* simpleGenerator() { yield 1; yield 2; return 3;}

const it = simpleGenerator();it.next(); // => { value: 1, done: false }it.next(); // => { value: 2, done: false }it.next(); // => { value: 3, done: true }

A Brief History of Asynchronous JavaScript

Page 53: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Two-way Communication

A Brief History of Asynchronous JavaScript

Page 54: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

function* anotherGenerator() { const x = 1 + (yield "Hello SDD!"); return 2 * (yield x);}

const it = anotherGenerator();it.next(); // => { value: 'Hello SDD!', done: false }it.next(5); // => { value: 6, done: false }it.next(10); // => { value: 20, done: true }

A Brief History of Asynchronous JavaScript

Page 55: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

Generators and Async

A Brief History of Asynchronous JavaScript

Page 56: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

function* asyncGenerator() { const first = yield asyncDouble(2); const second = yield asyncDouble(3); return first + second;}

const it = asyncGenerator();

const res = it.next();

res.value.then(result => { const res2 = it.next(result);

res2.value.then(result => { const finalResult = it.next(result);

console.log(finalResult); // => { value: 10, done: true } });});

A Brief History of Asynchronous JavaScript

Page 57: A Brief History of Asynchronous JavaScript · Native Promises in JavaScript since ES6 A Brief History of Asynchronous JavaScript. Promises Support Credit: A Brief History of Asynchronous

End. The

A Brief History of Asynchronous JavaScript