Monday, May 11, 2009

jQuery worst practices... really?

Following Elijah Manor (@elijahmanor) on Twitter I came across a blog post suggesting three worst practices in jQuery. So I decided to rant. I almost don't remember when I did that.

If you already opened the article and are familiar with jQuery, its ideology, best practices and have been using it for at least a bit, you know that something is wrong there. Something? Oh, come on, even the advice about commenting is not completely right.

Well, let me begin a dissection of the article:

jQuery and Regular Expressions have a lot in common: They are both amazingly powerful and they are both as ugly as a knife fight between two obese street-whores in a garbage-strewn alley.

When I was reading the article for the first time I skipped this sentence and went straight to the "worst" practices. Had I read it, I would have closed the article and went on with my life and this post would never come to be. Even so, this comment is a matter of taste so there's nothing valuable I can say about it (except: use a different framework, but it sounds too fanboyish).

Worst Practice #1: Hooking up event handlers dynamically when there is no need.

And the author goes on to explain how hist first worst practice is that sometimes there is no need to assign handlers dynamically. Well, surprise: the main reason jQuery is so popular is because it allows us, developers, to include JavaScript in an unobtrusive manner. That means exactly what it sounds like — his Worst Practice #1 is almost one of the reasons why we have jQuery in the first place. And if you care about usability and accessibility at all, you know that unobtrusive is a way to go. If you don't, then, please, don't do web development anymore.

Worst Practice #2: Chaining the results.

I love jQuery because you can chain the results. And using the "unreadable code" argument to support this statement is all but silly. In JS, just as in C++, Java and many similar languages, whitespace is (mostly) ignored by an interpreter. Feel free to put it in any way you like it.

Let's rewrite example from the blog:

$("div.highlight").css({
  color: "yellow",
  backgroundColor: "black",
  width: 50
});

Well, I cheated a but and combined style rules into one function call so there is no chaining here. However it does demonstrate that jQuery is as readable as any other CSS file. Hopefully a web developer has edited one? To demonstrate how to make chainability more readable, let's write a new example:

$("div.highlight")
  .css({
    color: "yellow",
    backgroundColor: "black",
    width: 50
  })
  .slideDown('fast')
  .text('Hey, this is higlighted')
;

I understand that we all have different criteria, tastes and consider different styles "unreadable", but there is no sense writing a blog post in which you will say that the things a framework is best known for are the worst practices for programming with that framework.

I'm not saying that those practices jQuery promotes are the best ones in the world, but they are the best for jQuery. If this was just a rant against jQuery, I wouldn't be even bothered to read it, but in this case, I just can't understand why anyone would be using such an "ugly" framework when there are such beauties as Prototype, MooTools, Dojo...

The third "worst practice" doesn't have anything to do with jQuery, but (I actually hate to say it) the author's example actually is a bad practice. You don't comment what piece of code does, you document its intention. Hence a comment like "get all the Divs with the highlight class and format them and set their width" is totally superfluous and increases the maintenance needed. Anyone who can read is able to read jQuery documentation and CSS specification (or at least a guide on w3schools.com) if he is about to write any code related to web development. If you want to add valuable comment, then you write "style divs that should be highlighted." Even this comment is mostly superfluous, but at least you don't need to update it any time you change the code.

Happy programming.

P.S.: the convention is to name JS variables in camelCase, not PascalCase. Just an intersting thing to note.

Reblog this post [with Zemanta]

3 comments:

Random nobody said...

I couldn't agree more (with you) . jQuery is all about dynamics.

VVME said...

Excellent.
welcome to my blog , it is about hid conversion kit,
here has a lot of the article is about car hid kits, motorcycle lamps,
and other maintenance knowledge,welcome to my blog .

Christian Louboutin said...

This is a very nice post, I like it, Christian Louboutin also been concerned about it.