Fiddling with my Lint, Minification and Closure

Here are a few tools that more JavaScript developers should be using.

Fiddling:

A cool little tool for experimenting with JavaScript is JSFiddle.net. It provides a very good online tool for which you can create isolated scenarios in a sandbox with little or no setup or just to run little code fragments and share them with the community.

Lint:

I cannot believe how many developers don’t know of JavaScript Lint. JavaScript Lint is probably the most useful tool outside of a browser for JavaScript developers and if you haven’t used it until now, it’s time you start using it. Like most interpreted languages, JavaScript syntax errors are not picked up until it’s time to execute the code. Unlike most interpreted languages, the interpreters for JavaScript within the browsers don’t all behave the same when it comes to syntax errors. Now the kicker – 99% of JavaScript syntax errors can be picked up by a tool before you test and deploy your code and JavaScript Lint is one such tool that does this work for you. In fact, with very few exceptions (we’ll get to that later), there is NO reason to deploy a piece of code that is full of Lint errors. Available in both a command line tool which you can batch your entire project and an online tool, JavaScript lint will take your source file, and give you a report on which lines are wrong or good coding suggestions which should be adhered to.

Minification & Obfuscation:

Another type of tool that is often used by JavaScript developers is a minifier or compression tool. Minifiers originally were designed to reduce the file size of JavaScript code modules to both improve download speeds (less to download) and increase performance (reduce parsing overheads). These tools can also have the positive side effect of making your code some-what obfuscated (making it difficult for other’s to read your code – we might cover obfuscation another day). A quick search of Google will result in a whole lot of choices for both online and offline minification or compression tools.

Closure:

Google’s Closure Compiler is a free tool by Google that isn’t used as often as it should be for JavaScript-based projects.

What Google’s Closure Compiler is, is a JavaScript compiler that generates JavaScript. This sounds odd – but in practice it is a unique and extremely useful development tool.
Compilers these days can generate very good code and often improve on the code of developers. Based on this bold statement, a compiler that can take a working but not as efficient as it could be code file from a developer might be able to turn it into a better code file. This is what Google’s Closure Compiler attempts to do and it does a pretty descent job at it. It doesn’t mean you should stop trying to be a better developer, but a good developer should adopt good tools where possible to make yourself an even better developer.

Here are a couple of examples of the Closure Compiler in action. I have specifically kept the original identifiers to single letters to highlight the logic optimisation, however if the identifiers were long – they would have been minified in the process. I have also performed a compression of the same source files using the Online JavaScript Compression tool so you can see the difference in the way they work.

Example 1 Original Code:

function g()
{
t = this;

this.h = function()
{
return ‘Hello’;
};

this.w = function()
{
return ‘World’;
};

alert(t.h() + ‘, ‘ + t.w() + ‘!’);
}

g();

Example 1 Closure Compiled Code:

function g(){t=this;this.h=function(){return”Hello”};this.w=function(){return”World”};alert(t.h()+”, “+t.w()+”!”)}g();

Example 1 Online Compression Tool Compressed Code:

function g(){t=this;this.h=function(){return”Hello”};this.w=function(){return”World”};alert(t.h()+”, “+t.w()+”!”)}g()

Example 1 Closure Compiled Code + Online Compression Tool Compressed Code:

function g(){t=this;this.h=function(){return”Hello”};this.w=function(){return”World”};alert(t.h()+”, “+t.w()+”!”)}g()

Example 2 Original Code:

function g()
{
t = this;

function h()
{
return ‘Hello’;
}

function w()
{
return ‘World’;
}

alert(h() + ‘, ‘ + w() + ‘!’);
}

g();

Example 2 Closure Compiled Code:

function g(){t=this;alert(“Hello, World!”)}g();

Example 2 Online Compression Tool Compressed Code:

function g(){function e(){return”Hello”}function n(){return”World”}t=this;alert(e()+”, “+n()+”!”)}g()

Example 2 Closure Compiled Code + Online Compression Tool Compressed Code:

function g(){t=this;alert(“Hello, World!”)}g()

Comparing the output of both examples, you can see how certain coding constructs (in particular here local functions vs public functions) are treated differently by the Closure Compiler – the latter having only local functions was able to be compiled to be a smaller file than the former. This is because being local functions, the compiler knows that there can be no other code relying on this (keeping reflection type techniques out of the equasion). In the case of a straight compression tool, it does it’s best – in fact in the first example we can see both tools did a very similar job. Both tools actually complement eachother.

Conslusion:

Interestingly the output of the Closure Compiler and minification tools give a lot of warnings for Lint – however, that is because Lint provides recommendations for best coding practices. This isn’t to say that Closure or minification cannot be the cause of your code breakage (they can), but – performing a Lint, Obfuscation, Closure, and Minification in that order before TESTING your deployable product will yield very good results. Of course you should at least use Lint to rid your code of human error if you don’t use the other tools.

JS Fiddle: http://jsfiddle.net/

JavaScript Lint: http://www.javascriptlint.com/
Online JavaScript Lint Tool: http://www.javascriptlint.com/online_lint.php

Online Javascript Compression tool: http://jscompress.com/

Google’s Closure Compiler: https://developers.google.com/closure/compiler/
Online Closure Compliler tool: http://closure-compiler.appspot.com/home

JC