Not Just a Hat Rack, Efficient Web Development

When working with a group of developers, it’s important to agree on and maintain similar coding practices. Consistency in syntax, structure, and included components will allow for easier cooperation, at little to no expense. Recently I tried to put together a list of such standards for JavaScript development, based on what I believe to be best practices. Check it out:

Syntax

Douglas Crockford’s (extremely detailed) JavaScript code conventions article should be gospel. Also, use his JSLint to “validate” code. Warnings can actually cause errors, especially if the code becomes minified.

General Tenets

• Put all scripts at the bottom of the page, directly before the closing body tag, unless it’s absolutely necessary to put them in the head tag.
• jQuery (or other JavaScript framework) should be included by default on any new site build.
• JavaScript should not be required for pages to function as intended.
• Keep your global JavaScript in a .js file or files. Even if it’s not a ton of code. A site’s main global JavaScript file should follow the convention: [client abbreviation].js. Additional files should follow a similar convention [client abbreviation]-[reason/location].js.
• When using third-party plugins/scripts, make every attempt to find something that fits only what you want to accomplish. Keep file size as small as possible.
• Strive for reusable code, which should be namespaced, or written in the form of a jQuery plugin.
• Minify general/reusable JavaScript components that you don’t plan on editing often. http://www.refresh-sf.com/yui/ or http://yui.2clics.net/ both work.

Firebug

Simply put, get and use Firebug. Specifically for JavaScript purposes, you’ll want to use the Console and Script features.

Console

Very similar to Firefox’s built-in JavaScript error console, but gives you the ability to log things to it and test out basically any JavaScript. Use it for the following:

• Validation: Like Firefox’s built in “script debugger”… it will tell you if there are JavaScript errors on the page.
• Logging Test Values: Use “console.log()” whenever you would typically “alert” a value for testing purposes. You get much more useful information. See Firebug and logging.
• AJAX Request Tracking: Spits out extremely important request/response info.

More:

• Firebug’s Console Overview
• Documentation

Script

Mainly for more in depth applications, but still invaluable for troubleshooting. More info:

• Firebug’s Debugger Overview
• Tutorial

JavaScript Frameworks

Make use of a JavaScript framework for DOM manipulation, AJAX utilities, animation, etc. It’s outside the scope of this standard to argue which framework to use, but we’ll be assuming the use of jQuery.

Incorporating jQuery

Given this argument, jQuery should be included as such:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Before including jQuery in a new site build, check to make sure you’re using the most recent version.

Advanced Topics

Object Literal Notation and Namespacing

The general concept is to mimic a more object-oriented approach to programming, with the added benefits of simplified code and removing the potential for conflicts. Simple examples:

• http://www.lixo.org/archives/2007/09/14/javascript-put-everything-in-a-namespace/
• http://www.brainonfire.net/blog/javascript-object-literal-namespace/

jQuery Plugins

Writing your own jQuery plugins is good motivation to maintain generalized, reusable, object-oriented code. If there isn’t an existing plugin, or if the existing plugins are unnecessary complex, then it’s recommended to roll your own.