Tweet
Tweet

Slide 1

Slide 1 text

@angustweets STOP BEING PERFE T C

Slide 2

Slide 2 text

I’m British but I live in America I work at Twitter (used by twitter.com, tweetdeck, airbnb, beats music etc.) I co-wrote Flight

Slide 3

Slide 3 text

and I’m writing a Book...

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

The 5 steps to JavaScript Perfectionism

Slide 6

Slide 6 text

1. Discovery

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

2. Consternation

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

3. Despair

Slide 11

Slide 11 text

JavaScript developer JavaScript

Slide 12

Slide 12 text

4. The Shining Knight

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

5. The JavaScript Police™

Slide 15

Slide 15 text

http://stackoverflow.com/questions/3959211/fast-factorial-function-in-javascript

Slide 16

Slide 16 text

So why do we need imperfection?

Slide 17

Slide 17 text

1. Technology thrives on Open Minds

Slide 18

Slide 18 text

Jed Schmidt has an open mind

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Web Rebels 2014

Slide 21

Slide 21 text

‘Oslo’ === ‘Oslo’; //true new String(‘Oslo’) === new String(‘Oslo’); //false Objects have identity, primitives don’t

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

(picture) 2. Context > Dogma

Slide 24

Slide 24 text

-Classical Inheritance-

Slide 25

Slide 25 text

var Widget = function(color) { this.color = color; }; Widget.prototype.render = function() { console.log('render...', 'width:', this.width, 'height:', this.height, 'color:', this.color); } var Button = function(width, height, cb, label, color) { this.width = width; this.height = height; this.cb = cb; this.label = label; Widget.call(this, color); }; Button.prototype = new Widget(); Button.prototype.constructor = Button; Button.prototype.initialize = function() { console.log('init...', 'onclick:', this.cb, 'label:', this.label); }; var b = new Button(20, 30, alert, 'hello', 'blue') b.initialize(); b.render();

Slide 26

Slide 26 text

This is why people hate JavaScript

Slide 27

Slide 27 text

But wait...

Slide 28

Slide 28 text

var widget = { render : function() { console.log('render...', 'width:', this.width, 'height:', this.height, 'color:', this.color); } } var button = { initialize: function() { console.log('init...', 'onclick:', this.cb, 'label:', this.label); widget.render.call(this); } } var myButton = { width:20, height:30, cb:alert, label:'hello', color:'blue'}; button.initialize.call(myButton);

Slide 29

Slide 29 text

var widget = { render : function() { console.log('render...', 'width:', this.width, 'height:', this.height, 'color:', this.color); } } var button = { initialize: function() { console.log('init...', 'onclick:', this.cb, 'label:', this.label); widget.render.call(this); } } var myButton = { width:20, height:30, cb:alert, label:'hello', color:'blue'}; button.initialize.call(myButton);

Slide 30

Slide 30 text

or just forget OO entirely

Slide 31

Slide 31 text

var widget = { render : function(width, height, color) { console.log('render...', 'width:', width, 'height:', height, 'color:', color); } } var button = { initialize: function(cb, label, width, height, color) { console.log('init...', 'onclick:', cb, 'label:', label); widget.render(width, height, color); } } button.initialize(20, 30, alert, 'hello', 'blue');

Slide 32

Slide 32 text

var widget = { render : function(width, height, color) { console.log('render...', 'width:', width, 'height:', height, 'color:', color); } } var button = { initialize: function(cb, label, width, height, color) { console.log('init...', 'onclick:', cb, 'label:', label); widget.render(width, height, color); } } button.initialize(20, 30, alert, 'hello', 'blue');

Slide 33

Slide 33 text

-hasOwnProperty-

Slide 34

Slide 34 text

“Only hasOwnProperty will give the correct and expected result; this is essential when iterating over the properties of any object” —JavaScript Garden

Slide 35

Slide 35 text

var obj = Object.create(null); obj.a = 3; obj.b = 5; for (var p in obj) { if (obj.hasOwnProperty(p)) { console.log(obj[p]); } }

Slide 36

Slide 36 text

var obj = Object.create(null); obj.a = 3; obj.b = 5; for (var p in obj) { if (obj.hasOwnProperty(p)) { console.log(obj[p]); } }

Slide 37

Slide 37 text

var obj = Object.create(null); obj.a = 3; obj.b = 5; for (var p in obj) { if (obj.hasOwnProperty(p)) { console.log(obj[p]); } } TypeError: [Object Object] has no method hasOwnProperty

Slide 38

Slide 38 text

-Array constructor-

Slide 39

Slide 39 text

[] or new Array?

Slide 40

Slide 40 text

Google Style Guide google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml? showone=Array_and_Object_literals#Array_and_Object_literals

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Google Developer Day V8 Performance Tuning Tricks https://mkw.st/p/gdd11-berlin-v8-performance-tuning-tricks/#44

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

more importantly you can write neat functions like...

Slide 45

Slide 45 text

//From prototype.js extension of //String.prototype function times(count) { return count < 1 ? '' : new Array(count + 1).join(this); } 'me'.times(10); //"memememememememememe"

Slide 46

Slide 46 text

and...

Slide 47

Slide 47 text

function range(max) { return Array.apply(0,Array(max)).map(function(e,i){ return i+1; }) } range(10); //[1,2,3,4,5,6,7,8,9,10]

Slide 48

Slide 48 text

-equality-

Slide 49

Slide 49 text

“Always use === and !==” - Douglas Crockford, The Good Parts

Slide 50

Slide 50 text

if (x == null) //is exactly equivalent to... if (x === null || x === undefined)

Slide 51

Slide 51 text

if (typeof x == “function”)

