Khan Academy Computer Science
9 likes14,436 views
Khan Academy provides a computer science education platform where students can learn programming through hands-on experimentation and by viewing other students' code. The site allows code to be "forked" from other students and versioned. Code is executed in real-time using Processing.js for graphics and by dynamically injecting code into the runtime to handle changes rather than simply re-evaluating it. Errors are handled through JSHint validation and additional "BabyHint" error handling.
Khan Academy Computer Science
- 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; };”