![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);](https://image.slidesharecdn.com/eventdrivenjavascript-101207073653-phpapp01/85/Event-driven-javascript-96-320.jpg)
![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()
}](https://image.slidesharecdn.com/eventdrivenjavascript-101207073653-phpapp01/85/Event-driven-javascript-100-320.jpg)
Event driven javascript
- 1. Event Driven Javascript [email protected] slidehare.net/fgalassi
- 2. • Event driven programming • History of javascript design • Event driven javascript
- 4. Producers give information
- 5. Consumers take information
- 7. Who is the producer ?
- 8. Known Where’s Kenny? Over There!
- 9. Unknown Where’s Kenny? Over There! Where’s Kenny?
- 10. Who is the producer ? known unknown
- 12. Pull Where’s Kenny? Over There!
- 13. Push Let me know where’s Kenny Ok ... later ... Hey! Over There!
- 14. How does information flow ? known unknown pull push
- 16. 1. known unknown Request pull Response push
- 17. Request Response // method invocation weapon = armory.buy(“shuriken”) kenny = cartman.findKenny() kenny.kill(weapon)
- 18. Request Response SIMPLE
- 19. Request Response SIMPLE SEQUENTIAL
- 20. Request Response SIMPLE SEQUENTIAL IMPERATIVE
- 22. Request Response TIGHT COUPLING SEQUENTIAL IMPERATIVE
- 23. Request Response TIGHT COUPLING INEFFICIENT SEQUENTIAL IMPERATIVE
- 24. 2. known unknown Anonymous Request pull Request Response Response push
- 25. Anonymous Request Response The system decouples information and its owner
- 26. Anonymous Request Response load balancer
- 27. Anonymous Request Response alancer FAILOVER
- 28. Anonymous Request Response alancer FAILOVER EXTENSIBLE
- 29. Anonymous Request Response SYSTEM COMPLEXITY
- 30. 3. known unknown Anonymous Request pull Request Response Response push Callback
- 31. Callback // observer pattern cartman.findKenny( function(kenny) { kenny.kill(weapon) })
- 32. Don’t call us We’ll call you
- 33. From Sequential COMPUTATION INPUT OUTPUT STATE
- 34. To State Machine INPUT STATE A COMPUTATION INPUT STATE B COMPUTATION INPUT STATE C OUTPUT
- 36. Callback Just in time is optimal Producers Consumer
- 37. Callback efficiency
- 38. Callback EXPLICIT efficiency CONTROL FLOW
- 39. 4. known unknown Anonymous Request pull Request Response Response push Callback Event Driven
- 40. Callback + Anonymous Request Response = EVENTS
- 41. Home Automation Example
- 42. EVENTS FAILOVER + system COMPLEXITY + EXTENSIBLE + explicit efficiency = control flow = ------------- ------------ ------------ ------------- ------------ ------------ power chaos
- 43. Expressive Power EVENTS ANON. CALLBACK REQUEST REQUEST RESPONSE RESPONSE
- 44. Complexity
- 45. Javascript is event driven
- 46. Not Javascript Fault
- 47. Not Your Fault
- 49. • Event driven programming • History of javascript design • Event driven javascript
- 50. In the old days... Netscape Headquarters May 1995
- 51. This guy had two problems... Brendan Eich Creator of Javascript
- 52. 1. The world is Concurrent
- 53. ... and so is browser
- 55. 2. Very very very short time LiveScript first shipped in betas of Netscape Navigator 2.0 in September 1995
- 56. Be Pragmatic
- 57. He could use Threads ... Real preemptive concurrency
- 58. Threads are Evil
- 59. He could use Coroutines ... Emulated cooperative concurrency
- 61. He was a functional guy
- 62. Take it easy Not concurrent Just non-blocking
- 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”
- 66. Javascript won
- 67. But sold its soul for simplicity
- 68. One thread = Freeze
- 69. No Wait()
- 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
- 74. Continuation Passing Style
- 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()
- 82. Javascript sacrificed convenience for simplicity
- 83. ... and it was the right choice
- 84. • Event driven programming • History of javascript design • Event driven javascript
- 85. How can we tame complexity?
- 87. Easy sleep // simple sequential sleep with wait/resume sleep(3000) doSomething() function sleep(msec) { wait( setTimeout(function() { resume() }, msec) ) }
- 88. Beautiful
- 89. Already done !
- 90. // write sequential logic function doOpsABC() { waitfor { var x = doOpA() } and { var y = doOpB() } return doOpC(x,y) } http://stratifiedjs.org/
- 91. Transform to continuation passing style
- 92. // synchronous read fs.read(path).wait() http://nodejs.org/
- 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
- 96. 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);
- 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
- 98. Take it easy No wait() Just flow control
- 99. 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) { ... }
- 100. 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() }
- 101. Functional programming first(fetchA, fetchB, fetchC) every(checkA, checkB, checkC) map(array, mapper) filter(array, filter)
- 102. 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”) } })
- 103. To declarative $(button) .on(“click”) .times(3) .within(“1 second”) .trigger(“tripleclick”)
- 104. Questions?
- 105. [email protected]