Event driven javascript

Event Driven
Javascript

federico.galassi@cleancode.it
slidehare.net/fgalassi

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

Software
components
exchange
information

Producers
give
information

Consumers
take
information

Taxonomy of
interaction models

Known
Where’s Kenny?

Over There!

Unknown
Where’s Kenny?

Over There!

Where’s Kenny?

Who is the
producer ?
known unknown

Pull
Where’s Kenny?

Over There!

Push
Let me know
where’s Kenny

Ok

... later ...
Hey! Over There!

How does
information flow ?
known unknown
pull

push

1.
known unknown

Request
pull
Response

push

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

Request
Response

SIMPLE

Request
Response

SIMPLE
SEQUENTIAL

Request
Response

SIMPLE
SEQUENTIAL
IMPERATIVE

Request
Response

TIGHT
COUPLING
SEQUENTIAL
IMPERATIVE

Request
Response

TIGHT
COUPLING

INEFFICIENT SEQUENTIAL
IMPERATIVE

2.
known unknown

Anonymous
Request
pull Request
Response Response

push

Anonymous
Request Response

The system decouples
information and its owner

Anonymous
Request Response

load balancer

Anonymous
Request Response

alancer FAILOVER

Anonymous
Request Response

alancer FAILOVER

EXTENSIBLE

Anonymous
Request Response

SYSTEM
COMPLEXITY

3.
known unknown

Anonymous
Request
pull Request
Response Response

push Callback

Callback

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

Don’t call us
We’ll call you

From Sequential

COMPUTATION

INPUT OUTPUT

STATE

To State Machine
INPUT STATE A
COMPUTATION

INPUT STATE B
COMPUTATION

INPUT STATE C OUTPUT

Callback
Just in time is optimal

Producers

Consumer

Callback

EXPLICIT efficiency
CONTROL
FLOW

4.
known unknown

Anonymous
Request
pull Request
Response Response

push Callback Event Driven

Callback +
Anonymous
Request Response
=
EVENTS

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

Expressive Power
EVENTS

ANON.
CALLBACK REQUEST
REQUEST RESPONSE RESPONSE

Javascript
is
event driven

In the old days...

Netscape Headquarters
May 1995

This guy had two
problems...

Brendan Eich
Creator of Javascript

2. Very very very
short time

LiveScript first shipped in betas of Netscape Navigator 2.0 in
September 1995

He could use
Threads ...
Real preemptive
concurrency

He could use
Coroutines ...
Emulated
cooperative
concurrency

Take it easy

Not concurrent
Just non-blocking

First class functions
// callbacks give
// non linear execution
wally.takeJob(function work() ...)
wally.getCoffee(function drink() ...)

// ... later ...
// first drink coffee
// then work

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

Non-blocking I/O
// network async api
xhr.onreadystatechange = function(){
...
})

// DOM in memory
div.innerHTML = “Hello”

But
sold its soul
for simplicity

Simple sequential
function breakfast() {
var bacon = bacon()
var juice = orangeJuice()
eat(bacon, juice)
} computation

function bacon() {
// get bacon
return bacon
}

Async gets in
var bacon = bacon() wrong
var juice = orangeJuice()
eat(bacon, juice)
}

function bacon() {
getBacon(function(bacon) {
// got bacon
})
return what?
}

Break computation
var callback = function(bacon) {
var juice = getOrangeJuice()
eat(bacon, juice)
} rest of computation
bacon(callback)
} computation

function bacon(callback) {
// get bacon async
callback(bacon)
}

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

Continuation
Passing
Style

it’s Viral 1

// simple sequential computation

function A() { return B() }
function B() { return C() }
function C() { return value }

A()

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()

it’s Hard sleep

// simple sequential sleep

sleep(3000)
doSomething()

it’s Hard sleep

// not so simple sleep

setTimeout(function() {
doSomething()
}, 3000)

it’s Hard loop

// simple sequential loop

images.forEach(function(url)
var image = fetchImage(url)
image.show()
}

it’s Hard loop

// fetchImage is async

images.forEach(function(url)
fetchImage(url, function(image) {
image.show()
})
}

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()

Javascript
sacrificed
convenience
for simplicity

... and it was the
right choice

How can we
tame
complexity?

Easy sleep

// simple sequential sleep with wait/resume

sleep(3000)
doSomething()

function sleep(msec) {
wait(
setTimeout(function() {
resume()
}, msec)
)
}

// write sequential logic

function doOpsABC() {
waitfor {
var x = doOpA()
}
and {
var y = doOpB()
}
return doOpC(x,y)
}

http://stratiﬁedjs.org/

Transform to
continuation
passing
style

// synchronous read

fs.read(path).wait()

http://nodejs.org/

Jeremy Ashkenas - CoffeeScript

“Case in point, Stratiﬁed 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

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);

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

Take it easy

No wait()
Just flow control

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) { ... }

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()
}

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

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”)
}
})

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

Event driven javascript

More Related Content

What's hot

Viewers also liked

Similar to Event driven javascript

More from Francesca1980

Event driven javascript