1. Khan Academy
Computer Science
John Resig (ejohn.org)
http://khanacademy.org/cs

2. Inspiration
• Bret Victor
• http://vimeo.com/36579366

3. Learning to Program
• Learn through hands-on experimentation
• Learn by looking at other people’s code
• Learn by building on other people’s code

4. CS Projects
“Forked” New
• “Forked”: 62930
• New: 22225
26%
• 1.86m Views 74%

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

6. Implementation
• Graphics: Processing.js
• Real-time Execution
• Dynamic Injection
• Error handling

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; };”