• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Event Driven Javascript

on

  • 10,054 views

Talk i gave at WebTech Conference on November 10th 2010. ...

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

Statistics

Views

Total Views
10,054
Views on SlideShare
9,217
Embed Views
837

Actions

Likes
13
Downloads
95
Comments
0

15 Embeds 837

http://federico.galassi.net 721
http://www.galassi.net 31
http://francescoagati.wordpress.com 27
https://si0.twimg.com 13
http://lanyrd.com 12
http://localhost:4000 11
http://francescoagati.posterous.com 8
http://translate.googleusercontent.com 6
https://francescoagati.wordpress.com 2
http://www.linkedin.com 1
http://www.newsblur.com 1
http://a0.twimg.com 1
https://twimg0-a.akamaihd.net 1
http://66.163.168.225 1
https://twitter.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Event Driven Javascript Event Driven Javascript Presentation Transcript

    • 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
    • • Event driven programming • History of javascript design • Event driven javascript
    • 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
    • • Event driven programming • History of javascript design • Event driven javascript
    • 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://stratifiedjs.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, 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
    • 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