1. Event Driven
Javascript
federico.galassi@cleancode.it
slidehare.net/fgalassi

2. • Event driven programming
• History of javascript design
• Event driven javascript

3. Software
components
exchange
information

4. Producers
give
information

5. Consumers
take
information

6. Taxonomy of
interaction models

7. Who is the
producer ?

8. Known
Where’s Kenny?
Over There!

9. Unknown
Where’s Kenny?
Over There!
Where’s Kenny?

10. Who is the
producer ?
known unknown

11. How does
information flow ?

12. Pull
Where’s Kenny?
Over There!

13. Push
Let me know
where’s Kenny
Ok
... later ...
Hey! Over There!

14. How does
information flow ?
known unknown
pull
push

15. 4 Models of
interaction

16. 1.
known unknown
Request
pull
Response
push

17. Request
Response
// method invocation
weapon = armory.buy(“shuriken”)
kenny = cartman.findKenny()
kenny.kill(weapon)

18. Request
Response
SIMPLE

19. Request
Response
SIMPLE
SEQUENTIAL

20. Request
Response
SIMPLE
SEQUENTIAL
IMPERATIVE

21. Request
Response
HUMAN

22. Request
Response
TIGHT
COUPLING
SEQUENTIAL
IMPERATIVE

23. Request
Response
TIGHT
COUPLING
INEFFICIENT SEQUENTIAL
IMPERATIVE

24. 2.
known unknown
Anonymous
Request
pull Request
Response Response
push

25. Anonymous
Request Response
The system decouples
information and its owner

26. Anonymous
Request Response
load balancer

27. Anonymous
Request Response
alancer FAILOVER

28. Anonymous
Request Response
alancer FAILOVER
EXTENSIBLE

29. Anonymous
Request Response
SYSTEM
COMPLEXITY

30. 3.
known unknown
Anonymous
Request
pull Request
Response Response
push Callback

31. Callback
// observer pattern
cartman.findKenny(
function(kenny) {
kenny.kill(weapon)
})

32. Don’t call us
We’ll call you

33. From Sequential
COMPUTATION
INPUT OUTPUT
STATE

34. To State Machine
INPUT STATE A
COMPUTATION
INPUT STATE B
COMPUTATION
INPUT STATE C OUTPUT

35. Callback
Relinquish control

36. Callback
Just in time is optimal
Producers
Consumer

37. Callback
efficiency

38. Callback
EXPLICIT efficiency
CONTROL
FLOW

39. 4.
known unknown
Anonymous
Request
pull Request
Response Response
push Callback Event Driven

40. Callback +
Anonymous
Request Response
=
EVENTS

41. Home Automation
Example

42. EVENTS
FAILOVER + system
COMPLEXITY +
EXTENSIBLE +
explicit
efficiency = control flow =
-------------
------------
------------ -------------
------------
------------
power chaos

43. Expressive Power
EVENTS
ANON.
CALLBACK REQUEST
REQUEST RESPONSE RESPONSE

44. Complexity

45. Javascript
is
event driven

46. Not
Javascript
Fault

47. Not
Your
Fault

48. Just an
HARDER
problem

49. • Event driven programming
• History of javascript design
• Event driven javascript

50. In the old days...
Netscape Headquarters
May 1995

51. This guy had two
problems...
Brendan Eich
Creator of Javascript

52. 1. The world is
Concurrent

53. ... and so is
browser

54. User Input
Network Requests

55. 2. Very very very
short time
LiveScript first shipped in betas of Netscape Navigator 2.0 in
September 1995

56. Be
Pragmatic

57. He could use
Threads ...
Real preemptive
concurrency

58. Threads
are
Evil

59. He could use
Coroutines ...
Emulated
cooperative
concurrency

60. needs a
complex
scheduler

61. He was a
functional
guy

62. Take it easy
Not concurrent
Just non-blocking

63. First class functions
// callbacks give
// non linear execution
wally.takeJob(function work() ...)
wally.getCoffee(function drink() ...)
// ... later ...
// first drink coffee
// then work

64. Simple event loop
// make it look concurrent
button.onclick(function() {
div.style.color = “red”
})
UI UI update Click handler
event UI update Click handler
queue Click handler
time
User click

65. Non-blocking I/O
// network async api
xhr.onreadystatechange = function(){
...
})
// DOM in memory
div.innerHTML = “Hello”

66. Javascript won

67. But
sold its soul
for simplicity

68. One thread
=
Freeze

69. No Wait()

70. Simple sequential
function breakfast() {
var bacon = bacon()
var juice = orangeJuice()
eat(bacon, juice)
} computation
function bacon() {
// get bacon
return bacon
}

71. Async gets in
function breakfast() {
var bacon = bacon() wrong
var juice = orangeJuice()
eat(bacon, juice)
}
function bacon() {
getBacon(function(bacon) {
// got bacon
})
return what?
}

72. Break computation
function breakfast() {
var callback = function(bacon) {
var juice = getOrangeJuice()
eat(bacon, juice)
} rest of computation
bacon(callback)
} computation
function bacon(callback) {
// get bacon async
callback(bacon)
}

