Stop being Perfect

Presented at Web Rebels, Oslo, Norway
May 22nd 2014

Transcript

1. @angustweets STOP BEING PERFE T C
2. 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
3. and I’m writing a Book...
5. The 5 steps to JavaScript Perfectionism
6. 1. Discovery
7. (weird shit) JAVA!! But Easier!! (Deceptively Familiar Syntax) (weird shit) WTF? JavaScript
8. 2. Consternation
10. 3. Despair
11. JavaScript developer JavaScript
12. 4. The Shining Knight
14. 5. The JavaScript Police™
15. http://stackoverflow.com/questions/3959211/fast-factorial-function-in-javascript
16. So why do we need imperfection?
17. 1. Technology thrives on Open Minds
18. Jed Schmidt has an open mind
20. Web Rebels 2014
21. ‘Oslo’ === ‘Oslo’; //true new String(‘Oslo’) === new String(‘Oslo’); //false Objects have identity, primitives don’t
23. (picture) 2. Context > Dogma
24. -Classical Inheritance-
25. 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();
26. This is why people hate JavaScript
27. But wait...
28. 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);
29. 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);
30. or just forget OO entirely
31. 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');
32. 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');
33. -hasOwnProperty-
34. “Only hasOwnProperty will give the correct and expected result; this is essential when iterating over the properties of any object” —JavaScript Garden
35. var obj = Object.create(null); obj.a = 3; obj.b = 5; for (var p in obj) { if (obj.hasOwnProperty(p)) { console.log(obj[p]); } }
36. var obj = Object.create(null); obj.a = 3; obj.b = 5; for (var p in obj) { if (obj.hasOwnProperty(p)) { console.log(obj[p]); } }
37. 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
38. -Array constructor-
39. [] or new Array?
40. Google Style Guide google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml? showone=Array_and_Object_literals#Array_and_Object_literals
42. Google Developer Day V8 Performance Tuning Tricks https://mkw.st/p/gdd11-berlin-v8-performance-tuning-tricks/#44
44. more importantly you can write neat functions like...
45. //From prototype.js extension of //String.prototype function times(count) { return count < 1 ? '' : new Array(count + 1).join(this); } 'me'.times(10); //"memememememememememe"
46. and...
47. 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]
48. -equality-
49. “Always use === and !==” - Douglas Crockford, The Good Parts
50. if (x == null) //is exactly equivalent to... if (x === null || x === undefined)
51. if (typeof x == “function”)
52. -with-
53. //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; }
54. //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; }
55. //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; } }
56. //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; } }
57. with as equivalent to let
58. apparently this is our worst nightmare...
59. var addHandlers = function(nodes) { for (var i = 0; i < nodes.length; i++) { nodes[i].onclick = function(e) {alert(i);} } };
60. you could wrap it in function scope...
61. var addHandlers = function(nodes) { for (var i = 0; i < nodes.length; i++) { nodes[i].onclick = function(i) { return function(e) {alert(i)}; }(i); } };
62. or use with (safely)
63. var addHandlers = function(nodes) { for (var i = 0; i < nodes.length; i++) { with ({i:i}) { nodes[i].onclick = function(e) {alert(i)} } } };
64. -comma operator-
65. “but it’s really complicated”
66. doThis(), doThat(); 1) do this 2) then do that
67. lets you do two things when JavaScript expects one
68. var addHandlers = function(nodes) { for (var i = 0; i < nodes.length; i++) { nodes[i].onclick = function(e) {alert(i);} } };
69. var addHandlers = function(nodes) { for (var i = 0; i < nodes.length; console.log(i),i++) { nodes[i].onclick = function(e) {alert(i);} } };
70. var addHandlers = function(nodes) { for (var i = 0; i < nodes.length; console.log(i),i++) { nodes[i].onclick = function(e) {alert(i);} } };
71. another example
72. function getRandomPrime() { while(n = Math.round(Math.random()*1000), !isPrime(n)); return n; }
73. make eval run globally
74. (function() { var localStorage = "bwahahahaha!" return eval("localStorage") })(); //"bwahahahaha!"
75. (function() { var localStorage = "bwahahahaha!" return (0,eval)("localStorage") })(); //"Storage {length: 0}"
76. //see http://perfectionkills.com/global-eval-what- are-the-options/ by Kangax (function() { var localStorage = "bwahahahaha!" return (0,eval)("localStorage") })(); //"Storage {length: 0}"
77. Thanks Comma Operator!!! , Really it was Nothing!
78. functional programming
80. functional programming
81. functional programming languages
82. JavaScript is not a functional language But it has functional idioms
83. function passing higher order functions function composition
84. Use them and have fun with them You don’t need to be functionally pure
85. 3. Play == Learning
86. experiment code outside your comfort zone
87. Future Java Developer
89. Some replies...
90. “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!”
91. me
93. Don’t let best practices do your thinking for you
94. JavaScript is not a Science
95. There is no Panacea
96. Your code will Break - it always does. Keep it simple and human readable so it’s easier to fix.
97. Most importantly...
98. Don’t take anything I’ve said seriously I’m just exploring. You should explore too.
99. 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
100. @angustweets STOP BEING PERFE T C Tusen Takk!