The document discusses strategies for handling asynchronous code in JavaScript. It begins by describing "Schlecht!Script", a fictional language that makes asynchronous programming painful by imposing arbitrary restrictions like only allowing "red" functions to call other red functions. It then covers approaches in JavaScript like continuation passing style, promises, and coroutines using generators. ES6 additions like EventEmitter/Streams and Promises are discussed for handling multiple events and single operations asynchronously. Finally, ES7 features like async/await and async generators are presented as improvements for asynchronous control flow and handling multiple events respectively. The document advocates for using best practices and high-level abstractions to simplify debugging asynchronous code.

1. How to stop debugging
asynchronous code
and start living
Andrey Salomatin
BerlinJS
18.06.2015

2. Schlecht!Script

3. Schlecht!Script
function f1*red(a, b) {…}
f1*red(a, b)
function f2*blue(c) {…}
f2*blue(c)
3
Functions have colors

4. Schlecht!Script
/* OK! */
function outer*blue() {
inner*blue()
}
4
Blue functions can only call
other blue functions
/* NOT OK! */
function outer*blue() {
inner*red()
}

5. Schlecht!Script
/* OK! */
function outer*red() {
inner2*red()
}
5
Red functions can call
red and blue functions
/* OK! */
function outer*red() {
inner2*blue()
}

6. Implementing and calling red
functions is painful!
6

7. Schlecht!Script
7
Red functions can only
be named in german!
/* Can’t be interpreted */
function authUser*red() {…}
function getName*red() {…}

8. Schlecht!Script
8
Red functions can only
be named in german!
/* RICHTIG! */
function benutzerAutorisierung!*rot() {…}
function nameErhalten!*rot() {…}

9. How to write in Schlecht!Script?
9

10. JavaScript

11. JavaScript
extends
Schlecht!Script
11

12. Dealing with
asynchronous functions
is a nightmare
12

13. JavaScript
• if/else, for, return don’t work
• No try/catch
• Abstraction is broken
13
Dealing with asynchronous functions is painful

14. // execute in sequence
for (var i = 0; i < 10; i++) {
if (shouldProcess(i)) {
results.push(process(i));
}
}
14
JavaScript
if/for synchronously

15. function maybeProcess(i) {
if (i >= 10) { return; }
shouldProcess(function(should) {
if (should) {
process(i, function(result) {
results.push(result);
maybeProcess(i++);
});
}
maybeProcess(i++);
});
}
maybeProcess(0);
15
JavaScript
if/for asynchronously

16. JavaScript
• if/else, for, return don’t work
• No try/catch
• Abstraction is broken
16
Dealing with asynchronous functions is painful

17. Asynchronous code
in JavaScript
17

18. Андрей Саломатин
Productive Mobile
MoscowJS
RadioJS
18
@filipovskii

19. Asynchronous

20. Multiple events
Single operation
20
Asynchronous: two cases

22. Control
22

23. Exceptions
23

24. Unified interface
24

26. • Handling multiple asynchronous events
EventEmitter
Stream
• Handling single asynchronous operation
Continuation Passing Style
Promises
Coroutines
26
ES6

27. • Handling multiple asynchronous events
Async Generators
• Handling single asynchronous operation
Async/Await
27
ES7

28. ES6

29. Handling multiple
asynchronous events
29

30. 30
Handling multiple asynchronous events
EventEmitter
Stream

31. EventEmitter
31
Object that emits events

32. EventEmitter
32
Examples
Browser: XMLHttpRequest
Node: http.Server

33. EventEmitter
emitter.addEventListener(eventName, cb);
emitter.removeEventListener(eventName, cb);
33
API

34. EventEmitter
34
XMLHttpRequest
progress (n)
load (1)
abort (1)
error (1)

35. EventEmitter
35
Implementations
Browser + Node:
EventEmitter3, Tiny Emitter
Node:
Node EventEmitter

36. 36
Handling multiple asynchronous events
EventEmitter
Stream

37. 37
EventEmitter
Stream
Handling multiple asynchronous events

38. Stream of data
Stream
38

39. Stream
39
Examples
Node: fs.createReadStream(path)
Node: gulp.src(pattern)

40. Stream
40
Types of streams
stylus files css files css prefixed files
gulp.src('*.styl') stylus() autoprefixer() gulp.dest('dist')