73. Break more
function breakfast() {
var callback = function(bacon) {
var callback = function(juice) {
eat(bacon, juice) rest of computation 2
}
getOrangeJuice(callback)
} rest of computation 1
bacon(callback)
} computation

74. Continuation
Passing
Style

75. it’s Viral 1
// simple sequential computation
function A() { return B() }
function B() { return C() }
function C() { return value }
A()

76. it’s Viral 2
// C becomes async, everything becomes async
function A(callback) {
B(function(value) { callback(value) })
}
function B(callback) {
C(function(value) { callback(value) })
}
function C(callback) { callback(value) }
A()

77. it’s Hard sleep
// simple sequential sleep
sleep(3000)
doSomething()

78. it’s Hard sleep
// not so simple sleep
setTimeout(function() {
doSomething()
}, 3000)

79. it’s Hard loop
// simple sequential loop
images.forEach(function(url)
var image = fetchImage(url)
image.show()
}

80. it’s Hard loop
// fetchImage is async
images.forEach(function(url)
fetchImage(url, function(image) {
image.show()
})
}

81. it’s Hard loop
// Show them in the right order
function processImage() {
var url = images.shift()
if (url) {
fetchImage(url, function(image) {
image.show()
processImage()
})
}
}
processImage()

82. Javascript
sacrificed
convenience
for simplicity

83. ... and it was the
right choice

84. • Event driven programming
• History of javascript design
• Event driven javascript

85. How can we
tame
complexity?

86. Add
Wait()
stupid!

87. Easy sleep
// simple sequential sleep with wait/resume
sleep(3000)
doSomething()
function sleep(msec) {
wait(
setTimeout(function() {
resume()
}, msec)
)
}

88. Beautiful

89. Already done !

90. // write sequential logic
function doOpsABC() {
waitfor {
var x = doOpA()
}
and {
var y = doOpB()
}
return doOpC(x,y)
}
http://stratifiedjs.org/

91. Transform to
continuation
passing
style

92. // synchronous read
fs.read(path).wait()
http://nodejs.org/

93. Implement
coroutines

94. Back to
complexity

95. Jeremy Ashkenas - CoffeeScript
“Case in point, Stratified JS: A virtuoso performance of
JavaScript compilation, but look at what it compiles into.”
“I don't think we want to take CoffeeScript down that
path. Open the Pandora's box of injecting special
functions into the runtime, and ... suddenly you have to
worry about being orders of magnitude slower than
normal JS.”
https://github.com/jashkenas/coffee-script/issuesearch?state=closed&q=asynchronous#issue/350/comment/330116

96. Jeremy Ashkenas - CoffeeScript
var getDocument = function(){ var getDocument;
waitfor(document) { __oni_rt.exec(__oni_rt.Seq(0,__oni_rt.Seq(0,__oni_rt.Nblock(
resume(db.get(id)); function(arguments){
} getDocument=function (){
return document; return __oni_rt.exec(__oni_rt.Seq(1,__oni_rt.Suspend(
}; function(arguments, resume){
return __oni_rt.exec(__oni_rt.Seq(0,__oni_rt.Fcall(0,__oni_rt.Nbl
function(arguments){
return resume;
}),__oni_rt.Nblock(function(arguments){
return db.get(id)
})
)),arguments,this)},
function() {
document=arguments[0];
}),__oni_rt.Fcall(0,__oni_rt.Return,__oni_rt.Nblock(
function(arguments){
return document;
})
)),arguments, this)};
}))), this.arguments, this);

97. Ryan Dahl - node.js
“I will be removing wait() in the next release of Node.
It has already been removed from the documentation.”
“A proper implementation of wait() necessitates true
coroutines”
“This sort of mental complication is exactly what I'm
trying to avoid in Node.”
http://groups.google.com/group/nodejs/msg/df199d233ff17efa

98. Take it easy
No wait()
Just flow control

99. Sequence 1
// async sequential computation
sequence(get, filter, process)
function get(resume) {
$.get(url, function(data) {
resume(data)
})
}
function filter(resume, data) { ... }
function process(resume, data) { ... }

100. Sequence 2
// async sequential computation
function sequence() {
var steps = arguments.slice()
var doStep = function(val) {
var next = steps.shift()
if (next) {
next.apply(null, [doStep, val])
}
}
doStep()
}

101. Functional
programming
first(fetchA, fetchB, fetchC)
every(checkA, checkB, checkC)
map(array, mapper)
filter(array, filter)

102. From imperative
var clicks = 0, timeout = null
$(“button”).click(function() {
clicks++
if (clicks == 1) {
timeout = setTimeout(function() {
clicks == 0
})
}
if (clicks == 3) {
clearTimeout(timeout)
clicks = 0
$(this).trigger(“tripleclick”)
}
})

103. To declarative
$(button)
.on(“click”)
.times(3)
.within(“1 second”)
.trigger(“tripleclick”)

104. Questions?

105. federico.galassi@cleancode.it