Slide 1

Slide 1 text

The Politics of JavaScript @angustweets

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

1995-2004 The Anarchy Years

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

2004-2006 The Revolution

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

2007-2010 The Coming of Age

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

2011-2013 The Itch

Slide 10

Slide 10 text

; == “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”

Slide 11

Slide 11 text

Paternalism

Slide 12

Slide 12 text

“JavaScript is Hard”

Slide 13

Slide 13 text

We can either learn it...

Slide 14

Slide 14 text

...or we can hide from it

Slide 15

Slide 15 text

“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

Slide 16

Slide 16 text

Q: “Why avoid increment (++) and decrement (--) operators in JavaScript?”

Slide 17

Slide 17 text

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.”

Slide 18

Slide 18 text

Excessive constraint limits innovation

Slide 19

Slide 19 text

If you want preditcable, try Java...

Slide 20

Slide 20 text

...or Canberra

Slide 21

Slide 21 text

because somebody once redefined undefined now we are all stupid :)

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

function(x) { if (typeof x === 'undefined') { return; } //... }

Slide 24

Slide 24 text

function(x) { if (x === undefined) { return; } //... }

Slide 25

Slide 25 text

function(x) { if (x == undefined) { return; } //... }

Slide 26

Slide 26 text

function(x) { if (x == null) { return; } //... }

Slide 27

Slide 27 text

“We need constraints because most people don't know JavaScript well”

Slide 28

Slide 28 text

“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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

The Cult of Machines

Slide 33

Slide 33 text

The Traffic Light Paradox

Slide 34

Slide 34 text

Drachten, Netherlands 2000

Slide 35

Slide 35 text

Drachten, Netherlands 2001

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

“Accidents, as well as congestion, are reduced when motorists show greater individual responsibility, rather than mentally switching off to behave like automata”

Slide 38

Slide 38 text

Case in Point...

Slide 39

Slide 39 text

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;} } }

Slide 40

Slide 40 text

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;} } }

Slide 41

Slide 41 text

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;} } }

Slide 42

Slide 42 text

Linters are great for catching trailing commas

Slide 43

Slide 43 text

But they suck at nuance

Slide 44

Slide 44 text

“Consistency is the hobgoblin of little minds” Ralph Waldo Emerson

Slide 45

Slide 45 text

JSPerfismo http://javascriptweblog.wordpress.com/2011/02/07/truth- equality-and-javascript/#comment-1872

Slide 46

Slide 46 text

Browsers are wise to repetitious benchmarking (e.g. split) You’re better off profiling your real life app JSPerf is fun, but remember...

Slide 47

Slide 47 text

The more you automate your JavaScript code, the more soul destroying it gets...

Slide 48

Slide 48 text

GWT is to so that

Slide 49

Slide 49 text

is to as

Slide 50

Slide 50 text

It’s a bit like automatic transmission

Slide 51

Slide 51 text

You won’t crunch the gears and you won’t crash the car...

Slide 52

Slide 52 text

but you sacrifice control

Slide 53

Slide 53 text

machines and bad programmers lack nuance

Slide 54

Slide 54 text

use both with caution

Slide 55

Slide 55 text

Fearmongering

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Fearmongers assume the worst of everyone

Slide 58

Slide 58 text

Fearmongers assume we are all idiots

Slide 59

Slide 59 text

Stop worrying about hypothetical developers overwriting undefined, hasOwnProperty etc.

Slide 60

Slide 60 text

These are petty pseudo-contingencies Anyone could override Object.prototype and we’d all be screwed Work with people and libraries that you respect

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

ES 5 Function.prototype.bind ES 5 String.prototype.trim

Slide 63

Slide 63 text

“Always code as if the person who ends up maintaining your code is a violent psychopath who knows where you live.” - Jeff Attwood

Slide 64

Slide 64 text

This is terrible advice.

Slide 65

Slide 65 text

Good code doesn’t walk on eggshells Good code requires knowledge of your language and respect for your team Good code is bold

Slide 66

Slide 66 text

JavaScriptophobia

Slide 67

Slide 67 text

How “JavaScript is sooo simple” became “JavaScript is sooo hard”...

Slide 68

Slide 68 text

