According to Aaron Newton of Clientcide, this is not the question to be asking.

And I happen to agree with him.

These two frameworks just aren’t trying to do the same things. They overlap in the functionality they provide, but they are not trying to do the same things

Opposite Directions

MooTools is aimed more at JavaScript developers, while jQuery is more for people who want to implement JavaScript functionality in the easiest possible way.

jQuery is for people who aren’t necessarily interested in delving deep into JavaScript while MooTools provides an object-oriented framework for hardcore JavaScript development. This is why most people find MooTools harder to use in comparison to jQuery.

jQuery makes working with the DOM easier. MooTools makes working with all of the JavaScript language – not just the DOM – easier.

Both are fantastic libraries/frameworks and I think the better question for you to ask is

Which one should I use for this project

This can be determined by circumstances beyond your control e.g. The project leadership has already selected a framework for you, or the application development framework you are developing on is already using one over the other – and you may wish to avoid bloating-up your application with multiple libraries and increasing load times (not to mention script conflicts).

Different Camps

Here’s an example of what the world’s most popular PHP content frameworks have chosen:

Drupal - jQuery
WordPress - jQuery
Joomla – MooTools

I work in each of these environments and I recommend to anyone doing the same to view jQuery and MooTools as tools – not competitors. You might simple prefer the one over the other, at the end of the day they are just JavaScript; and there’s a right one (tool) for the job at hand.

The Real Thing

I also recommend learning pure JavaScript. It’ll give you a better understanding of what’s going on under the bonnet and you’ll find it easier to work with other JavaScript abstraction libraries. I’ve found my copy of JavaScript Bible – 6th Edition to be quite a handy mate for occasional reference.

How do you see this debate?

/* Update */

Aaron Newton authored the book:
MooTools Essentials: The Official MooTools Reference for JavaScript™ and Ajax Development

Read the full jQuery vs MooTools comparison  here

Before you fans of JavaScript libraries (e.g. jQuery, MooTools, Prototype/scriptaculous, etc.) form a mob and beat me to death with your coffee mugs, let me quickly state that I am a BIG fan of JS libraries. They make life much easier in most programming scenarios, BUT…

Sometimes using them for smaller JavaScript tasks and effects is simply overkill. It does not justify the loading of a whole library of 30/40/or 60kB just to use a small portion of it, especially for client-side effects.

Case in point: I wanted to add the text resizer tools to my blog posts as you see on the right hand side and I started to determine the best solution to achieve this.

I like using jQuery for its elegance and simplicity but I find myself using MooTools a lot because it accommodates the use of classic JavaScript without complaining. It also keeps things simple for me since I also code in ActionScript, so the differences are not that varied.

I started coding the text resizer code in MooTools speak as following:

window.addEvent('domready', function(){
   var currentSize = 12;

   $('increase').addEvent('click', function(){
       sizeUp();
    });

     $('decrease').addEvent('click', function(){
        sizeDown();
     });

     $('txtreset').addEvent('click', function(){
        resetCurrentsize();
     });
});

function getCurrentsize() {
   return currentSize;
}

function setCurrentsize(newsize) {
  currentSize = newsize;
  if (document.getElementById) {
  	$("resizeableText").setStyle('font-size', currentSize+'px');
  }
}

function resetCurrentsize(){
  currentSize = 12;
  if (document.getElementById) {
  	$("resizeableText").setStyle('font-size', currentSize+'px');
  }
}

function sizeUp(){
  if (document.getElementById) {
    if (currentSize != 14){
      currentSize++;
      $("resizeableText").setStyle('font-size', currentSize+'px');
    }
  }
}

function sizeDown(){
  if (document.getElementById) {
    if (currentSize != 11){
     currentSize = currentSize - 1;
     $("resizeableText").setStyle('font-size', currentSize+'px');
    }
  }
}

On top of that I needed to load the MooTools library and I wasn’t happy with the additional footprint this implies, so I set about refactoring my code to being plain old JavaScript with no additional library to load.

Here’s how it turned out:

/* **************************************************************
 *  Text-resizing script
 *  Plain JS. No Mootools, jQuery, Prototype, or any of that bulk
 *
 *  Copyright (c) 2008-2009 Figo Mago. All rights reserved.
 *
 *  Released under the GPL license
 *  http://www.opensource.org/licenses/gpl-license.php
 *  Use this script as you wish, but please leave the notice intact
 *
 * Author: Sifiso Khumalo a.k.a figomago
 * Author URI: http://figo.tandolin.co.za/
 * **************************************************************/
var currentSize = 12;
    el = document.getElementById("resizeableText");

function getCurrentsize(){
  return currentSize;
}

function setCurrentsize(newsize){
  currentSize = newsize;
  if (document.getElementById) {
    el.style.cssText = "font-size:"+currentSize+"px";
  }
}

function resetCurrentsize(){
  currentSize = 12;
  if (typeof(preDefaultSize) != "undefined") {
    currentSize = preDefaultSize;
  }
  if (document.getElementById) {
    el.style.cssText = "font-size:"+currentSize+"px";
  }
}

function sizeUp(){
  if (document.getElementById) {
    if (currentSize != 14){
      currentSize++;
      el.style.cssText = "font-size:"+currentSize+"px";
    }
  }
}

function sizeDown(){
  if (document.getElementById) {
    if (currentSize != 11){
      currentSize = currentSize - 1;
      el.style.cssText = "font-size:"+currentSize+"px";
    }
  }
}

(For some strange reason using “currentSize–;” in the code display messes up the front page display on this blog. Substituting the longer version “currentSize = currentSize – 1;” fixes that. Either version should work fine in your code)

The only downside is the addition of adding “onClick()=appropriateFunction();” to your tags, which I can happily live with.

That’s all the JS code needed to run the text resizer on this blog. Only 1.3kb in single-line function format. I think this re-emphasises the point of using the right tools for the job at hand.

That’s quite a lot in footprint savings, wouldn’t you say?
What similar scenarios have you encountered that did not not warrant using a JS framework?

I was in a bit of a hurry so I was lazy to convert the whole text resizer bit into a WordPress plugin. I you would like the full code for the text resizer with instructions to add it to your blog, just give me a shout.