5. Github in Disguise
• Forking (Hitting “Save as...”)
• Versioning (Not yet user exposed)
• Runtime Versioning
• All runtime changes are versioned to
protect against API changes
7. Graphics
• Use Processing.js’ API
• Works in all browsers with <canvas>
• Import it wholesale, ignore the “Processing
language” bits
8. Real-Time Execution
• Code is constantly checked for changes
• If a change is detected, code is re-evaluated
• Code is not run using a simple “eval”, code
is dynamically injected into the current
runtime.
9. How Code is Injected
• JSHint (run in worker thread)
• Optionally run BabyHint
• If Error, stop execution
• Cache Images
• Run Code in Worker Thread, Looking for long-running code
• If error, stop execution
• Execute Code
• If first time running code, just eval
• If later:
• Eval code and extract current state
• Inject extracted values into runtime
• Maintain closures with functions!
10. Error Messages
• All code is run through JSHint
• And through an extra layer of error
handling (called “BabyHint”)
11. JSHint
• Validation!
• Also: Gives us a list of all global variables
used in the program
• Compare against a master list of properties
in Processing.js
• Everything else is user-defined!
12. BabyHint
• Handles common mistakes:
• Spelling and case: “strokeWeight” vs.
“strokeweight”
• Gives sane errors about missing semicolons
• Provide hints about correct function arguments
strokeWeight(); (gives an error asking for more
args)
• Check for function declaration mistakes and
possible spacing mistakes (“vartest”)
13. Worker Threads
• Run JavaScript code asynchronously in the
background of a page
• Available in Chrome, Firefox, Safari, and IE
10 (Need to make sure it works in IE 9!)
• Works by doing a string-only postMessage
to the worker and waiting for a response
14. With Statements
• var obj = { name: “John”, city: “Boston” };
with (obj) {
name += “ Resig”;
city = “Brooklyn”;
}
• obj.name === “John Resig”
obj.city === “Brooklyn”
15. With Statements
• var obj = { name: “John”, city: “Boston” };
with (obj) {
var city = “Brooklyn”;
var job = “Khan Academy”;
}
• obj.city === “Brooklyn”
obj.job === undefined
16. With Statements
• var obj = { name: “John”, city: “Boston” };
obj.job = undefined;
with (obj) {
var city = “Brooklyn”;
var job = “Khan Academy”;
}
• obj.city === “Brooklyn”
obj.job === “Khan Academy”
17. Example
• var x = 5, y = 1;
var draw = function() {
x += y;
};
• JSHint: PASS
• Long Run Detection: PASS
• First Run: True
• Code is evaluated
• lastGrab = {
x: “5”,
y: “1”,
draw: “function() { x += y; }”
}
18. Example (cont.)
• var x = 50, y = 1;
var draw = function() {
x += y;
};
• JSHint: PASS
• Long Run Detection: PASS
• First Run: False
• Code is evaluated
• grabAll = {
x: “50”,
y: “1”,
draw: “function() { x += y; }”
}
• Compare with lastGrab: grabAll.x !== lastGrab.x
• Eval: “var x = 50;”
19. Example (cont.)
• var x = 50, y = 1;
var draw = function() {
x += y * 2;
};
• JSHint: PASS
• Long Run Detection: PASS
• First Run: False
• Code is evaluated
• grabAll = {
x: “50”,
y: “1”,
draw: “function() { x += y * 2; }”
}
• Compare with lastGrab: grabAll.draw !== lastGrab.draw
• Eval: “var draw = function() { x += y * 2; };”