One of JavaScript’s strengths is how it handles asynchronous code. Async is one of the most important and often misunderstood part of Javascript or any other language. Async is hard because we, as human beings, can’t do two conscious actions at once and think about both of them at the same moment. In this talk we will see how asynchronous JavaScript evolved over the years. It all started with callbacks… and it landed on generators!

1. THE EVOLUTION OF
ASYNCHRONOUS
JAVASCRIPT
@cirpo

2. now & later
ASYNCRONY

3. the core of asynchronous programming
is the relationship between
the now and later parts of your program
ASYNCRONY

5. how to express, manage and
manipulate
program behaviours
over a period of time?

6. CONCURRENCY

7. CONCURRENCY
a way to structure a program
by breaking it into pieces
that can be executed independently

8. IS JS CONCURRENT?

9. 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

10. function f(b){
var a = 12;
return a+b+35;
}
function g(x){
var m = 4;
return f(m*x);
}
g(21);
STACK

11. 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

12. 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

13. 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

14. 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

15. 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

16. EVENT LOOP

17. JS IS NON BLOCKING

18. events
eventloop
net
filesystem
…
event queue thread pool

19. 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

20. 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

22. Up until recently (ES6), JS itself has actually
never had any direct notion of asynchrony
built into it

23. JS runs inside a hosting environment (the
browser/nodejs)
The event loop is handled by it

24. IS JS CONCURRENT?

25. goroutinesprocesses

26. IS JS CONCURRENT?

27. JS IS SINGLE THREAD

28. SORT OF …

29. BUT THE HOSTING
ENVIRONMENT CAN USE
MULTI THREAD
FOR I/O OPERATIONS

30. most devs new to JS have issues with the fact
that later doesn’t happen strictly and
immediately after now
ASYNCRONY

31. 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

32. ASYNCRONY

33. ASYNC IS GREAT

34. BUT CAN BE HARD

35. SEQUENTIAL BRAIN

36. SEQUENTIAL BRAIN
put aside involuntary, subconscious, automatic
brain functions
we are not multitasker

37. 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

40. can we do that?

41. yes… but we are blocking

42. WHEN YOU BLOCK,
YOU “PULL” A VALUE

43. CALLBACK

48. PIRAMID OF DOOM!

49. CALLBACK HELL!

50. BULLSHIT

51. HOW TO AVOID POD

52. HOW TO AVOID POD

53. ASYNC CALLBACK

54. ASYNC CALLBACK
=

55. ASYNC CALLBACK
PUSH
=

57. LOSS OF CONTROL
FLOW

58. LOSS OF ERROR
HANDLING

60. INVERSION
OF
CONTROL

61. “Don't call us, we'll call you”

62. INVERSION OF CONTROL

63. INVERSION OF CONTROL
what if it’s a third party call
not under our control?

64. INVERSION OF CONTROL

65. INVERSION OF CONTROL
what if it’s never called?

66. INVERSION OF CONTROL
what if it’s never called?
what if it’s called too early?

67. INVERSION OF CONTROL
what if it’s never called?
what if it’s called too early?
what if it’s called too late?

69. meh.

70. HOW CAN YOU TELL IF
IT’S AN
ASYNC CALL?

73. meh.

74. 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

75. PROMISES

76. 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.

77. PROMISES
http://ecma-international.org/ecma-262/6.0/#sec-jobs-and-job-queues

78. PROMISES
Promises 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!

79. PROMISES
pending: initial state, not fulfilled or rejected
fulfilled: the operation completed successfully
rejected: meaning that the operation failed.

80. PROMISES
always async
returns a promise
handled once
thenable

81. PROMISES
A promise must provide a then method to
access its current or eventual value or rejection
reason
.then()

82. PROMISES
.then(onFulfilled,
onRejected)

83. PROMISES
can return a promise
.then()

84. PROMISES
.then()
.then()
.then()

85. PROMISES
.catch()

86. Talk is cheap,
show me the code

87. PROMISES

88. PROMISES

89. PROMISES
inversion of control
async or sync?
error handling
control flow

90. WIN!

91. BUT …

92. PROMISE HELL!

93. AVOID PROMISE HELL!

94. AVOID PROMISE HELL!

95. DON’T USE PROMISES
FOR CONTROL FLOW

97. YOUR CODEBASE THEN
BECOMES
PROMISE DEPENDANT

98. USING PROMISES
EVERYWHERE
IMPACTS ON THE
DESIGN

99. TO PROMISE OR TO
CALLBACK?

100. IF YOU HAVE A
LIBRARY, SUPPORT BOTH

102. SINGLE VALUE

103. SINGLE RESOLUTION
BAD FOR STREAMS

104. SINGLE RESOLUTION

105. PERFORMANCES

106. PERFORMANCES
Promises are slower compared to callbacks
You don’t get rid of callbacks, they just orchestrate callbacks
in a trustable way

107. 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

108. PROMISES

109. WHAT IF WAITING WERE
JUST AS EASY AS
BLOCKING?

111. GENERATORS

112. GENERATORS
A new type of function that does’t not behave with
the run-to-completion behaviour

113. GENERATORS

114. GENERATORS
1 constructing the iterator, not executing

115. GENERATORS
1 constructing the iterator, not executing
2 starts the iterator

116. GENERATORS
1 constructing the iterator, not executing
2 starts the iterator
3 pause the iterator

117. GENERATORS
1 constructing the iterator, not executing
2 starts the iterator
4 resume the iterator
3 pause the iterator

118. GENERATORS
1 constructing the iterator, not executing
2 starts the iterator
4 resume the iterator
3 pause the iterator

119. GENERATORS
with the yield where are pausing

120. GENERATORS
A.K.A
BLOCKING!
with the yield where are pausing

122. GENERATORS

123. GENERATORS
iterator is just one side…

124. GENERATORS
the other side is an observable

125. GENERATORS

126. GENERATORS

127. GENERATORS

128. GENERATORS

129. GENERATORS

130. we can block!
we can pull values
we can push values
GENERATORS

131. GENERATORS
+
PROMISES

132. 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

133. GENERATORS + PROMISES

134. GENERATORS + PROMISES

135. GENERATORS + PROMISES

136. GENERATORS + PROMISES
npm install co

138. BUT…

139. ES7
ES2016
to the rescue!

140. async/await

141. async/await

145. 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

146. STREAMS

147. callbacks
async/await

148. CHOOSE YOUR
CONCURRENCY MODEL

149. A big thanks to
Kyle Simpson (@getify)
github.com/getify/You-Dont-Know-JS

150. @federicogalassi
@unlucio
… and my mentors
slideshare.net/fgalassi
slideshare.net/unlucio

151. @loige
@mariocasciaro
youtube.com/watch?v=lil4YCCXRYc

152. @cirpo
Dev lead at
github.com/cirpo
http://sainsburys.jobs

155. THANK YOU!