Khan AcademyComputer Science     John Resig (ejohn.org)   http://khanacademy.org/cs
Inspiration• Bret Victor • http://vimeo.com/36579366
Learning to Program• Learn through hands-on experimentation• Learn by looking at other people’s code• Learn by building on...
CS Projects                    “Forked”     New• “Forked”: 62930• New: 22225                    26%• 1.86m Views          ...
Github in Disguise• Forking (Hitting “Save as...”)• Versioning (Not yet user exposed)• Runtime Versioning • All runtime ch...
Implementation• Graphics: Processing.js• Real-time Execution • Dynamic Injection • Error handling
Graphics• Use Processing.js’ API• Works in all browsers with <canvas>• Import it wholesale, ignore the “Processing  langua...
Real-Time Execution• Code is constantly checked for changes• If a change is detected, code is re-evaluated• Code is not ru...
How Code is Injected•   JSHint (run in worker thread)    •   Optionally run BabyHint    •   If Error, stop execution•   Ca...
Error Messages• All code is run through JSHint• And through an extra layer of error  handling (called “BabyHint”)
JSHint• Validation!• Also: Gives us a list of all global variables  used in the program• Compare against a master list of ...
BabyHint•   Handles common mistakes:    •   Spelling and case: “strokeWeight” vs.        “strokeweight”    •   Gives sane ...
Worker Threads• Run JavaScript code asynchronously in the  background of a page• Available in Chrome, Firefox, Safari, and...
With Statements• var obj = { name: “John”, city: “Boston” };  with (obj) {    name += “ Resig”;    city = “Brooklyn”;  }• ...
With Statements• var obj = { name: “John”, city: “Boston” };  with (obj) {    var city = “Brooklyn”;    var job = “Khan Ac...
With Statements• var obj = { name: “John”, city: “Boston” };  obj.job = undefined;  with (obj) {    var city = “Brooklyn”; ...
Example•   var x = 5, y = 1;    var draw = function() {       x += y;    };•   JSHint: PASS•   Long Run Detection: PASS•  ...
Example (cont.)•   var x = 50, y = 1;    var draw = function() {       x += y;    };•   JSHint: PASS•   Long Run Detection...
Example (cont.)•   var x = 50, y = 1;    var draw = function() {       x += y * 2;    };•   JSHint: PASS•   Long Run Detec...
Upcoming SlideShare
Loading in...5
×

Khan Academy Computer Science

17,347

Published on

A talk on Khan Academy's Computer Science curriculum.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
17,347
On Slideshare
0
From Embeds
0
Number of Embeds
70
Actions
Shares
0
Downloads
53
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Khan Academy Computer Science

  1. 1. Khan AcademyComputer Science John Resig (ejohn.org) http://khanacademy.org/cs
  2. 2. Inspiration• Bret Victor • http://vimeo.com/36579366
  3. 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. 4. CS Projects “Forked” New• “Forked”: 62930• New: 22225 26%• 1.86m Views 74%
  5. 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. 6. Implementation• Graphics: Processing.js• Real-time Execution • Dynamic Injection • Error handling
  7. 7. Graphics• Use Processing.js’ API• Works in all browsers with <canvas>• Import it wholesale, ignore the “Processing language” bits
  8. 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. 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. 10. Error Messages• All code is run through JSHint• And through an extra layer of error handling (called “BabyHint”)
  11. 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. 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. 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. 14. With Statements• var obj = { name: “John”, city: “Boston” }; with (obj) { name += “ Resig”; city = “Brooklyn”; }• obj.name === “John Resig” obj.city === “Brooklyn”
  15. 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. 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. 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. 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. 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; };”
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×