Event Driven Javascript
16 likes•6,028 views
This document discusses event-driven programming in JavaScript, detailing its historical context and the evolution of its architecture. It highlights interaction models, the shift from sequential to asynchronous execution, and the complexity that arises from the callback structure. Various methods for managing this complexity are explored, alongside the implications of these design choices on performance and control flow.
![Jeremy Ashkenas - CoffeeScript
var getDocument = function(){
waitfor(document) {
resume(db.get(id));
}
return document;
};
var getDocument;
__oni_rt.exec(__oni_rt.Seq(0,__oni_rt.Seq(0,__oni_rt.Nblock(
function(arguments){
getDocument=function (){
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://cdn.statically.io/img/image.slidesharecdn.com/eventdrivenjs-101111092308-phpapp02/85/Event-Driven-Javascript-96-320.jpg)
![Sequence
// 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()
}
2](https://cdn.statically.io/img/image.slidesharecdn.com/eventdrivenjs-101111092308-phpapp02/85/Event-Driven-Javascript-100-320.jpg)
Event Driven Javascript
- 2. • Event driven programming • Event driven javascript • History of javascript design
- 7. Who is the producer ?
- 10. Who is the producer ? known unknown
- 13. Push Let me know where’s Kenny Ok ... later ... Hey! Over There!
- 14. How does information flow ? known unknown pull push
- 17. Request Response // method invocation weapon = armory.buy(“shuriken”) kenny = cartman.findKenny() kenny.kill(weapon)
- 25. Anonymous Request Response The system decouples information and its owner
- 31. Callback // observer pattern cartman.findKenny( function(kenny) { kenny.kill(weapon) })
- 32. Don’t call us We’ll call you
- 34. To State Machine INPUT STATE A OUTPUT INPUT STATE B INPUT STATE C COMPUTATION COMPUTATION
- 36. Just in time is optimal Callback Consumer Producers
- 42. EVENTS FAILOVER + EXTENSIBLE + efficiency = ------------------------------------- power system COMPLEXITY + explicit control flow = ------------------------------------- chaos
- 44. Complexity
- 47. Not Your Fault
- 49. • Event driven programming • Event driven javascript • History of javascript design
- 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. LiveScript first shipped in betas of Netscape Navigator 2.0 in September 1995 2. Very very very short time
- 56. Be Pragmatic
- 57. He could use Threads ... Real preemptive concurrency
- 58. Threads are Evil
- 59. He could use Coroutines ... Emulated cooperative concurrency
- 62. Not concurrent Take it easy Just non-blocking
- 63. Callbacks // 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() { ... }) UI update Click handler UI update Click handler Click handlerUI event queue time User click
- 65. Non-blocking I/O // network async api xhr.onreadystatechange = function(){ ... }) // DOM manipulations are synchronous // but in memory so very fast div.innerHTML = “Hello”
- 66. Javascript won
- 67. But sold its soul for simplicity
- 69. No Wait()
- 70. function breakfast() { var bacon = bacon() var juice = orangeJuice() eat(bacon, juice) } Simple sequential function bacon() { // get bacon return bacon } computation
- 71. function breakfast() { var bacon = bacon() var juice = orangeJuice() eat(bacon, juice) } function bacon() { getBacon(function(bacon) { // got bacon }) } Async gets in wrong return what?
- 72. Break computation function breakfast() { var callback = function(bacon) { var juice = getOrangeJuice() eat(bacon, juice) } bacon(callback) } function bacon(callback) { // get bacon async callback(bacon) } rest of computation computation
- 73. Break more function breakfast() { var callback = function(bacon) { var callback = function(juice) { eat(bacon, juice) } getOrangeJuice(callback) } bacon(callback) } rest of computation 1 computation rest of computation 2
- 75. // simple sequential computation function A() { return B() } function B() { return C() } function C() { return value } A() it’s Viral1
- 76. it’s Viral // 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() 2
- 77. // simple sequential sleep sleep(3000) doSomething() sleepit’s Hard
- 78. // not so simple sleep setTimeout(function() { doSomething() }, 3000) sleepit’s Hard
- 79. // simple sequential loop images.forEach(function(url) var image = fetchImage(url) image.show() } loopit’s Hard
- 80. // fetchImage is async images.forEach(function(url) fetchImage(url, function(image) { image.show() }) } loopit’s Hard
- 81. // Show them in the right order function processImage() { var url = images.shift() if (url) { fetchImage(url, function(image) { image.show() processImage() }) } } processImage() loopit’s Hard
- 83. ... and it was the right choice
- 84. • Event driven programming • Event driven javascript • History of javascript design
- 87. Easy // simple sequential sleep with wait/resume sleep(3000) doSomething() function sleep(msec) { wait( setTimeout(function() { resume() }, msec) ) } sleep
- 88. Beautiful
- 89. Already done !
- 90. http://stratifiedjs.org/ // write sequential logic function doOpsABC() { waitfor { var x = doOpA() } and { var y = doOpB() } return doOpC(x,y) }
- 95. Jeremy Ashkenas - CoffeeScript “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.” “Case in point, Stratified JS:A virtuoso performance of JavaScript compilation, but look at what it compiles into.” https://github.com/jashkenas/coffee-script/issuesearch?state=closed&q=asynchronous#issue/350/comment/330116
- 96. Jeremy Ashkenas - CoffeeScript var getDocument = function(){ waitfor(document) { resume(db.get(id)); } return document; }; var getDocument; __oni_rt.exec(__oni_rt.Seq(0,__oni_rt.Seq(0,__oni_rt.Nblock( function(arguments){ getDocument=function (){ 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. “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.” Ryan Dahl - node.js http://groups.google.com/group/nodejs/msg/df199d233ff17efa
- 98. No wait() Take it easy Just control flow
- 99. Sequence // async sequential computation sequence(get, filter, process) function get(resume) { $.get(url, function(data) { resume(data) }) } function filter(resume, data) { ... } function process(resume, data) { ... } 1
- 100. Sequence // 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() } 2
- 101. Functional programming first(fetchA, fetchB, fetchC, callback) every(checkA, checkB, checkC, callback) map(array, mapper, callback) filter(array, filter, callback)
- 102. The road is taking your control flow
- 103. From imperative // complex triple click event var clicks = 0, timeout = null $(“button”).click(function() { clicks++ if (clicks == 1) { timeout = setTimeout(function() { clicks = 0 }, 1000) } if (clicks == 3) { clearTimeout(timeout) clicks = 0 $(this).trigger(“tripleclick”) } })
- 105. Questions?