Thoughts Heap

Sep
7th

Mon

The jQuery DSL

For the last 4 months I’ve been using jQuery for Javascript development. To be honest, I didn’t got started before with jQuery because it didn’t seem too practical to me (no Class approach), but after looking carefully at the plugin model, it was truly a revelation of a good API for development.

So I started to accommodate to the jQuery’s way of things, and one of the API’s that got my interest in the past 2 months was the traversal one. I mean, what were those methods .find(), .end() and .endSelf(). Why I would go and use those methods when my standard code was always like:

$("#container .sub-container .items").click(..);
$("#container .sub-container .other-items").hover(..);
$("#container form.create-item").ajaxForm(..);

and never needed them. I guessed that the way I was doing things wasn’t the jQuery’s way; I mean, I could rewrite the previous code like this instead:

$("#container").
  find(".subcontainer").
    
    find(".items").
      click(..).
    end().
    
    find(".other-items").
      hover(..).
    end().
    
  end().
  
  find("form.create-item").
    ajaxForm().
  end().
end();

Of course at first sight it didn’t look that good, but I was not too sure that it didn’t look bad either, it was just different. So I just let time tell me if it was good enough. I left that implementation and came back a month later, the WTF/min were almost none, I did still understand the code right away, it actually looked like a CSS funky syntax to me.

After deciding that it was indeed a good way to do things, I just started to look at the pros & cons of this funky syntax vs the normal syntax I used before. This is what I got

Funky syntax Pro’s

The order of the code is in a hierarchical way, representing the DOM position.
If the main container is not there (e.g #container) the child selectors will not be called, making the code “more efficient”.
When multiple elements have the same behavior, a new HTML class that represented the behavior is exposed. For example, if you require 2 out of 3 forms in a container to be an AJAX form, you wouldn’t replicate the same instructions to each selector, instead you will create a common selector for the 2 forms by adding a new HTML class.
The lookup for elements will be faster on every nesting, that is because the lookup will be done from the parent, not from the main document.

Funky syntax Con’s

.live() method wouldn’t work, this method only works on un-nested selectors. However, you may use the livequery plugin.
Initially it is a difficult syntax for other developers, 3 out of 4 developers in my team did say that it was confusing, but as I stated before, probably is more different than confusing.

Classic syntax Pro’s

Would be the approach used by most of developers.
.live() can be used without any problems.
Probably there are other benefits that I’m taking from granted ¬_¬.

Classic syntax Con’s

A lookup from the HTML document for every element.
Lookups are being made even when there is no parent element. (This could be easily avoided with an if statement, but still).
It’s harder to spot the common behavior, different selectors factor.

As you can see, there are some benefits and some pros attached to the use of this jQuery DSL; I don’t know if this is the way to go but I’m certain that I’m not the first one who came up with this (I haven’t read any book of jQuery yet). If you could leave some thoughts about what is the one you prefer and why, it would give much value to this discussion.

Until next time.

This is a spot where you can get a real slice of my thoughts

The jQuery DSL