The document summarizes the evolution of asynchronous JavaScript programming. It begins with callbacks being the fundamental way to handle asynchronous code. This led to issues like callback hell and loss of error handling. Promises were introduced to help address these issues by providing a cleaner way to handle asynchronous operations with methods like then() and catch(). However, promises could still result in unreadable code if used improperly for control flow. Generators and async/await were later introduced to allow asynchronous code to be written in a synchronous, blocking-like fashion using keywords like yield and await. Overall, the document traces the progression from callbacks to promises to generators and async/await as ways to improve the handling of asynchronous code in JavaScript.

1. THE EVOLUTION OF
ASYNCHRONOUS
JAVASCRIPT
@cirpo

2. Tech Lead/Coach @
@cirpo

3. ASYNCHRONY

4. ASYNC
IS
HARD

5. every time you use
setTimeout()
in a test
a unicorn dies

6. ASYNC
IS
HARD

7. SAD PANDA

8. SEQUENTIAL BRAIN

9. SEQUENTIAL BRAIN
Put aside involuntary,
subconscious,
automatic
brain functions
we are not multitasker!

10. ❤

11. “Always bet on JavaScript”
Brendan Eich

12. “any application that can be written
in JavaScript,
will eventually be written
in JavaScript”
Jeff Atwood

13. JAVASCRIPT
IS NON-BLOCKING

14. events
eventloop
net
filesystem
…
event queue thread pool

15. JS IS NON-BLOCKING
JS unlike a lot of other languages
never blocks
handling I/O is typically performed
via events and callbacks

16. JS unlike a lot of other languages
never blocks
handling I/O is typically performed
via events and callbacks
//cart
loadUserInfo()
loadCartItems()
retrieveExchangeRates()
calculateTotal()

17. JS unlike a lot of other languages
never blocks
handling I/O is typically performed
via events and callbacks
function getTotal() {
let total = 0
try {
const userInfo = loadUserInfo()
const cartItems = loadCartItems()
const exr = retrieveExchangeRates()
total = calculateTotal(userInfo, cartItems, exr)
} catch (error) {
}
return total
}

18. JS unlike a lot of other languages
never blocks
handling I/O is typically performed
via events and callbacks
function getTotal() {
let total = 0
try {
const userInfo = loadUserInfo()
const cartItems = loadCartItems()
const exr = retrieveExchangeRates()
total = calculateTotal(userInfo, cartItems, exr)
} catch (error) {
}
return total
}
can we do this?

19. JS unlike a lot of other languages
never blocks
handling I/O is typically performed
via events and callbacks
function getTotal() {
let total = 0
try {
const userInfo = loadUserInfo()
const cartItems = loadCartItems()
const exr = retrieveExchangeRates()
total = calculateTotal(userInfo, cartItems, exr)
} catch (error) {
}
return total
}
we could but…..
we are blocking!

20. JS unlike a lot of other languages
never blocks
handling I/O is typically performed
via events and callbacks
function getTotal() {
let total = 0
try {
const userInfo = loadUserInfo()
const cartItems = loadCartItems()
const exr = retrieveExchangeRates()
total = calculateTotal(userInfo, cartItems, exr)
} catch (error) {
}
return total
}
we have to “wait”

21. what if waiting
was easy as
blocking

23. ASYNCRONY
callback
promise
async/await

24. HOW DID WE
GET THERE?

25. WHY DID WE
GET THERE?

26. what if waiting
was easy as
blocking

27. block
=
pull

28. const userInfo = loadUserInfo()
const cartItems = loadCartItems()
const exchangeRates = retrieveExchangeRates()
BLOCKING = PULL

29. block
=
pull

30. CALLBACK

31. CALLBACK
//cart
loadUserInfo(function(){
loadCartItems()
retrieveExchangeRates()
calculateTotal()
})

32. CALLBACK
//cart
loadUserInfo(function(){
loadCartItems(function(){
retrieveExchangeRates()
calculateTotal()
})
})

33. CALLBACK
//cart
loadUserInfo(function(){
loadCartItems(function(){
retrieveExchangeRates(function(){
calculateTotal(function(){
})
})
})
})

34. CALLBACK
//cart
loadUserInfo(function(){
loadCartItems(function(){
retrieveExchangeRates(function(){
calculateTotal(function(){
})
})
})
})

35. CALLBACK
//cart
loadUserInfo(function(){
loadCartItems(function(){
retrieveExchangeRates(function(){
calculateTotal(function(){
})
})
})
})

36. sometimes
we are just
lazy