Slide 52

Slide 52 text

-with-

Slide 53

Slide 53 text

//using Ramanujan's approximation function factorial(n){ var r = Math.sqrt(Math.PI)*Math.pow(n/Math.E,n); r *= Math.pow(8*Math.pow(n, 3) + 4*(n*n) + n + 1/30, 1/6); return r; }

Slide 54

Slide 54 text

//using Ramanujan's approximation function factorial(n){ var r = Math.sqrt(Math.PI)*Math.pow(n/Math.E,n); r *= Math.pow(8*Math.pow(n, 3) + 4*(n*n) + n + 1/30, 1/6); return r; }

Slide 55

Slide 55 text

//using Ramanujan's approximation function factorial(n){ with(Math) { var r = sqrt(PI)*pow(n/E,n); r *= pow(8*pow(n, 3) + 4*(n*n) + n + 1/30, 1/6); return r; } }

Slide 56

Slide 56 text

//using Ramanujan's approximation function factorial(n){ with(Math) { var r = sqrt(PI)*pow(n/E,n); r *= pow(8*pow(n, 3) + 4*(n*n) + n + 1/30, 1/6); return r; } }

Slide 57

Slide 57 text

with as equivalent to let

Slide 58

Slide 58 text

apparently this is our worst nightmare...

Slide 59

Slide 59 text

var addHandlers = function(nodes) { for (var i = 0; i < nodes.length; i++) { nodes[i].onclick = function(e) {alert(i);} } };

Slide 60

Slide 60 text

you could wrap it in function scope...

Slide 61

Slide 61 text

var addHandlers = function(nodes) { for (var i = 0; i < nodes.length; i++) { nodes[i].onclick = function(i) { return function(e) {alert(i)}; }(i); } };

Slide 62

Slide 62 text

or use with (safely)

Slide 63

Slide 63 text

var addHandlers = function(nodes) { for (var i = 0; i < nodes.length; i++) { with ({i:i}) { nodes[i].onclick = function(e) {alert(i)} } } };

Slide 64

Slide 64 text

-comma operator-

Slide 65

Slide 65 text

“but it’s really complicated”

Slide 66

Slide 66 text

doThis(), doThat(); 1) do this 2) then do that

Slide 67

Slide 67 text

lets you do two things when JavaScript expects one

Slide 68

Slide 68 text

var addHandlers = function(nodes) { for (var i = 0; i < nodes.length; i++) { nodes[i].onclick = function(e) {alert(i);} } };

Slide 69

Slide 69 text

var addHandlers = function(nodes) { for (var i = 0; i < nodes.length; console.log(i),i++) { nodes[i].onclick = function(e) {alert(i);} } };

Slide 70

Slide 70 text

var addHandlers = function(nodes) { for (var i = 0; i < nodes.length; console.log(i),i++) { nodes[i].onclick = function(e) {alert(i);} } };

Slide 71

Slide 71 text

another example

Slide 72

Slide 72 text

function getRandomPrime() { while(n = Math.round(Math.random()*1000), !isPrime(n)); return n; }

Slide 73

Slide 73 text

make eval run globally

Slide 74

Slide 74 text

(function() { var localStorage = "bwahahahaha!" return eval("localStorage") })(); //"bwahahahaha!"

Slide 75

Slide 75 text

(function() { var localStorage = "bwahahahaha!" return (0,eval)("localStorage") })(); //"Storage {length: 0}"

Slide 76

Slide 76 text

//see http://perfectionkills.com/global-eval-what- are-the-options/ by Kangax (function() { var localStorage = "bwahahahaha!" return (0,eval)("localStorage") })(); //"Storage {length: 0}"

Slide 77

Slide 77 text

Thanks Comma Operator!!! , Really it was Nothing!

Slide 78

Slide 78 text

functional programming

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

functional programming

Slide 81

Slide 81 text

functional programming languages

Slide 82

Slide 82 text

JavaScript is not a functional language But it has functional idioms

Slide 83

Slide 83 text

function passing higher order functions function composition

Slide 84

Slide 84 text

Use them and have fun with them You don’t need to be functionally pure

Slide 85

Slide 85 text

3. Play == Learning

Slide 86

Slide 86 text

experiment code outside your comfort zone

Slide 87

Slide 87 text

Future Java Developer

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

Some replies...

Slide 90

Slide 90 text

“use [] not new Array” “aren't r and i also global?” “eval.....” “global arr variable :P” “Why is it Useful?” “evil() is like cheating” “no global functions!”

Slide 91

Slide 91 text

me

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

Don’t let best practices do your thinking for you

Slide 94

Slide 94 text

JavaScript is not a Science

Slide 95

Slide 95 text

There is no Panacea

Slide 96

Slide 96 text

Your code will Break - it always does. Keep it simple and human readable so it’s easier to fix.

Slide 97

Slide 97 text

Most importantly...

Slide 98

Slide 98 text

Don’t take anything I’ve said seriously I’m just exploring. You should explore too.

Slide 99

Slide 99 text

Picture Credits Mr Perfect by Roger Hargreaves http://www.mrmen.com/characters/mr-perfect/index.html If Hemingway wrote JavaScript by Angus Croll No Starch Press Bayeux Tapestry Maker http://bayeux.datensalat.net The Scream by Edvard Munch JavaScript: Good Parts by Douglas Crockford http://shop.oreilly.com/product/9780596517748.do cheetah cubs 2013bestpicz.blogspot.co.uk lion cubs https://c2.staticflickr.com/6/5339/6947068456_0b99b8fa58_z.jpg

Slide 100

Slide 100 text

@angustweets STOP BEING PERFE T C Tusen Takk!