the evolution of asynchronous javascript
TRANSCRIPT
![Page 1: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/1.jpg)
THE EVOLUTION OF ASYNCHRONOUS
JAVASCRIPT
@cirpo
![Page 2: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/2.jpg)
now & later
ASYNCRONY
![Page 3: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/3.jpg)
the core of asynchronous programming is the relationship between
the now and later parts of your program
ASYNCRONY
![Page 4: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/4.jpg)
![Page 5: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/5.jpg)
how to express, manage and manipulate
program behaviours
over a period of time?
![Page 6: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/6.jpg)
CONCURRENCY
![Page 7: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/7.jpg)
CONCURRENCY
a way to structure a program
by breaking it into pieces
that can be executed independently
![Page 8: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/8.jpg)
IS JS CONCURRENT?
![Page 9: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/9.jpg)
A JS runtime contains a message queue, which is a list of messages to be processed.
To each message is associated a function.
When the stack is empty, a message is taken out of the queue and processed.
QUEUE
![Page 10: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/10.jpg)
function f(b){ var a = 12;
return a+b+35; }
function g(x){ var m = 4;
return f(m*x); }
g(21);
STACK
![Page 11: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/11.jpg)
function f(b){ var a = 12;
return a+b+35; }
function g(x){ var m = 4;
return f(m*x); }
g(21);
1 foo gets called
STACK
![Page 12: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/12.jpg)
function f(b){ var a = 12;
return a+b+35; }
function g(x){ var m = 4;
return f(m*x); }
g(21);
2 first frame is created containing foo and local variable
1 foo gets called
STACK
![Page 13: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/13.jpg)
function f(b){ var a = 12;
return a+b+35; }
function g(x){ var m = 4;
return f(m*x); }
g(21);
2 first frame is created containing foo and local variable
1 foo gets called
3 when foo calls bar, a second frame is push on top of foo, containing bar
arguments and local variables
STACK
![Page 14: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/14.jpg)
function f(b){ var a = 12;
return a+b+35; }
function g(x){ var m = 4;
return f(m*x); }
g(21);
4 when bar returns, the top frame element is popped out of the stack
(leaving only foo call frame)
STACK
![Page 15: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/15.jpg)
function f(b){ var a = 12;
return a+b+35; }
function g(x){ var m = 4;
return f(m*x); }
g(21);
5 When foo returns, the stack is empty
4 when bar returns, the top frame element is popped out of the stack
(leaving only foo call frame)
STACK
![Page 16: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/16.jpg)
EVENT LOOP
![Page 17: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/17.jpg)
JS IS NON BLOCKING
![Page 18: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/18.jpg)
events
eventloop
net
filesystem
…
event queue thread pool
![Page 19: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/19.jpg)
JS unlike a lot of other languages, never blocks
Handling I/O is typically performed via events and callbacks
When the application is waiting for an IndexedDB query to return or an XHR request to return, it can still process other things like user input
JS IS NON BLOCKING
![Page 20: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/20.jpg)
Node.js is great for Input/Output processing but not optimised for CPU-bound work like performing a large amount of calculations.
JS IS NON BLOCKING
![Page 21: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/21.jpg)
![Page 22: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/22.jpg)
Up until recently (ES6), JS itself has actually never had any direct notion of asynchrony
built into it
![Page 23: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/23.jpg)
JS runs inside a hosting environment (the browser/nodejs)
The event loop is handled by it
![Page 24: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/24.jpg)
IS JS CONCURRENT?
![Page 25: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/25.jpg)
goroutinesprocesses
![Page 26: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/26.jpg)
IS JS CONCURRENT?
![Page 27: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/27.jpg)
JS IS SINGLE THREAD
![Page 28: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/28.jpg)
SORT OF …
![Page 29: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/29.jpg)
BUT THE HOSTING ENVIRONMENT CAN USE
MULTI THREADFOR I/O OPERATIONS
![Page 30: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/30.jpg)
most devs new to JS have issues with the fact that later doesn’t happen strictly and immediately after now
ASYNCRONY
![Page 31: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/31.jpg)
tasks that cannot complete now are, by definition, going to complete asynchronously
and thus no blocking behaviour as it might intuitively expect or want.
ASYNCRONY
![Page 32: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/32.jpg)
ASYNCRONY
![Page 33: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/33.jpg)
ASYNC IS GREAT
![Page 34: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/34.jpg)
BUT CAN BE HARD
![Page 35: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/35.jpg)
SEQUENTIAL BRAIN
![Page 36: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/36.jpg)
SEQUENTIAL BRAIN
put aside involuntary, subconscious, automatic brain functions
we are not multitasker
![Page 37: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/37.jpg)
SEQUENTIAL BRAIN
As soon as we introduce a single continuation in the form of a callback function, we have allowed a divergence to form between how our brains work and the way the code will operate
![Page 38: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/38.jpg)
![Page 39: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/39.jpg)
![Page 40: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/40.jpg)
can we do that?
![Page 41: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/41.jpg)
yes… but we are blocking
![Page 42: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/42.jpg)
WHEN YOU BLOCK,
YOU “PULL” A VALUE
![Page 43: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/43.jpg)
CALLBACK
![Page 44: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/44.jpg)
![Page 45: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/45.jpg)
![Page 46: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/46.jpg)
![Page 47: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/47.jpg)
![Page 48: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/48.jpg)
PIRAMID OF DOOM!
![Page 49: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/49.jpg)
CALLBACK HELL!
![Page 50: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/50.jpg)
BULLSHIT
![Page 51: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/51.jpg)
HOW TO AVOID POD
![Page 52: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/52.jpg)
HOW TO AVOID POD
![Page 53: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/53.jpg)
ASYNC CALLBACK
![Page 54: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/54.jpg)
ASYNC CALLBACK
=
![Page 55: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/55.jpg)
ASYNC CALLBACK
PUSH
=
![Page 56: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/56.jpg)
![Page 57: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/57.jpg)
LOSS OF CONTROL
FLOW
![Page 58: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/58.jpg)
LOSS OF ERROR
HANDLING
![Page 59: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/59.jpg)
![Page 60: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/60.jpg)
INVERSION
OF
CONTROL
![Page 61: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/61.jpg)
“Don't call us, we'll call you”
![Page 62: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/62.jpg)
INVERSION OF CONTROL
![Page 63: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/63.jpg)
INVERSION OF CONTROL
what if it’s a third party call not under our control?
![Page 64: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/64.jpg)
INVERSION OF CONTROL
![Page 65: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/65.jpg)
INVERSION OF CONTROL
what if it’s never called?
![Page 66: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/66.jpg)
INVERSION OF CONTROL
what if it’s never called?
what if it’s called too early?
![Page 67: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/67.jpg)
INVERSION OF CONTROL
what if it’s never called?
what if it’s called too early?
what if it’s called too late?
![Page 68: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/68.jpg)
![Page 69: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/69.jpg)
meh.
![Page 70: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/70.jpg)
HOW CAN YOU TELL IF
IT’S AN
ASYNC CALL?
![Page 71: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/71.jpg)
![Page 72: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/72.jpg)
![Page 73: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/73.jpg)
meh.
![Page 74: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/74.jpg)
Callbacks are the fundamental unit of asynchrony in JS.
But they’re not enough for the evolving landscape of async programming as JS
matures.
I <3 callbacks
![Page 75: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/75.jpg)
PROMISES
![Page 76: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/76.jpg)
PROMISES
It allows you to associate handlers to an asynchronous action's eventual success value or
failure reason.
This lets asynchronous methods return values like synchronous methods: instead of the final value,
the asynchronous method returns a promise.
A promise represents a proxy for a value not necessarily known when the promise is created.
![Page 77: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/77.jpg)
PROMISES
http://ecma-international.org/ecma-262/6.0/#sec-jobs-and-job-queues
![Page 78: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/78.jpg)
PROMISESPromises are now the official way to provide async return values in both JavaScript and the DOM.
All future async DOM APIs will use them, and many already do, so be prepared!
![Page 79: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/79.jpg)
PROMISES
pending: initial state, not fulfilled or rejected
fulfilled: the operation completed successfully
rejected: meaning that the operation failed.
![Page 80: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/80.jpg)
PROMISESalways async
returns a promise
handled once
thenable
![Page 81: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/81.jpg)
PROMISES
A promise must provide a then method to access its current or eventual value or rejection
reason
.then()
![Page 82: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/82.jpg)
PROMISES
.then(onFulfilled, onRejected)
![Page 83: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/83.jpg)
PROMISES
can return a promise
.then()
![Page 84: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/84.jpg)
PROMISES
.then()
.then()
.then()
![Page 85: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/85.jpg)
PROMISES
.catch()
![Page 86: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/86.jpg)
Talk is cheap, show me the code
![Page 87: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/87.jpg)
PROMISES
![Page 88: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/88.jpg)
PROMISES
![Page 89: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/89.jpg)
PROMISES
inversion of control
async or sync?
error handling
control flow
![Page 90: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/90.jpg)
WIN!
![Page 91: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/91.jpg)
BUT …
![Page 92: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/92.jpg)
PROMISE HELL!
![Page 93: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/93.jpg)
AVOID PROMISE HELL!
![Page 94: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/94.jpg)
AVOID PROMISE HELL!
![Page 95: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/95.jpg)
DON’T USE PROMISES
FOR CONTROL FLOW
![Page 96: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/96.jpg)
![Page 97: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/97.jpg)
YOUR CODEBASE THEN
BECOMES
PROMISE DEPENDANT
![Page 98: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/98.jpg)
USING PROMISES
EVERYWHERE
IMPACTS ON THE DESIGN
![Page 99: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/99.jpg)
TO PROMISE OR TO
CALLBACK?
![Page 100: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/100.jpg)
IF YOU HAVE A
LIBRARY, SUPPORT BOTH
![Page 101: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/101.jpg)
![Page 102: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/102.jpg)
SINGLE VALUE
![Page 103: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/103.jpg)
SINGLE RESOLUTION
BAD FOR STREAMS
![Page 104: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/104.jpg)
SINGLE RESOLUTION
![Page 105: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/105.jpg)
PERFORMANCES
![Page 106: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/106.jpg)
PERFORMANCES
Promises are slower compared to callbacks
You don’t get rid of callbacks, they just orchestrate callbacks in a trustable way
![Page 107: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/107.jpg)
PERFORMANCES
Promises are slower compared to callbacks
You don’t get rid of callbacks, they just orchestrate callbacks in a trustable way99.9% of the time you
won’t feel it
![Page 108: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/108.jpg)
PROMISES
![Page 109: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/109.jpg)
WHAT IF WAITING WERE
JUST AS EASY AS
BLOCKING?
![Page 110: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/110.jpg)
![Page 111: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/111.jpg)
GENERATORS
![Page 112: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/112.jpg)
GENERATORS
A new type of function that does’t not behave with the run-to-completion behaviour
![Page 113: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/113.jpg)
GENERATORS
![Page 114: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/114.jpg)
GENERATORS1 constructing the iterator, not executing
![Page 115: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/115.jpg)
GENERATORS1 constructing the iterator, not executing
2 starts the iterator
![Page 116: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/116.jpg)
GENERATORS1 constructing the iterator, not executing
2 starts the iterator
3 pause the iterator
![Page 117: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/117.jpg)
GENERATORS1 constructing the iterator, not executing
2 starts the iterator
4 resume the iterator
3 pause the iterator
![Page 118: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/118.jpg)
GENERATORS1 constructing the iterator, not executing
2 starts the iterator
4 resume the iterator
3 pause the iterator
![Page 119: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/119.jpg)
GENERATORS
with the yield where are pausing
![Page 120: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/120.jpg)
GENERATORS
A.K.A BLOCKING!
with the yield where are pausing
![Page 121: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/121.jpg)
![Page 122: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/122.jpg)
GENERATORS
![Page 123: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/123.jpg)
GENERATORS
iterator is just one side…
![Page 124: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/124.jpg)
GENERATORS
the other side is an observable
![Page 125: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/125.jpg)
GENERATORS
![Page 126: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/126.jpg)
GENERATORS
![Page 127: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/127.jpg)
GENERATORS
![Page 128: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/128.jpg)
GENERATORS
![Page 129: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/129.jpg)
GENERATORS
![Page 130: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/130.jpg)
we can block!
we can pull values
we can push values
GENERATORS
![Page 131: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/131.jpg)
GENERATORS
+
PROMISES
![Page 132: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/132.jpg)
the iterator should listen for the promise to resolve
then either resume the generator with the fulfilment message (or throw an error into the generator with the rejection reason)
GENERATORS + PROMISES
![Page 133: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/133.jpg)
GENERATORS + PROMISES
![Page 134: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/134.jpg)
GENERATORS + PROMISES
![Page 135: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/135.jpg)
GENERATORS + PROMISES
![Page 136: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/136.jpg)
GENERATORS + PROMISES
npm install co
![Page 137: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/137.jpg)
![Page 138: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/138.jpg)
BUT…
![Page 139: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/139.jpg)
ES7ES2016
to the rescue!
![Page 140: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/140.jpg)
async/await
![Page 141: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/141.jpg)
async/await
![Page 142: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/142.jpg)
![Page 143: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/143.jpg)
![Page 144: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/144.jpg)
![Page 145: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/145.jpg)
npm install -g babel-cli
babel a.es6 -o a.js
node a.js
//add it either to .babelrc or package.json{ "plugins": ["transform-async-to-generator"]}
npm install babel-plugin-transform-async-to-generator
![Page 146: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/146.jpg)
STREAMS
![Page 147: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/147.jpg)
callbacks
async/await
![Page 148: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/148.jpg)
CHOOSE YOUR CONCURRENCY MODEL
![Page 149: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/149.jpg)
A big thanks toKyle Simpson (@getify)
github.com/getify/You-Dont-Know-JS
![Page 150: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/150.jpg)
@federicogalassi
@unlucio
… and my mentors
slideshare.net/fgalassi
slideshare.net/unlucio
![Page 151: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/151.jpg)
@loige
@mariocasciaro
youtube.com/watch?v=lil4YCCXRYc
![Page 152: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/152.jpg)
@cirpo
Dev lead at
github.com/cirpo
http://sainsburys.jobs
![Page 153: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/153.jpg)
![Page 154: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/154.jpg)
![Page 155: The evolution of asynchronous javascript](https://reader031.vdocuments.site/reader031/viewer/2022022122/589a04541a28ab7a318b4675/html5/thumbnails/155.jpg)
THANK YOU!