37. CALLBACK
const fs = require('fs')
const file = './todo.txt'
fs.readFile(file, 'utf8', function(err, todoList) {
if (err) return console.log(err)
todoList = todoList + 'n watch GOT'
fs.writeFile(file, todoList, function(err) {
if(err) return console.log(err)
console.log('todo added!')
})
})

38. CALLBACK
const fs = require('fs')
const file = './todo.txt'
fs.readFile(file, 'utf8', addTodo)
function notify(err) {
if(err) return console.log(err)
console.log(‘todo added!')
}
function addTodo(err, todoList) {
if (err) return console.log(err)
todoList = todoList + 'n watch GOT’
fs.writeFile(file, todoList, notify)
}

39. wait
=
push

40. CALLBACK
const fs = require('fs')
const file = './todo.txt'
fs.readFile(file, 'utf8', addTodo)
function notify(err) {
if(err) return console.log(err)
console.log(‘todo added!')
}
function addTodo(err, todoList) {
if (err) return console.log(err)
todoList = todoList + 'n watch GOT’
fs.writeFile(file, todoList, notify)
}

41. LOSS OF
ERROR HANDLING

42. CALLBACK
const fs = require('fs')
const file = './todo.txt'
fs.readFile(file, 'utf8', addTodo)
function notify(err) {
if(err) return console.log(err)
console.log(‘todo added!')
}
function addTodo(err, todoList) {
if (err) return console.log(err)
todoList = todoList + 'n watch GOT’
fs.writeFile(file, todoList, notify)
}

43. INVERSION OF
CONTROL

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

45. CALLBACK
//cart
loadUserInfo(function(){
loadCartItems(function(){
retrieveExchangeRates(function(){
calculateTotal(function(){
})
})
})
})

46. CALLBACK
what if it’s never called?
what if it’s called more then once?
what if it’s called too early?

48. HOW CAN YOU TELL
IF IT’S AN ASYNC
CALLBACK?

49. READ THE SOURCE LUKE!

50. I ❤ CALLBACK
Callbacks are the fundamental unit
of asynchrony in JS
But sometimes they’re not enough
for the evolving landscape
of async programming as JS matures

51. what if waiting
was easy as
blocking

52. JS unlike a lot of other languages
never blocks
handling I/O is typically performed
via events and callbacks
function getTotal() {
let total = 0
try {
const userInfo = loadUserInfo()
const cartItems = loadCartItems()
const exr = retrieveExchangeRates()
total = calculateTotal(userInfo, cartItems, exr)
} catch (error) {
}
return total
}

53. PROMISE

54. PROMISE
This lets asynchronous methods return
values like synchronous methods
instead of the final value
we get a promise.
A promise represents a proxy for a value
not necessarily known
when the promise is created

56. Up until ES2015/ES6,
JS itself has actually
never had any direct notion of
asynchrony built into it
PROMISE

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

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

59. PROMISE
//cart
function loadUserInfo() {
return new Promise((resolve, reject) => {
fetch(url, (err, userInf) => {
if (err) return reject(err)
return resolve(userInfo)
})
})
}

60. PROMISE
//cart
loadUserInfo()
.then(loadCartItems)
.then(retrieveExchangeRates)
.then(calculateTotal)
.catch((err) => {})

61. PROMISE
control flow

62. PROMISE
control flow

63. PROMISE
inversion of control
control flow

64. PROMISE
inversion of control
control flow

65. PROMISE
inversion of control
error handling
control flow

66. PROMISE
inversion of control
error handling
control flow

67. PROMISE
inversion of control
async or sync?
error handling
control flow

68. PROMISE
inversion of control
async or sync?
error handling
control flow

69. WIN!

70. BUT…..

71. PROMISE
loadMovieMetaData().then((data) => {
return parse(data).then((data) => {
return save(data)
})
})

72. PROMISE
loadMovieMetaData()
.then((data) => {
return parse(data)
})
.then((data) => {
return save(data)
})

73. PROMISE
loadMovieMetaData()
.then(parse)
.then(save)
.catch(...)

74. DON’T USE
PROMISE
FOR CONTROL FLOW

75. YOUR CODEBASE THEN
BECOMES
PROMISE DEPENDANT

76. TO PROMISE
OR
TO CALLBACK?

77. IF YOU HAVE A
LIBRARY, SUPPORT
BOTH

78. function foo(x, y, cb) {
return new Promise((resolve, reject) =>
fetch(url, (err, data) => {
if(err){
if(cb) cb(err)
return reject(err)
}
if(cb) cb(null, data)
return resolve(data)
}))
}

79. SINGLE VALUE

80. SINGLE RESOLUTION
IS NOT GOOD
FOR STREAMS

81. PERFORMANCE?

82. PERFORMANCE?

83. JS unlike a lot of other languages
never blocks
handling I/O is typically performed
via events and callbacks
function getTotal() {
let total = 0
try {
const userInfo = loadUserInfo()
const cartItems = loadCartItems()
const exr = retrieveExchangeRates()
total = calculateTotal(userInfo, cartItems, exr)
} catch (error) {
}
return total
}

84. GENERATOR

85. GENERATOR
a new type of function
that does’t not behave with the
run-to-completion behaviour

86. GENERATOR
function *foo(){
let x = 1
yield
return x
}

87. GENERATOR
function *foo(){
let x = 1
yield
return x
}
const g = foo()
let n = g.next()
console.log(n)
// {value: undefined, done: false}
n = g.next()
console.log(n)
// {value: 1, done: true}

88. GENERATOR
function *foo(){
let x = 1
yield
return x
}
const g = foo()
let n = g.next()
console.log(n)
// {value: undefined, done: false}
n = g.next()
console.log(n)
// {value: 1, done: true}

89. GENERATOR
function *foo(){
let x = 1
yield
return x
}
const g = foo()
let n = g.next()
console.log(n)
// {value: undefined, done: false}
n = g.next()
console.log(n)
// {value: 1, done: true}

90. GENERATOR
function *foo(){
let x = 1
yield
return x
}
const g = foo()
let n = g.next()
console.log(n)
// {value: undefined, done: false}
n = g.next()
console.log(n)
// {value: 1, done: true}

91. with yield
we are
pausing

93. A.K.A “BLOCKING””

94. GENERATOR
iterator is just one side

95. GENERATOR
the other side is an “observable”

96. GENERATOR
function *bar(){
let x = 14
let y = yield * x
return y
}

97. GENERATOR
function *bar(){
let x = 14
let y = yield * x
return y
}

98. GENERATOR
function *bar(){
let x = 14
let y = yield * x
return y
}
const g = bar()
let n = g.next()
console.log(n)
//{value: undefined, done: false}
n = g.next(3)
console.log(n)
//{value: 42, done: true}

99. function *bar(){
let x = 14
let y = yield * x
return y
}
GENERATOR
const g = bar()
let n = g.next()
console.log(n)
//{value: undefined, done: false}
n = g.next(3)
console.log(n)
//{value: 42, done: true}

100. function *bar(){
let x = 14
let y = yield * x
return y
}
GENERATOR
const g = bar()
let n = g.next()
console.log(n)
//{value: undefined, done: false}
n = g.next(3)
console.log(n)
//{value: 42, done: true}

101. function *bar(){
let x = 14
let y = yield * x
return y
}
GENERATOR
const g = bar()
let n = g.next()
console.log(n)
//{value: undefined, done: false}
n = g.next(3)
console.log(n)
//{value: 42, done: true}

102. we are pulling

103. we are pushing

105. what if waiting
was easy as
blocking

106. GENERATOR + PROMISE
the iterator should listen for the promise to
resolve (or reject)
then either resume the generator with the
fulfilment message
or throw an error into the generator with
the rejection reason)

107. GENERATOR + PROMISE
function *getTotal() {
let total = 0
try {
const userInfo = yield loadUserInfo()
const cartItems = yield loadCartItems()
const exr = yield retrieveExchangeRates()
total = calculateTotal(userInfo, cartItems, exr)
} catch (error) {
}
return total
}

108. GENERATOR + PROMISE
npm install co

109. GENERATOR + PROMISE
co(getTotal)

110. ASYNC/AWAIT

112. ASYNC/AWAIT
async function getTotal() {
let total = 0
try {
const userInfo = await loadUserInfo()
const cartItems = await loadCartItems()
const exr = await retrieveExchangeRates()
total = calculateTotal(userInfo, cartItems, exr)
} catch (error) {
}
return total
}

113. JS unlike a lot of other languages
never blocks
handling I/O is typically performed
via events and callbacks
function getTotal() {
let total = 0
try {
const userInfo = loadUserInfo()
const cartItems = loadCartItems()
const exr = retrieveExchangeRates()
total = calculateTotal(userInfo, cartItems, exr)
} catch (error) {
}
return total
}

116. is async/await
the answer to all
our async issues?

117. CHOOSE
YOUR
WAY

118. “Any fool can write code that a computer can
understand.
Good programmers write code that humans can
understand.”
Martin Fowler

119. Kyle Simpson @getify
github.com/getify/You-Dont-Know-JS

120. @cirpo

121. THANK YOU!