Livecoding in Javascript Jason Frame / @jaz303 Friday, 31 May 13 

What is livecoding? By akirto. http://www.flickr.com/photos/30132612@N00/3840200923/in/photostream Friday, 31 May 13 

Performance-Oriented Friday, 31 May 13 

Node-based Friday, 31 May 13 

Microworlds Paper - “Twenty Reasons Why You Should Use Boxer (Instead of Logo)” Andrea A. diSessa Friday, 31 May 13 

Smalltalk, Self Paper - “The Early History of Smalltalk” Alan C. Kay Friday, 31 May 13 

Why livecode? Friday, 31 May 13 

Why Javascript? Friday, 31 May 13 

Why Javascript? • Flexible language • Ecosystem - browser + node.js = node- webkit • Single threaded • Event loop Friday, 31 May 13 

Why Javascript? Describing Live programming using program transformations and a callstack explicit interpreter Olov Johansson Friday, 31 May 13 

Domain-Specific Livecoding • Generalised tools can be complex • May also make unacceptable performance/ timing trade-offs • Evolve tools with your application Friday, 31 May 13 

Demo Time Friday, 31 May 13 

Friday, 31 May 13 

Implementation Strategies Friday, 31 May 13 

Implementation Strategies eval() is evil Friday, 31 May 13 

Implementation Strategies eval() is evil Friday, 31 May 13 

Implementation Strategies • Private State • Variable Injection • “Globals” Preservation • Internal eval() • Blueprints • Snapshot • Clocksources Friday, 31 May 13 

Private State Prevent pollution of global namespace Friday, 31 May 13 

Private State function setup() { position = {x: 10, y: 20}; velocity = {x: 1, y: 1}; } function loop() { position.x += velocity.x; position.y += velocity.y; } Friday, 31 May 13 

Private State (function() { “use strict”; var position; var velocity; function setup() { position = {x: 10, y: 20}; velocity = {x: 1, y: 1}; } function loop() { position.x += velocity.x; position.y += velocity.y; } })(); Friday, 31 May 13 

Private State (function() { “use strict”; var position; var velocity; function setup() { position = {x: 10, y: 20}; velocity = {x: 1, y: 1}; } function loop() { position.x += velocity.x; position.y += velocity.y; } return { setup: setup, loop: loop }; })(); Friday, 31 May 13 

Variable Injection Provide objects to user-code Friday, 31 May 13 

Variable Injection function loop() { car.drawAt(0,0,50,50) } // ... // ... // ... Friday, 31 May 13 

Variable Injection // Generate method signature from defined // objects (function(car, trafficLights, background) { // Paste user code here function loop() { car.drawAt(0,0,50,50) } // ... // ... // ... }).apply(null, exposedObjects); Friday, 31 May 13 

“Globals” Preservation Persist global values between code reloads Friday, 31 May 13 

“Globals” Preservation var carX = 0; var carY = 0; var speed = 5; function loop() { carY += speed; draw(); } Friday, 31 May 13 

“Globals” Preservation var carX = 0; var carY = 0; var speed = 5; function loop() { carY += speed; draw(); } Friday, 31 May 13 

“Globals” Preservation (function() { "use strict"; var carX = 0; var carY = 0; var speed = 5; function loop() { carY += speed; draw(); } return { loop: loop, getVars: function() { return {carX: carX, carY: carY, speed: speed}; }, setVars: function(vars) { carX = vars.carX; carY = vars.carY; speed = vars.speed; } }; })(); Friday, 31 May 13 

Internal eval() Provide external (e.g. console) access to private state Friday, 31 May 13 

Internal eval() var car = {x: 20, y: 20} var lightState = “red-amber” function setup() { // ... } function loop() { // ... } Friday, 31 May 13 

Internal eval() (function() { "use strict"; var car = {x: 20, y: 20} var lightState = “red-amber” function setup() { // ... } function loop() { // ... } })(); Friday, 31 May 13 

Internal eval() (function() { "use strict"; var car = {x: 20, y: 20} var lightState = “red-amber” function setup() { // ... } function loop() { // ... } function evaluate(code) { return eval(code); } return { __eval__: evaluate } })(); Friday, 31 May 13 

Blueprints Augment a supplied object with user-code Friday, 31 May 13 

Blueprints // Inside engine var blueprint = new SystemBlueprint(); blueprint.id = oldSystem.id; blueprint.enabled = oldSystem.enabled; blueprint.update = function() { /* default impl */ } USERCODE = ‘(function(system) { // augment blueprint system.title = “foo”; system.update = function() { ... } })’; // Compile code systemBuilder = eval(USERCODE); systemBuilder(blueprint); // inspect user’s refinements to blueprint and // setup accordingly Friday, 31 May 13 

Snapshots Save and restore entire application state Friday, 31 May 13 

Snapshots system.snapshot = function() { return { entities: Object.keys(this.entities), lastShotTime: this.lastShotTime } } system.restore = function(snapshot) { var self = this; this.entities = {}; snapshot.entities.forEach(function(eid) { self.entities[eid] = self.world.getEntityById(eid); } this.lastShotTime = snapshot.lastShotTime; } Friday, 31 May 13 

Snapshots function updateSystem(registry, systemId, newSystem) { var existingSystem = registry.getSystemById(systemId); var snapshot = existingSystem.snapshot(); try { newSystem.restore(snapshot); registry.setSystem(systemId, newSystem); } catch (e) { // Incompatible snapshot - restart app? } } Friday, 31 May 13 

Clocksources Provide a consistent view of time when loading snapshots Friday, 31 May 13 

Clocksources Date.now() Friday, 31 May 13 

Clocksources Date.now() function Clock() { this.time = 0; this.lastDelta = null; } Clock.prototype.tick = function(delta) { this.time += delta; this.lastDelta = delta; } function tick() { var wallclockDelta = Date.now() - lastTick; clock.tick(wallclockDelta); } Friday, 31 May 13 

Escaping the Walled Garden Friday, 31 May 13 

Escaping the Walled Garden Friday, 31 May 13 

Escaping the Walled Garden Friday, 31 May 13 

Demo Time Friday, 31 May 13