Maintainable JavaScript 2011

flickr.com/photos/jontysewell/4526861658/

Maintainable JavaScript
Nicholas C. Zakas | @slicknet

Who's this guy?

5 years Co-Creator Contributor,
Tech Lead, Yahoo! csslint.net Creator of YUI Test

Author Lead Author Contributor Lead Author

Maintainability
Why do we care?

flickr.com/photos/indraw/4857101224/

Most of your time is spent maintaining code

Who cares?

Your Employer Your Co-workers,
Present and Future

flickr.com/photos/protestphotos1/4726566233/

We all want to be rock stars
"Don't mess with my process, man! It's about the music!"

flickr.com/photos/the_junes/3120810156/

At work, you're part of a team
Awesome happens when everyone is on the same page

Maintainable code is

Understandable Adaptable Debuggable

Testable
Intuitive Extendable

Code Conventions

Understandable

Intuitive

flickr.com/photos/29271559@N02/5799773313/

"Programs are meant to be read by humans and
only incidentally for computers to execute."
Donald Knuth

flickr.com/photos/polinasergeeva/3052378826/

Tabs for
indentation

4 spaces for
indentation

Indentation

if (wl && wl.length) {
for (i = 0, l = wl.length; i < l; ++i) {
p = wl[i];
type = Y.Lang.type(r[p]);
if (s.hasOwnProperty(p)) { if (merge && type
== 'object') {

Y.mix(r[p], s[p]);
} else if (ov || !(p in r)) {
r[p] = s[p];
}
}
}
}

if (wl && wl.length) {
for (i = 0, l = wl.length; i < l; ++i) {
p = wl[i];
type = Y.Lang.type(r[p]);
if (s.hasOwnProperty(p)) {
if (merge && type == 'object') {
Y.mix(r[p], s[p]);
} else if (ov || !(p in r)) {
r[p] = s[p];
}
}
}
}

flickr.com/photos/polinasergeeva/3052378826/

Comments

/**
* Returns a new object containing all of the properties of
* all the supplied objects. The properties from later objects
* will overwrite those in earlier objects. Passing in a
* single object will create a shallow copy of it. For a deep
* copy, use clone.
* @method merge
* @for YUI
* @param arguments {Object*} the objects to merge.
* @return {object} the new merged object.
*/
Y.merge = function() {
var a = arguments, o = {}, i, l = a.length;
for (i = 0; i < l; i = i + 1) {
Y.mix(o, a[i], true);
}
return o;
};
Every method

if (mode) {
switch (mode) {
case 1: // proto to proto
return Y.mix(r.prototype, s.prototype, ov, wl, 0,
merge);
case 2: // object to object and proto to proto
Y.mix(r.prototype, s.prototype, ov, wl, 0, merge);
break; // pass through
case 3: // proto to static
return Y.mix(r, s.prototype, ov, wl, 0, merge);
case 4: // static to proto
return Y.mix(r.prototype, s, ov, wl, 0, merge);
default: // object to object is what happens below
}
}

Difficult-to-understand code

while (element &&(element = element[axis])){ //NOTE: assignment
if ( (all || element[TAG_NAME]) &&
(!fn || fn(element)) ) {
return element;
}
}

Code that might seem to be wrong

Naming
flickr.com/photos/kaatje/243834320/

Naming
• Use logical names for variables and functions
– Don't worry about length
• Variable names should be nouns
• Function names should begin with a verb (i.e.
getName())
– Functions return booleans should begin with
"is", such as isValid()
• Avoid useless names such as foo and temp

Loose Coupling

Adaptable Debuggable

Extendable

Front End Layers

Presentation Behavior
(CSS) (JavaScript)
Base JS
Data/Structure
(HTML)

<button onclick="doSomething()">Click Me</button>

Keep JavaScript out of HTML

var element = document.getElementById("container");
element.innerHTML = "<div class="popup"></div>";

Keep HTML out of JavaScript

.foo {
width: expression(document.offsetWidth + "px");
}

Keep JavaScript out of CSS

var element = document.getElementById("container");
element.style.color = "red";
element.style.cssText = "background:blue;border:1px solid red";

Keep CSS out of JavaScript

Programming Practices

Adaptable Debuggable

Testable
Extendable

//the wrong way!!!
function handleClick(event){

var popup = document.getElementById("popup");
popup.style.left = event.clientX + "px";
popup.style.top = event.clientY + "px";
popup.className = "reveal";

}

Event handlers should only handle events

//better, but still wrong
showPopup(event);
}

function showPopup(event){
popup.style.left = event.clientX + "px";
popup.style.top = event.clientY + "px";
}

Don't pass the event object around

//win!!
showPopup(event.clientX, event.clientY);
}

function showPopup(x, y){
popup.style.left = x + "px";
popup.style.top = y + "px";
}

Properly separated event handling

//don't add new methods
Array.prototype.awYeah = function(){
alert("Aw yeah!");
};

//don't override methods
YUI.use = function(){
alert("Aw yeah!");
};

Don't modify objects you don't own
If you didn't define the object yourself, you don't own it

nczonline.net/blog/2010/03/02/maintainable-javascript-dont-modify-objects-you-down-own/

showPopup(event.clientX, event.clientY);
}

function showPopup(x, y){
}

Avoid global functions and variables

var Controller = {
handleClick: function(event){
this.showPopup(event.clientX, event.clientY);
},

showPopup: function (x, y){
}
};

Avoid global functions and variables
Create a single global (if necessary) and attach everything to it

var Controller = {
addClass: function(element, className){
element.className += " " + className;
}
};

Throw your own errors
When you know a function will fail

var Controller = {
process: function(items){
if (items != null){
items.sort();
items.forEach(function(item){
//do something
});
}
}
};

Avoid null comparisons

var Controller = {
process: function(items){
if (items instanceof Array){
items.sort();
items.forEach(function(item){
//do something
});
}
}
};

Test for precisely what you want to know if it matters

• Use instanceof to test for specific object
types
– object instanceof MyType
• Use typeof to test for primitive types
– typeof value == "string"
– BEWARE: typeof null == "object"

function validate(value) {
if (!value) {
alert("Invalid value");
location.href = "/errors/invalid.php";
}
}

Separate config data

Separate Config Data
• All URLs needed by the JavaScript
• Any strings that are displayed to the user
• Any HTML that needs to be created from
JavaScript
• Settings (i.e., items per page)
• Repeated unique values
• Any value that may change in the future

Build Process

Understandable

Testable

Build
Add/Remove Validate
Debugging Code

Concatenate
Minify Files
Files

Generate Deploy
Documentation Files

Build

Development Testing Deployment

Recommendations
• One object or object definition per file
– Track dependencies
• Use a build process to combines files
– Determines correct order
– Validates code (JSHint)
– Minifies code (YUI Compressor)
– Generate documentation (YUI Doc)

http://www.julienlecomte.net/blog/2007/09/16/

Remember
• Code conventions ensure everyone's speaking
the same language
• Loose coupling of layers make changes and
debugging easier
• Good programming practices allow you to
• Code organization and a build process help to
bring sanity to an otherwise crazy process

Etcetera
• My blog: www.nczonline.net
• Twitter: @slicknet
• These Slides: slideshare.net/nzakas

Maintainable JavaScript 2011

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Maintainable JavaScript 2011 (20)

More from Nicholas Zakas (20)

Recently uploaded (20)

Maintainable JavaScript 2011