41. Stream
41
source transform transform consumer
gulp.src('*.styl') stylus() autoprefixer() gulp.dest('dist')
Types of streams

42. 42

43. Stream
43
Implementations
Isomorphic:
RxJS, Kefir, Bacon.js
Node:
Node Streams

44. 44
EventEmitter
Stream
Handling multiple asynchronous events

45. 45
Control
Excpetions
Unified Interface
EventEmitter, Stream

46. Asynchronous operations
46

47. 47
Asynchronous operations
Continuation Passing Style
Promises
Coroutines

48. Continuation Passing Style
48
Examples
Browser:
navigator.geolocation.getCurrentPosition(cb)
Node:
fs.stat(path, cb)

49. try {
var user = fetchUser(userId);
var following = fetchFollowingUsers(userId);
var tweets = fetchTweets(following);
handleResult(tweets);
} catch (err) {
handleError(err);
}
49
Continuation Passing Style
Get twitter feed synchronously

50. fetchUser(userId, function(err, user) {
if (err) { return handleError(err); }
fetchFollowingUsers(user, function(err, following) {
if (err) { return handleError(err); }
fetchTweets(following, function(err, tweets) {
if (err) { return handleError(err); }
handleResult(tweets);
});
});
});
50
Continuation Passing Style
Get twitter feed asynchronously

