Making JS More Learnable

Transcript

1. Making JS More Learnable pamela fox @pamelafox pamelafox.org Monday, December 2, 13
2. When did you learn JS? SURVEY! Monday, December 2, 13
3. The Path of Learning JS variables loops arrays objects prototype mix-ins libraries DOM futures generators closures Beginner Expert with Monday, December 2, 13
4. Should more people learn JS? Monday, December 2, 13
5. The Ubiquity of JS Monday, December 2, 13
6. The Ubiquity of JS web server hardware mobile games Monday, December 2, 13
7. Learning JavaScript is Hard Monday, December 2, 13
8. How do I know? Online The “Real” World Monday, December 2, 13
9. Teaching JS Online ACE editor + processingJS Talk-throughs Coding Challenges http://khanacademy.org/cs Monday, December 2, 13
10. Teaching JS IRL http://teaching-materials.org Monday, December 2, 13
11. I’m surrounded by JS learners! 162,858 challenges completed 300,000 unique programs created 2,600 Members 105 workshops in 2 years Monday, December 2, 13
12. Let’s Make JS Easier to Learn! Language Design → Debugging → Documentation Monday, December 2, 13
13. Language Design Monday, December 2, 13
14. Language Usability Research http://www.cs.cmu.edu/~pane/cmu-cs-96-132.html (A sampling!) •Variables in math very different from programming variables •Booleans different from natural language (e.g. inclusive-or vs. exclusive-or) •Arrays start at 0, people usually count from 1 •Variable names and keywords are case sensitive •= is often confused with == •123 is confused with “123” •Some variables are passed by reference, other by value •Having to put “break” in every switch statement causes errors •Unnecessary syntax: a++ and a+=1 http://www.cs.cmu.edu/~NatProg/OldMarch162007/langeval.html https://docs.google.com/document/d/1X_V5b0E4qKeSViZcTvpurLb67NfR5GzTUvnh2zZiaWg/edit?usp=sharing Usability issues for novice programmers: Monday, December 2, 13
15. Language Usability Inconsistency with External Knowledge Monday, December 2, 13
16. Language Usability Inconsistent syntax Monday, December 2, 13
17. Language Usability Non-intuitive syntax Monday, December 2, 13
18. Language Usability Unnecessary syntax (Less is More) Monday, December 2, 13
19. JS Language Usability? • All of those issues were inherited from other languages • JS usability itself is not well researched :-( http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.133.4831&rep=rep1&type=pdf Monday, December 2, 13
20. (How you can) Improve the language http://www.ecmascript.org/dev.php “Development of ECMAScript standards is an open process, and we encourage public participation.” Monday, December 2, 13
21. Debugging Monday, December 2, 13
22. JS “IDE”s? Monday, December 2, 13
23. JSHint Plugins https://github.com/SublimeLinter/SublimeLinter https://github.com/sleistner/vim-jshint http://cavewall.jaguardesignstudio.com/2011/11/11/using-jshint-to-improve-javascript-code-quality/ http://rondevera.github.io/jslintmate/ https://github.com/daleharvey/jshint-mode Monday, December 2, 13
24. JSHint in online tools repl.it jsbin.com Monday, December 2, 13
25. JSHint on Khan Academy if (i == 0) { } var i = 2; if (i == 0) { } errors warnings best practices var myName = “spaghetti Monday, December 2, 13
26. Improving JSHint messages rect(193,139,,30); Expected an identifier and instead saw ','. I thought you were going to type an identifier but you typed ‘,’! I think you meant to type a value or variable name before that comma? Original Conversational Specific + Actionable Monday, December 2, 13
27. rect(80, 70, 60, 240,); I thought you were going to type an identifier but you typed )! → I think you either have an extra comma or a missing argument? var x = 5; x+x=1; Bad assignment! → The left side of an assignment must be a single variable name, not an expression. 140= 141 + 142; Bad assignment! text;() I thought you were going to type an assignment or function call but you typed an expression instead! More Newbie Syntax Errros Monday, December 2, 13
28. (How you can) Improve JSHint https://github.com/jshint/jshint/blob/2.x/src/messages.js •Improve messages •Add more specific messages •Translate messages Monday, December 2, 13
29. More linting: “BabyHint” elipse(10, 10, 20, 30); spelling wrong arguments ellipse(1, 1, 20, 30, 5); https://gist.github.com/pamelafox/7745401 Monday, December 2, 13
30. (How you can) Improve Linters https://github.com/nzakas/eslint Add babyhint functionality to JSHint or ESLint? Monday, December 2, 13
31. The Browser “IDE” Monday, December 2, 13
32. The Browser “IDE” Why is hplogo a global var?? What does undefined mean?? But I used the right method?! Monday, December 2, 13
33. Improving the Browser IDE http://anton.kovalyov.net/p/js-typos/ Monday, December 2, 13
34. (How you can) Improve Browsers http://www.chromium.org/developers http://codefirefox.org/ Patch the browser itself Make a dev tool plugin http://developer.chrome.com/extensions/devtools.html http://blog.mozilla.org/addons/2009/01/28/how-to-develop-a-firefox-extension/ Write a blog post Monday, December 2, 13
35. Documentation Monday, December 2, 13
36. Where are the JS docs? Monday, December 2, 13
37. (How you can) Improve the docs Mozilla Developer Network Just click “Edit” W3schools Click “Report Error” Monday, December 2, 13
38. Let’s Make JS Easier to Learn! Language Design → Debugging → Documentation Monday, December 2, 13
39. Monday, December 2, 13