The document discusses event driven programming and the history of JavaScript's design as an event driven language. It explains that JavaScript was designed to be non-blocking and use callbacks to handle asynchronous operations. This led to JavaScript adopting an event driven model where functions are passed as callbacks to handle asynchronous responses. The document also discusses how this event driven approach can increase complexity and presents different techniques for managing asynchronous logic like sequencing functions and functional programming patterns.
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