Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Khan Academy Computer Science

21,009 views

Published on

A talk on Khan Academy's Computer Science curriculum.

Published in: Technology
  • Be the first to comment

Khan Academy Computer Science

  1. Khan AcademyComputer 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; };”

×