The Politics of JavaScript

Presented at Web Directions Code, Melbourne, Australia
May 2nd 2013

NOTE for those who didn't see it live: "humble style guide" is a parody. I'm not hating on "new" and I'm certainly not advocating "always use ==="

Transcript

1. The Politics of JavaScript @angustweets
3. 1995-2004 The Anarchy Years
5. 2004-2006 The Revolution
7. 2007-2010 The Coming of Age
9. 2011-2013 The Itch
10. ; == “I’m not sure how our community got so religious and fact-disoriented, but it has got to stop” “I am sorry that, instead of educating you, the leaders in this language community have given you lies and fear.” “That is insanely stupid code. Fix it now. Learn to use semicolons”
11. Paternalism
12. “JavaScript is Hard”
13. We can either learn it...
14. ...or we can hide from it
15. “Please don’t do this” Every tech forum. Ever. “The subset I carved out is vastly superior to the language as a whole” Douglas Crockford - The Good Parts
16. Q: “Why avoid increment (++) and decrement (--) operators in JavaScript?”
17. A: “Part of me wonders if it has more to do with a lack of experience (perceived or actual) with javascript coders. I can see how someone just hacking away at some sample code could make an innocent mistake with ++ and --, but I don't see why an experienced professional would avoid them.”
18. Excessive constraint limits innovation
19. If you want preditcable, try Java...
20. ...or Canberra
21. because somebody once redefined undefined now we are all stupid :)
23. function(x) { if (typeof x === 'undefined') { return; } //... }
24. function(x) { if (x === undefined) { return; } //... }
25. function(x) { if (x == undefined) { return; } //... }
26. function(x) { if (x == null) { return; } //... }
27. “We need constraints because most people don't know JavaScript well”
28. “The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype”—JS Lint “hasOwnProperty [is] essential when iterating over the properties of any object ”—JS Garden
31. Don’t buy the code for the dumbest ideology, it negates our responsibility to educate ourseleves, and our team. It holds us back and holds the language back.
32. The Cult of Machines
33. The Traffic Light Paradox
34. Drachten, Netherlands 2000
35. Drachten, Netherlands 2001
36. Removed all traffic lights and signs from the town's centre Two years after the system was introduced, average travel times lowered significantly and yearly accidents were reduced from 8 to 1. Drachten, Netherlands 2000-2001
37. “Accidents, as well as congestion, are reduced when motorists show greater individual responsibility, rather than mentally switching off to behave like automata”
38. Case in Point...
39. function natcompare(a,b) { var ca, cb; while (true) { ca = a.charAt(ia++); cb = b.charAt(ib++); //(some zero checking goes here) if (ca == 0 && cb == 0) { //The strings compare the same. return 0; } if (ca < cb) {return -1;} if (ca > cb) {return +1;} } }
40. function natcompare(a,b) { var ca, cb; while (true) { ca = a.charAt(ia++); cb = b.charAt(ib++); //(some zero checking goes here) if (ca === 0 && cb === 0) { //The strings compare the same. return 0; } if (ca < cb) {return -1;} if (ca > cb) {return +1;} } }
41. function natcompare(a,b) { var ca, cb; while (true) { ca = a.charAt(ia++); cb = b.charAt(ib++); //(some zero checking goes here) if (ca === 0 && cb === 0) { //YOU ARE DOOMED!. return 0; } if (ca < cb) {return -1;} if (ca > cb) {return +1;} } }
42. Linters are great for catching trailing commas
43. But they suck at nuance
44. “Consistency is the hobgoblin of little minds” Ralph Waldo Emerson
45. JSPerfismo http://javascriptweblog.wordpress.com/2011/02/07/truth- equality-and-javascript/#comment-1872
46. Browsers are wise to repetitious benchmarking (e.g. split) You’re better off profiling your real life app JSPerf is fun, but remember...
47. The more you automate your JavaScript code, the more soul destroying it gets...
48. GWT is to so that
49. is to as
50. It’s a bit like automatic transmission
51. You won’t crunch the gears and you won’t crash the car...
52. but you sacrifice control
53. machines and bad programmers lack nuance
54. use both with caution
55. Fearmongering
57. Fearmongers assume the worst of everyone
58. Fearmongers assume we are all idiots
59. Stop worrying about hypothetical developers overwriting undefined, hasOwnProperty etc.
60. These are petty pseudo-contingencies Anyone could override Object.prototype and we’d all be screwed Work with people and libraries that you respect
62. ES 5 Function.prototype.bind ES 5 String.prototype.trim
63. “Always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live.” - Jeff Attwood
64. This is terrible advice.
65. Good code doesn’t walk on eggshells Good code requires knowledge of your language and respect for your team Good code is bold
66. JavaScriptophobia
67. How “JavaScript is sooo simple” became “JavaScript is sooo hard”...
68. (weird shit) JAVA!! But Easier!! (Deceptively Familiar Syntax) (weird shit) WTF?
69. Transpilers to the Rescue! github.com/jashkenas/coffee-script/wiki/ List-of-languages-that-compile-to-JS
70. Syntax Transpilers CoffeeScript Superset Transpilers TypeScript Caja ES X Transpilers JavaScripty Transpilers
71. JavaScripty Transpilers convert syntax Little or no signal loss
72. GWT (Java) Dart (Dart) ClojureScript (Clojure) UnJavaScripty Transpilers Opal (Ruby) Pyjs (Python) Perlito (Perl) Script# (C#) scheme2js (Scheme) ghcjs (Haskell) Amber (Smalltalk) Go2js (Go) j2js (Java) rb2js (Ruby) rb2js (Ruby) Skuplt (Python) Java2Script (Java) FunScript (F#) JScriptSuite (.NET) ParenScript (Lisp) Clue (C) NS Basic (Basic) dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd dash sjakhd
73. UnJavaScripty Transpilers convert semantics Significant signal loss...
74. “The dog ate my semicolons”
75. “The dog ate my semicolons” “The dog ate my commas” “Le chien a mangé mes virgules”
77. Fear is the Enemy of Creativity
78. Ideology
79. Ideology is mostly tribalism
81. Almost any ideological position has an opposite position which is equally valid
82. “The Oxford Comma is essential” “She lives with her two children, a cat and a dog.”
83. “The Oxford Comma is rubbish” “Through the window she saw George, a policeman, and several onlookers”
84. “Comma first prevents trailing commas”
85. //comma last var thing = { veni, vidi, vici }
86. //comma last var thing = { veni, vidi, }
87. //comma last var thing = { veni, vidi, }
88. //comma first var thing = { veni ,vidi ,vici }
89. //comma first var thing = { veni ,vidi }
90. //comma first var thing = { veni ,vidi }
91. But, “comma last prevents leading commas”
92. //comma last var thing = { veni, vidi, vici }
93. //comma last var thing = { vidi, vici }
94. //comma last var thing = { vidi, vici }
95. //comma first var thing = { veni ,vidi ,vici }
96. //comma first var thing = { ,vidi ,vici }
97. //comma first var thing = { ,vidi ,vici }
98. Sayre’s Law “In any dispute the intensity of feeling is inversely proportional to the value of the issues at stake.” Charles Phillip Issawi, 1973
99. Thus, Semicolons... 281 comments later... github.com/twitter/bootstrap/issues/3057
100. Absolutism
101. Dichotomy is attractive, a simple choice between right and wrong.
102. The One True Way! JavaScript vs CoffeeScript OOP vs Functional Callbacks vs Promises comma-first vs comma-last
103. But JavaScript is not science. We’re all just muddling along.
104. My Humble Style Guide 1. Use Brackets In Conditionals 2. Line Break after Function Signature 3. Space after //
105. My Humble Style Guide 1. Use Brackets In Conditionals 2. Line Break after Function Signature 3. Space after // 4. ALWAYS use === 5. NEVER parseInt without a radix arg 6. You SUCK if you use new Attn. Slide Viewers: this is a parody!! Text
106. Guidelines mistaken for rules...
107. “No Globals Ever” Globals are a feature too Use with caution
108. “Always use feature detection” Feature detect Object.defineProperty? In IE 8? Really?
109. Each time we claim an absolute, some other technique is discarded from the toolbelt
111. Would you buy “airplane controls, the good parts”?
112. Hope
113. "There are indeed many ways to do the same thing in JS. That's one of the beauties of the language" - Peter van der Zee
114. Learn one way and fight your corner... ...or learn them all and be informed.
115. This doesn’t make good coders
116. This doesn’t make good coders You can’t legislate against bad code
117. This makes good coders* (*Thanks David Nolen)
118. We can rise above the fearmongers, the ideologues and the absolutists... 1) Master the fundamentals: this, prototypes, coercion and scoping 2) Experiment, Play, Have Fun and Keep an Open Mind.
119. The End @angustweets
120. code credits natural order comparator Copyright (C) 2005 by SCK-CEN (Belgian Nucleair Research Centre) Copyright (C) 2003 by Pierre-Luc Paour <natorder@paour.com> Copyright (C) 2000 by Martin Pool <mbp@humbug.org.au>
121. photo credits JUDGES: http://fitsnews.files.wordpress.com/2007/05/group-of-judges.jpg MODERN TIMES: http://www.doctormacro.com/Images/Chaplin,%20Charlie/ Annex/Annex%20-%20Chaplin,%20Charlie%20(Modern%20Times)_01.jpg DRACHTEN BEFORE: http://assets.knowledge.allianz.com/img/ before_laweiplein_drachten_ah_51281.jpg DRACHTEN AFTER: http://cameronwatson.co.nz/wp-content/uploads/ 2013/03/Drachten.png DICK CHENEY: http://scrapetv.com/News/News%20Pages/Politics/images-4/ cheney-evil.jpg AUTO GEAR: http://www.csa.com/discoveryguides/auto/images/res3.jpg MANUAL GEAR: http://media-social.s-msn.com/images/blogs/ 00100065-0000-0000-0000-000000000000_00000065-06d9-0000-0000-0000 00000000_20120607230629_HighGlossBlackGearShiftKnob_867.jpeg FOOD PILL: http://2.bp.blogspot.com/-411Q8hsbXjk/T0K2gN55L-I/ AAAAAAAAEQc/M2LXaIfMCxw/s1600/pill+on+a+plate.jpg FRIES: http://www.bubblews.com/assets/images/news/ 1646144206_1356758521.jpg TOOLBELT: http://image.made-in-china.com/2f0j00nMhElzuKnBrs/Double- Pouch-Tool-Belt.jpg COCKPIT: http://etc.usf.edu/clippix/pix/airplane-controls_medium.jpg NELSON MANDELA: http://theelders.org/sites/default/files/imagecache/ full_width_940x430/nelson-mandela-un-600px.jpg CHEETAHS: http://img.thesun.co.uk/multimedia/archive/01511/ WILD-532_1511437a.jpg