JQuery: The Good, the Bad and the Ugly

Like the rest of the world, we are using JQuery now. We have been doing browser based rich client applications over the last 7-8 years now.

All this experience has taught us to be very skeptical of these 'cool' libraries that spring up every 2 months. Most of these libraries look good only on demos. But using them with our existing framework or mixing multiple libraries can lead to not so pleasant experiences. These libraries interfere with each other or try to hijack the CSS styles of other widgets.

JQuery is definitely one of the lowest maintenance libraries that we have used so far. So far so good!

JQuery is based on the philosophy of consistent and limited API and compact codebase. John Resig, the creator of JQuery talks about this philosophy in this amazing Google video. http://video.google.com/videoplay?docid=-474821803269194441

With my limited experience, this is how JQuery looks to me:

1. GOOD methods.
2. Promotes BAD programming practices.
3. Code gets UGLY.

The Good:

$() Access function provides us flexibility of use. It's a great alternative to document.getElementById(). Also it provides consistency in accessing objects.

See following example:
var d = $("#MyDivId")

Above returns the JQuery object that represents the div tag that has an id="MyDivId".
Also I can do $(d) and I will get the same object back.

$(document.getElementById("MyDivId")) will also returns me the same JQuery object.

The main advantage of the last method is that it allows us to integrate JQuery techniques into any existing AJAX codebase.

Also I love the .html() and .text(), .append() and .prepend() methods. They are simple. (I hate the .prependTo() and .appendTo() though. They don't make sense. Seems like an afterthought.).
Another pretty method is .css() on a JQuery object. css() method makes it very simple to do the CSS manipulations on the objects without worrying about cross browser compatibility issues.

The Bad
JQuery examples promote some bad programming practices.

Most of the code snippets about JQuery seem to consistently follow some very bad programming practices. Every example insists on creating JQuery objects for every call. I haven't seen many code samples that use variables. I think this practice originated from John Resig's promotion of enclosures and inline functions in JavaScript.

Let’s see the following example of supporting hover on a div object:

function fnPageLoaded(){
$("#MyDivId").hover(function(){
$(this).addClass("hover");
}, function(){
$(this).removeClass("hover");
});
}

$(document).bind("ready", fnPageLoaded);

The above code should be written as following:

function fnPageLoaded(){
var d = $("#MyDivId");
d.hover(function(){
d.addClass("hover");
}, function(){
d.removeClass("hover");
});
}//fnPageLoaded


Even better,

function fnPageLoaded(){

var d = $("#MyDivId");

function fnOver(){d.addClass("hover");}
function fnOut(){d.removeClass("hover");}

d.hover(fnOver, fnOut);

}//fnPageLoaded

Try to use local variables for function and JQuery access pointers.

These local variables do the following things:
1] Reduce unnecessary calls to the functions.
2] Make code more readable.
3] Good variable names self document the code flow.

The access method $() in JQuery has a significant amount of code in it. Calling it multiple times will slow down your code.

Chaining these JQuery calls reduces the number of variables we need in the local scope. But it makes the code ugly.
This brings me to my 'The Ugly' part of JQuery.


The Ugly

One of the basic principals of programming is writing simple code. Even comments don't help a complex code.

The side effect of writing a lot of anonymous functions is ugly code. At first glace, most of codebase using JQuery looks like random mix of '#', '()', '{}' and ';' operators. If you haven't written that piece of code, it becomes impossible to step into and understand. This reminds me of debugging regular expressions written by someone else. Your JQuery code can end up looking like reg-ex code. It is easier to rewrite regular expressions than understand them.

Conclusion

JQuery is good. But remember your 'Pragmatic programmer' and 'Code Complete' lessons. Write simple code. Clever or tricky code is bad.