Talk i gave at WebTech Conference on November 10th 2010. Abstract: Why is web application programming so difficult? Is it javascript fault? Is it our fault? Time to take the red pill and wake up in the real, event driven world. A world where if you can dodge the bullets of skyrocketing complexity, your programs can be made scalable, fault tolerant, extensible and just beautiful. Also http://federico.galassi.net/ http://www.webtechcon.it Follow me on Twitter! https://twitter.com/federicogalassi

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

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

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?
Where’s Kenny?
Over There!

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. known unknown
pull
push
Request
Response
1.

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

18. SIMPLE
Request
Response

19. SIMPLE
SEQUENTIAL
Request
Response

20. SIMPLE
SEQUENTIAL
IMPERATIVE
Request
Response

21. HUMAN
Request
Response

22. SEQUENTIAL
IMPERATIVE
Request
Response
TIGHT
COUPLING

23. SEQUENTIAL
IMPERATIVE
Request
Response
TIGHT
COUPLING
INEFFICIENT

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

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

26. Anonymous
Request Response
load balancer

27. Anonymous
Request Response
FAILOVERalancer

28. Anonymous
Request Response
alancer FAILOVER
EXTENSIBLE

29. Anonymous
Request Response
SYSTEM
COMPLEXITY

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

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

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

33. From Sequential
INPUT
STATE
COMPUTATION
OUTPUT

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

35. Callback
Relinquish control

36. Just in time is optimal
Callback
Consumer
Producers

37. Callback
efficiency

38. Callback
efficiencyEXPLICIT
CONTROL
FLOW

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

40. Callback +
Anonymous
Request Response
=
EVENTS

41. Home Automation
Example

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

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

44. Complexity

45. Javascript
is
event* driven
*technically callback driven

46. Not
Javascript
Fault

47. Not
Your
Fault

48. Just an
HARDER
problem

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

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. Network Requests
User Input

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

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. Not concurrent
Take it easy
Just non-blocking

63. Callbacks
// 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() {
...
})
UI update
Click handler
UI update
Click handler
Click handlerUI
event
queue
time
User click

65. Non-blocking I/O
// network async api
xhr.onreadystatechange = function(){
...
})
// DOM manipulations are synchronous
// but in memory so very fast
div.innerHTML = “Hello”

66. Javascript won

67. But
sold its soul
for simplicity

68. One thread
=
Freeze

69. No Wait()

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

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

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

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

74. Continuation
Passing
Style

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

76. it’s Viral
// 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()
2

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

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

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

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

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

82. Javascript
sacrificed
convenience
for simplicity

83. ... and it was the
right choice

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

85. How can we
tame
complexity?

86. Add
Wait()
stupid!

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

88. Beautiful

89. Already done !

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

91. Transform to
continuation
passing
style

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

93. Implement
coroutines

94. Back to
complexity

95. Jeremy Ashkenas - CoffeeScript
“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.”
“Case in point, Stratified JS:A virtuoso performance of
JavaScript compilation, but look at what it compiles into.”
https://github.com/jashkenas/coffee-script/issuesearch?state=closed&q=asynchronous#issue/350/comment/330116

96. Jeremy Ashkenas - CoffeeScript
var getDocument = function(){
waitfor(document) {
resume(db.get(id));
}
return document;
};
var getDocument;
__oni_rt.exec(__oni_rt.Seq(0,__oni_rt.Seq(0,__oni_rt.Nblock(
function(arguments){
getDocument=function (){
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. “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.”
Ryan Dahl - node.js
http://groups.google.com/group/nodejs/msg/df199d233ff17efa

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

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

100. Sequence
// 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()
}
2

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

102. The road is
taking your
control flow

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

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

105. Questions?

106. federico.galassi@cleancode.it