The Politics of JavaScript

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 ==="

52c6174ba60557536f93809b4e95d97c?s=128

Angus Croll

May 02, 2013
Tweet

Transcript

  1. The Politics of JavaScript @angustweets

  2. None
  3. 1995-2004 The Anarchy Years

  4. None
  5. 2004-2006 The Revolution

  6. None
  7. 2007-2010 The Coming of Age

  8. None
  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

    :)
  22. None
  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
  29. None
  30. None
  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

  56. None
  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
  61. None
  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”
  76. None
  77. Fear is the Enemy of Creativity

  78. Ideology

  79. Ideology is mostly tribalism

  80. None
  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
  110. None
  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