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

Who is the producer ?

Known Where’s Kenny? Over There!

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

Who is the producer ? known unknown

How does information flow ?

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

4 Models of interaction

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 HUMAN

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 Relinquish control

Callback Just in time is optimal Producers Consumer

Callback efficiency

Callback EXPLICIT efficiency CONTROL FLOW

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

Callback + Anonymous Request Response = EVENTS

Home Automation Example

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

Expressive Power EVENTS ANON. CALLBACK REQUEST REQUEST RESPONSE RESPONSE

Complexity

Javascript is event* driven * technically callback driven

Not Javascript Fault

Not Your Fault

Just an HARDER problem

In the old days... Netscape Headquarters May 1995

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

1. The world is Concurrent

... and so is browser

User Input Network Requests

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

Be Pragmatic

He could use Threads ... Real preemptive concurrency

Threads are Evil

He could use Coroutines ... Emulated cooperative concurrency

needs a complex scheduler

He was a functional guy

Take it easy Not concurrent Just non-blocking

Callbacks // 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() { ... }) 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 manipulations are synchronous // but in memory so very fast div.innerHTML = “Hello”

Javascript won

But sold its soul for simplicity

One thread = Freeze

No Wait()

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

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

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

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

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?

Add Wait() stupid!

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

Beautiful

Already done !

// 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/

Implement coroutines

Back to complexity

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, callback) every(checkA, checkB, checkC, callback) map(array, mapper, callback) filter(array, filter, callback)

The road is taking your flow control

From imperative // complex triple click event 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”)

Questions?

federico.galassi@cleancode.it

http://federico.galassi.net	682
http://www.galassi.net	31
http://francescoagati.wordpress.com	15
https://si0.twimg.com	13
http://localhost:4000	11
http://francescoagati.posterous.com	8
http://translate.googleusercontent.com	6
http://66.163.168.225	1
https://twimg0-a.akamaihd.net	1
http://a0.twimg.com	1

Event Driven Javascript

by Federico Galassi

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 769

Statistics