jquery vs mootools: my initial thoughts

mootools_logoIntroduction
I’ve been using jQuery regularly for my new job now for about 3 weeks or so. I’ve used the selectors, event handling, short cuts/handlers, animations, plugins etc. Nothing too fancy, but in general, a descent exposure. I’d like to compare it with Mootools. And while I do rock a Mootools skin on my phone, I’m going to try and remain as objective as subjectively possible. I’m going to try and stay positive about the differences and give use-cases for using either.

Gut Reaction
jQuery is fast to learn, easy to use, and passes the ‘thinking’ to the framework. It allows you to do incredibly powerful client side stuff without knowing too much of the inner workings, worrying about being specific and explicit about your syntax or organization, and most importantly lets you get this stuff done quickly.

Mootools on the other hand requires you to be explicit. You want to create a node with 4 children and easy of them have a bunch of inline attributes? Cool, do it manually, instead of specifying a string of html which the engine will parse and DOM-inize for you (jQuery can do this). Most prominent for me: jQuery is very smart and very easy to use, but lacks a certain elegance due it’s lack of explicit control; Mootools requires more work and overhead to get something done, but is very organized and beyond the learning curve, more meaningful.

Example
To create a series of nodes in jQuery, it’s as easy as this:

var html = ‘<div id=”div-one”><span id=”span-one”>yo yo</span></div>’;
$(html).prependTo($(’#random-node’));

In Moo, it’d be something like this:

var first = new Element(’div’,{’id’:'div-one’});
var two = new Element(’span’,{’id’:’span-one’});
first.adopt(two);
$(’body’).shift().adopt(first);

One is easier/more implicit than the other. However the other is much more explicit, and easier to follow for a foreigner who isn’t too familiar with the jQuery syntax, rules and behaviors.

Optimization/Speed
I don’t know too much about jQuery’s speed. I believe that at this point we’ve got to the point where an extra 10 milliseconds isn’t a do or die or decision maker for what framework/library to use. But with that in mind, one of the great things for Moo is the ability to compartmentalize only what is needed for client side behavior. Everything is kept as a separate stand alone, window based class, where as jQuery seems to throw in a lot of other code into one batch which is mutually dependent.

This goes back to my gut reaction though. For a new comer, I don’t want to try to determine what classes/objects I’ll need. I want a script tag that has almost everything that I need. No playing with downloader apps to pick and choose what my project will need. Mootools therefore introduces a higher level of (initial) complexity, but brings with it greater than control, and again, explicitness.

Community
Up until this point, I’ve more or less tried giving opinions for and against both libraries, but in this category (Community), there is a winner hands down: jQuery. I don’t really know what the reason for this is. I would say that jQuery has been more organized in their community/developer evangelism, which is completely true, but I don’t think that’s the real reason.

While Mootools is still trying to get it’s community plugin system up and rung (MooForge, I believe), I think a core reason it’s the direct and simplicity of jQuery. I think it was able to garner such a strong following because the barrier to entry is to incredibly tiny. I don’t need to understand JavaScript syntax, programming syntax, or the inner workings of client side development. The very syntax that I love about Moo (e.g. new Element(’div’).addClass(’oliver’).addEvent….) is also probably what turns people off. The fact that I need to be so direct about what I want done is something that many people probably don’t want to deal with.

Conclusion
But away from my tangent, the jQuery community is amazing. So many plugins, organized horizontally and vertically by jQuery themselves. So many resources to learn the syntax, deconstruct plugins to understand the code, etc. While my obsessive compulsiveness when it comes to coding syntax and practices would never allow me to fully embrace and adopt jQuery personally and independently of where I work full time, I can understand fully it’s benefits. I’ll always evangelize Mootools whenever I can, but after this exposure to jQuery, I’ll understand where it’s most useful and for whom Mootools would really be welcome to.

grabbing an attribute in mootools: .[name] or .get or .retrieve or .getProperty?

mootools_logoSomething I ran into just now was returning an anchor’s attribute consistently across browsers. So I have an anchor with an address like ‘/users/delete/5/’ which does what you’d think it does. But I ran into an inconsistent return response in (you guessed it) ie6. In all fairness, it might not be IE6’s fault, but it speaks more to a problem with mootools. While it is a nearly perfect library/framework, this does bug me.

Mootools has 3 native methods for accessing an attribute/property for a node (which in the DOM, often overlaps). .get(’name’), .retrieve(’name’), and getProperty(’name’). While they are all meant to do things a little differently (eg. set an attribute for a node, store a data object in an existing object (which could be a DOM node) or store a property in an object (which again, could be a DOM node), they seem to overlap a lot.

So I have this anchor, and when I tried accessing it (grabbing the href) using the accessors I have, here at the results for FF (mac) vs. IE6 (windows):

.[name]
FF: full path including host
IE6: full path including host

.get
FF: request path (excluding host)
IE6: full path including host

.retrieve
FF: null
IE6: null

.getProperty
FF: request path (excluding host)
IE6: full path including host

Now it’s hard to say what is the correct expectation. I’m sure I could figure it out in the eyes of the W3C, but rather, here’s what I’ve noticed. Both browsers take whatever path is specified and render it internally with the host. I understand this since it’s what the browser would need to actually make a full request.

The 2nd and 4th accessors, though, are inconsistent and cause problems since their expected results different. IE6 includes the full path & host each time which is most likely an issue with how it accesses it. When the browser defines the href in memory it must overwrite the local pointer which then can’t be accessed properly.

So what do I do about this? Nothing really. I have this documented now so that if there is a pre-dom-ready source that I need to inspect (for example, href values written but no rendered after the dom has been loaded), I should be using the .[name] accessor, and make adjustments accordingly based on what is being accessed (in this case the href which has the host prepended).

These differences really suck since they introduce inconsistencies in places where you wouldn’t expect them and thus break applications/scripts (like what drove me to discover this). I would hope a framework/library would help mitigate this kind of thing, but alas, they can’t do everything, and I’m just happy for what they do bring to the table.