(weird shit) JAVA!! But Easier!! (Deceptively Familiar Syntax) (weird shit) WTF?

Slide 69

Slide 69 text

Transpilers to the Rescue! github.com/jashkenas/coffee-script/wiki/ List-of-languages-that-compile-to-JS

Slide 70

Slide 70 text

Syntax Transpilers CoffeeScript Superset Transpilers TypeScript Caja ES X Transpilers JavaScripty Transpilers

Slide 71

Slide 71 text

JavaScripty Transpilers convert syntax Little or no signal loss

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

UnJavaScripty Transpilers convert semantics Significant signal loss...

Slide 74

Slide 74 text

“The dog ate my semicolons”

Slide 75

Slide 75 text

“The dog ate my semicolons” “The dog ate my commas” “Le chien a mangé mes virgules”

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

Fear is the Enemy of Creativity

Slide 78

Slide 78 text

Ideology

Slide 79

Slide 79 text

Ideology is mostly tribalism

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

Almost any ideological position has an opposite position which is equally valid

Slide 82

Slide 82 text

“The Oxford Comma is essential” “She lives with her two children, a cat and a dog.”

Slide 83

Slide 83 text

“The Oxford Comma is rubbish” “Through the window she saw George, a policeman, and several onlookers”

Slide 84

Slide 84 text

“Comma first prevents trailing commas”

Slide 85

Slide 85 text

//comma last var thing = { veni, vidi, vici }

Slide 86

Slide 86 text

//comma last var thing = { veni, vidi, }

Slide 87

Slide 87 text

//comma last var thing = { veni, vidi, }

Slide 88

Slide 88 text

//comma first var thing = { veni ,vidi ,vici }

Slide 89

Slide 89 text

//comma first var thing = { veni ,vidi }

Slide 90

Slide 90 text

//comma first var thing = { veni ,vidi }

Slide 91

Slide 91 text

But, “comma last prevents leading commas”

Slide 92

Slide 92 text

//comma last var thing = { veni, vidi, vici }

Slide 93

Slide 93 text

//comma last var thing = { vidi, vici }

Slide 94

Slide 94 text

//comma last var thing = { vidi, vici }

Slide 95

Slide 95 text

//comma first var thing = { veni ,vidi ,vici }

Slide 96

Slide 96 text

//comma first var thing = { ,vidi ,vici }

Slide 97

Slide 97 text

//comma first var thing = { ,vidi ,vici }

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

Thus, Semicolons... 281 comments later... github.com/twitter/bootstrap/issues/3057

Slide 100

Slide 100 text

Absolutism

Slide 101

Slide 101 text

Dichotomy is attractive, a simple choice between right and wrong.

Slide 102

Slide 102 text

The One True Way! JavaScript vs CoffeeScript OOP vs Functional Callbacks vs Promises comma-first vs comma-last

Slide 103

Slide 103 text

But JavaScript is not science. We’re all just muddling along.

Slide 104

Slide 104 text

My Humble Style Guide 1. Use Brackets In Conditionals 2. Line Break after Function Signature 3. Space after //

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

Guidelines mistaken for rules...

Slide 107

Slide 107 text

“No Globals Ever” Globals are a feature too Use with caution

Slide 108

Slide 108 text

“Always use feature detection” Feature detect Object.defineProperty? In IE 8? Really?

Slide 109

Slide 109 text

Each time we claim an absolute, some other technique is discarded from the toolbelt

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

Would you buy “airplane controls, the good parts”?

Slide 112

Slide 112 text

Hope

Slide 113

Slide 113 text

"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

Slide 114

Slide 114 text

Learn one way and fight your corner... ...or learn them all and be informed.

Slide 115

Slide 115 text

This doesn’t make good coders

Slide 116

Slide 116 text

This doesn’t make good coders You can’t legislate against bad code

Slide 117

Slide 117 text

This makes good coders* (*Thanks David Nolen)

Slide 118

Slide 118 text

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.

Slide 119

Slide 119 text

The End @angustweets

Slide 120

Slide 120 text

code credits natural order comparator Copyright (C) 2005 by SCK-CEN (Belgian Nucleair Research Centre) Copyright (C) 2003 by Pierre-Luc Paour Copyright (C) 2000 by Martin Pool

Slide 121

Slide 121 text

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