51. fetchUser(userId, function(err, user) {
if (err) { return handleError(err); }
fetchFollowingUsers(user, function(err, following) {
if (err) { return handleError(err); }
fetchTweets(following, function(err, tweets) {
if (err) { return handleError(err); }
51
Continuation Passing Style
Get twitter feed asynchronously

52. holenBenutzer!*rot(userId, function(err, user) {
if (err) { return handleError*blue(err); }
holenFolgendenBenutzer!*rot(user, function(err, following) {
if (err) { return handleError*blue(err); }
holenTweets!*rot(following, function(err, tweets) {
if (err) { return handleError(err); }
52
Continuation Passing Style
Holen Sie sich die Band tweets asynchron!

53. 53
Schlecht!Script

54. 54
Asynchronous operations
Continuation Passing Style
Promises
Coroutines

55. 55
Continuation Passing Style
Promises
Coroutines
Asynchronous operations

56. Object represents
asynchronous operation
Promises
56

57. Promise.prototype.then(successCb, errorCb);
57
API
Promises

58. fetchUser(userId)
.then(fetchFollowingUsers)
.then(fetchTweets)
.then(handleResult, handleError);
58
Promises
API

59. Promises
vs
Continuation Passing Style
59

60. 60
Implementations
jQuery.Deffered
Bluebird
RSVP
Q
Promises

61. 61
Continuation Passing Style
Promises
Coroutines
Asynchronous operations

62. 62
Continuation Passing Style
Promises
Coroutines
Asynchronous operations

63. Coroutines
63

64. Coroutines
function getUserName(userId) {
var user = getUser(userId);
return user.name;
}
64
Stop the Earth!

65. Function can be
paused and resumed later
65
Coroutines

66. function * getUserName (userId) {
var user = yield getUser(userId);
return user.name;
};
66
Generators: step 1 of 3
Coroutines

67. function * getUserName (userId) {
var user = yield getUser(userId);
return user.name;
};
67
Coroutines
Generators: step 1 of 3

68. getUserName = co.wrap(function * (userId) {
var user = yield getUser(userId);
return user.name;
});
68
Coroutines
Generators: step 2 of 3

69. getUserName = co.wrap(function * (userId) {
var user = yield getUser(userId);
return user.name;
});
69
Coroutines
Generators: step 2 of 3

70. userNamePromise = getUserName(userId);
70
Coroutines
Generators: step 3 of 3

71. Using generators
for asynchronous code —
is a hack
71

72. Using generators
for asynchronous code —
is a hack
72
(but I will not tell anyone)

73. 73
Implementations
Browser + Node:
co (generators), task.js (generators)
Node:
Fibers
Coroutines

74. 74
Continuation Passing Style
Promises
Coroutines
Asynchronous operations

75. 75
Control
Exceptions
Unified Interface
CPS, Promises, Coroutines

76. 76
ES6
• Handling multiple asynchronous events
EventEmitter
Stream
• Handling single asynchronous operation
Continuation Passing Style
Promises
Coroutines

78. ES7

79. 79
ES7
• Handling single asynchronous operation
Async/Await
• Handling multiple asynchronous events
Async Generators

80. 80
ES7ES7
• Handling single asynchronous operation
Async/Await
• Handling multiple asynchronous events
Async Generators

81. Async/Await
getUserName = co.wrap(function * (userId) {
var user = yield getUser(userId);
return user.name;
});
81
Generators

82. async function getUserName(userId) {
var user = await getUser(userId);
return user.name;
}
82
Async/Await
Async/Await

83. async function getUserName(userId) {
var user = await getUser(userId);
return user.name;
}
83
Async функция
Async/Await

84. Asynchronous functions
legalized in ES7
84
Async/Await

85. 85
ES7
• Handling single asynchronous operation
Async/Await
• Handling multiple asynchronous events
Async Generators

86. 86
ES7
• Handling single asynchronous operation
Async/Await
• Handling multiple asynchronous events
Async Generators

87. Event subscription
for human beings
Async Generators
87

88. async function doDraw() {
for (let ev on observe(win, 'mousemove')) {
draw(ev.clientX, ev.clientY);
}
}
88
DOM Events
Async Generators

89. async function doDraw() {
for (let ev on observe(win, 'mousemove')) {
draw(ev.clientX, ev.clientY);
}
}
89
Async Generators
DOM Events

90. doDrawPromise = doDraw();
90
Async Generators
DOM Events

91. async function *filterWSMessages(ws) {
for (let msg on observe(ws, 'message')) {
if (isValid(msg)) yield msg;
}
}
91
WebSocket messages
Async Generators

92. async function *filterWSMessages(ws) {
for (let msg on observe(ws, 'message')) {
if (isValid(msg)) yield msg;
}
}
92
WebSocket messages
Async Generators

93. ??? = filterWSMessages(ws);
??? = observe(win, 'mousemove');
??? = observe(ws, 'message');
93
What does Async Generator return?
Async Generators

94. messagesObservable = filterWSMessages(ws);
eventsObservable = observe(win, 'mousemove');
eventsObservable = observe(ws, 'message');
94
Async Generators
What does Async Generator return?

95. Observables
Streams
aka

96. 96
ES7
• Handling single asynchronous operation
Async/Await
• Handling multiple asynchronous events
Async Generators

97. ES6 and ES7:
asynchronous operations
97

98. fetchUser(userId, function(err, user) {
if (err) { return handleError(err); }
fetchFollowingUsers(user, function(err, following) {
if (err) { return handleError(err); }
fetchTweets(following, function(err, tweets) {
if (err) { return handleError(err); }
handleResult(tweets);
});
});
});
98
ES6 and ES7
Get twitter feed: CPS

99. fetchUser(userId)
.then(fetchFollowingUsers)
.then(fetchTweets)
.then(handleResult, handleError);
99
Get twitter feed: Promise
ES6 and ES7

100. try {
var user = await fetchUser(userId);
var following = await fetchFollowingUsers(userId);
var tweets = await fetchTweets(following);
handleResult(tweets);
} catch (err) {
handleError(err);
}
100
Get twitter feed: Async/Await
ES6 and ES7

101. ES6 and ES7:
handling multiple events
101

102. var handler = function(ev) {
if (canDraw(ev)) {
draw(ev.clientX, ev.clientY);
}
};
window.addEventListener('mousemove', handler);
window.removeEventListener('mousemove', handler); // later
102
DOM events: EventEmitter
ES6 and ES7

103. Kefir.fromEvent(window, 'mousemove')
.filter(canDraw)
.onValue(function(ev) {
draw(ev.clientX, ev.clientY)
})
.end(); // later
103
DOM events: Stream
ES6 and ES7

104. for (ev on observe(window, 'mousemove')) {
if (canDraw(ev)) {
draw(ev.clientX, ev.clientY);
}
}
104
DOM events: Async Generators
ES6 and ES7

105. How to stop debugging
asynchronous code
and start living
105

106. Define the case
106

107. Consider restrictions
107

108. Use best practices
108

109. Schlecht!Script?

110. Thank you!
Andrey Salomatin
@filipovskii
BerlinJS
18.06.2015