The document discusses event driven programming and the history of JavaScript's design. It explains that JavaScript was designed to be event driven due to its need for non-blocking and concurrent behavior in the browser. Early JavaScript used callbacks and anonymous event handlers to implement an event loop that made asynchronous code appear concurrent. This led to complexities with control flow that were addressed through functional programming patterns like sequence and declarative APIs.
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”
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
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()
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
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