Skip to content
June 16, 2012 / geeksretreat

Is your JavaScript code top quality?

How do you measure code quality? This question is harder than you think to answer! The topic of code quality is quite young. In fact the topic of writing code is young in comparison to other crafts; such as carpentry or engineering. We therefore struggle to agree what is good or bad code. And, more often than not we disagree about trivial points such as whether braces should start at the end of the line or, on the next line. Although these points are fun to debate they mute the real point and should be hidden in the religious wars drawer with the vi vs. emacs argument!

Programmers within any team have quite different opinions on what makes code quality. One major point they generally agree on is that when writing quality code you must ensure the team agrees to a coding standard. Ensuring every line of code has a consistent implementation is paramount. Let’s look at an example.

Inconsistent code

function dr() {
	c = d.getElementById('x');
	if(c.getContext)
	  {
	  t = c.getContext('2d');
		b = c.height / 80; db();
	dp();
		p = new Image(); p.src = 'pieces.png'; p.onload = dps;
          c.addEventListener('click', bc, false); }
	else{ alert("Canvas not supported!"); 
}}

Consistent code

function draw()
{
	// Main entry point got the HTML5 chess board example
	canvas = document.getElementById('chess');

	// Canvas supported?
	if(canvas.getContext)
	{
		ctx = canvas.getContext('2d');

		// Calculdate the precise block size
		BLOCK_SIZE = canvas.height / NUMBER_OF_ROWS;
		
		// Draw the background
		drawBoard();

		defaultPositions();
		
		// Draw pieces
		pieces = new Image();
		pieces.src = 'pieces.png';
		pieces.onload = drawPieces;

		canvas.addEventListener('click', board_click, false);
	}
	else
	{
		alert("Canvas not supported!");
	}
}
The two examples above perform the same function and the code is exactly the same, except for naming and layout. They are equal in speed and performance and result. However, from a code quality perspective these are world’s apart.

Assuming we all agree that quality matters, how do we enforce it? Introducing JSLint. JSLint is a JavaScript code quality tool. The tool is written by Douglas Crockford: a member of the JavaScript royal family. JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.

Using JSLint

JavaScript can be copied-and-pasted directly into JSLint.

On pasting your code into JSLint simply press the “JSLint” button to submit. The site will then analyse your code and present the results:

Some of the rules applied can be tweaked to match your preference:

jslint online code quality options

On minor annoyance with using the on-line tool is that it can be time consuming. It is more than likely that you’ll go though several iterations of copy-paste-analyse cycle before your code conforms to the rule-set. Thankfully the tool can be used with IDEs such as Aptana.

Integrating JSLint with Aptana

Aptana is an open source IDE which lets you develop and test your entire web application within a single environment. It fully supports JavaScript; however, by default JSLint validation included but not enabled. To enable JSLint first select the option “Window->Preferences” e.g.

Enabling jslint in Aptana

Within the window that appears select the option “Aptana Studio->Validation” from the left-hand list. Then select the “JavaScript” option from the menu on the left within the ‘Validation’ section e.g.:

Code quality with Aptana

To enable JSLint simply click the ticks within the “Build” and “Reconcile” column within the validator’s list. Confirm by pressing the OK button. The IDE will then begin to report feedback from JSLint. Lines which are flagged as warnings by JSLint are decorated with a warning symbol on the left hand margin of Aptana e.g.

Aptana code quality results

The rule-set can be tweaked using the same settings as the on-line tool. Modification of settings is applied by including a formatted comment block at the top of the JavaScript file e.g.

Code quality option within Aptana with JSLint

Further information on JSLint can be found on the official site JSLint. Please note that JSLint’s official tag line is: Warning: JSLint will hurt your feelings! Did it?
About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 172 other followers

%d bloggers like this: