JavaScript Anti-Patterns: Moving from Java to JavaScript

Short talk detailing five common issues new JavaScript encounter when moving from Java.

Transcript

1. JAVASCRIPT ANTI-PATTERNS Moving from Java to JavaScript Wednesday, 2 May 2012
2. EQUALITY AND IDENTITY Wednesday, 2 May 2012
3. if (accountBalance == 0) { rejectTransfer(); } else { acceptTransfer(); } Wednesday, 2 May 2012
4. if (accountBalance == 0) { rejectTransfer(); } else { acceptTransfer(); } Wednesday, 2 May 2012
5. “JavaScript has two sets of equality operators: === and !==, and their evil twins == and !=” D. Crockford - “JavaScript: The Good Parts” Wednesday, 2 May 2012
6. Equality (==) versus Identity (===) Wednesday, 2 May 2012
7. '' == '0' // false 0 == '' // true 0 == '0' // true false == 'false' // false false == '0' // true false == undefined // false false == null // false null == undefined // true ' \t\r\n ' == 0 // true Wednesday, 2 May 2012
8. SCOPE Wednesday, 2 May 2012
9. The Infamous Loop Problem Wednesday, 2 May 2012
10. function addLinks () { for (var i=0, link; i<5; i++) { link = document.createElement("a"); link.innerHTML = "Link " + i; link.onclick = function () { alert(i); }; document.body.appendChild(link); } } Wednesday, 2 May 2012
11. Wednesday, 2 May 2012
12. “...unlike C, C++, and Java, JavaScript does not have block-level scope. All variables declared in a function, no matter where they are declared, are defined throughout the function.” D. Flanagan “JavaScript: The Definitive Guide” Wednesday, 2 May 2012
13. function addLinks () { var i; for (i=0, link; i<5; i++) { link = document.createElement("a"); link.innerHTML = "Link " + i; link.onclick = function () { alert(i); }; document.body.appendChild(link); } } Wednesday, 2 May 2012
14. function addLinks () { for (var i=0, link; i<5; i++) { link = document.createElement("a"); link.innerHTML = "Link " + i; link.onclick = function (num) { return function () { alert(num); } }(i); document.body.appendChild(link); } } Wednesday, 2 May 2012
15. GLOBAL STATE Wednesday, 2 May 2012
16. messages = []; var elem = document.getElementById("messages"); elem.onclick = function () { var field = document.getElementById("input"); messages.push(field.value); }; Wednesday, 2 May 2012
17. messages = []; is equivalent to.... public static string[] messages; Wednesday, 2 May 2012
18. Why Global Variables Should Be Avoided When Unnecessary... • Non-locality • No Access Control or Constraint Checking • Implicit coupling • Concurrency issues • Namespace pollution • Memory allocation issues • Testing and Confinement http://c2.com/cgi/wiki?GlobalVariablesAreBad Wednesday, 2 May 2012
19. var messages = []; var elem = document.getElementById("messages"); var onclick = function (messages) { return function () { var field = document.getElementById("input"); messages.push(field.value); }; }; elem.onclick = onclick(messages); Wednesday, 2 May 2012
20. CLASS-ITUS Wednesday, 2 May 2012
21. function PersonDetails() { } PersonDetails.prototype = {}; PersonDetails.prototype.setAge = function (age) { this.age = age; }; PersonDetails.prototype.getAge = function () { return this.age; }; PersonDetails.prototype.setName = function (name) { this.name = name; }; PersonDetails.prototype.getName = function () { return this.name; }; var details = new PersonDetails(); details.setAge(28); details.setName("James Thomas"); updateDetailsForPerson(details); Wednesday, 2 May 2012
22. There’s a shorter way.... Wednesday, 2 May 2012
23. updateDetailsForPerson({ age: 28, name: "James Thomas" }); Wednesday, 2 May 2012
24. “You have no privacy. Get over it.” Scott McNealy Wednesday, 2 May 2012
25. PERFORMANCE Wednesday, 2 May 2012
26. function addClasses(element, classes) { for (var i = 0; i < classes.length; i++) { element.className += " " + classes[i]; } } Wednesday, 2 May 2012
27. “Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document.” https://developers.google.com/speed/articles/reflow Wednesday, 2 May 2012
28. “Reflows are very expensive in terms of performance, and is one of the main causes of slow DOM scripts.” http://dev.opera.com/articles/view/efficient-javascript/?page=3#reflow Wednesday, 2 May 2012
29. http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ •Adding, removing, updating DOM nodes •Hiding a DOM node with display: none (reflow and repaint) or visibility: hidden (repaint only, because no geometry changes) •Moving, animating a DOM node on the page •Adding a stylesheet, tweaking style properties •User action such as resizing the window, changing the font size or scrolling Wednesday, 2 May 2012
30. function addClasses(element, classes) { var newClasses = ""; for (var i = 0; i < classes.length; i++) { newClasses += " " + classes[i]; } element.className += newClasses; } Wednesday, 2 May 2012
31. Wednesday, 2 May 2012