jQuery vs Mootools

For the past few years javascript libraries have dominated the market. Very rarely does a forward-facing website find itself running without the implementation of some sort of javascript library, whether that be jQuery or Mootools. These libraries make event interaction, manipulating the DOM, and ajax functions extremely easy.

First things First

Before you can make use of a library, you must first download the library (or see my other post for some cool tips). The jQuery library is available here, MooTools here, and Prototype here.

Round 1: Ready, Fight

Generally you want to run the libraries as compressed as possible (or running off of Google’s servers), and so that is what we are going to compare: compressed file sizes. Some people really don’t care much about this, but for those who do, this can be a breaking point.

• jQuery- Compressed weighs in at 54kb
• Mootools- YUI Compressed comes to 63kb

The libraries come in at just about the same weight when compressed

Round 2: DOM Manipulation

Here is the task- Select the 5th element in a list that has the id of “test-list”. Copy that list item and then append it to the end of the list. We are going to assume that the library has already been initialized ($(function(){});, ect).

Code Samples

// jQuery Demonstration
var fifth_item = $("#test-list li:nth-child(5)").html();
$("#test-list").append(fifth_item);

// Shorter, but less readable
$("#test-list").append($("#test-list li:nth-child(5)").html());

// MooTools Demonstration
var fifth_item = $("#test-list li:nth-child(5)");
var test_list = $("test-list");test_list.inject(fifth_item);

All three libraries make the DOM Manipulation simple. With these three it really comes down to comfort. Personally I am more comfortable with the jQuery way of simple DOM manipulation.

Round 3: Strings and Arrays

The mission is to loop over an array, filter out any requested items, and then append the array to another array.

var myArray = ["brandon","james","hansen","says","hello"];
// jQuery Demonstration
$.grep(function(item,index){
return (item != "brandon" &;&item != "hello");
});
myArray.append(["melissa","also","says","hello"]);

// MooTools Demonstration
myArray.filter(function(item,index){
return (item != "brandon" &;&item != "hello");
});
myArray.extend(["melissa","also","says","hello"]);

Round 4: Ajax

The mission is to, on demand, load a remote page and pass it a variable. The script must then return the result (or error) to the browser.

// jQuery Demonstration
$("#click-me").click(function(){
$.post("test.php", { lang: "jQuery", competition: "MooTools" },  function(data){
$("#result").append(data);
} );
return false;
});

// MooTools Demonstration
$('ajax-replace').addEvent('click', function(event) {
//prevent the page from changing
event.stop();
//make the ajax call, replace text
var req = new Request.HTML({
method: 'get',
url: $('ajax-replace').get('href'),
data: { "lang": "MooTools", "competition": "jQuery" },
onComplete: function(response) {
$('result').inject(response);
}
}).send()});

Round 5: Visual Effects

I am not even going to run much of a test here. jQuery wasn’t really designed for visual effects, although there are a host of plugins available which aid in the process. MooTools, on the other hand, ships with a large number of FX, such as tween, morph, and others. Both libraries make basics like fading in and out, showing and hiding, and sliding rather easy.

Round 6: Extending the Core

It is not in the scope of this article to teach you how to extend the libraries with custom plugins. However, I do want to show how each library implements plugins. jQuery uses the fn.extend() method to extend the core library. This allows plugins to essentially become part of the core architecture. MooTools takes a slightly different approach and really extends the library much the same way that PHP and other languages use classes to extend base classes.

Let’s do a quick example with a cool plugin (totally made up) called “dominate”.

// jQuery Demonstration
$("#world").click(function(){
$(this).dominate({
destroy : "body",
create : "p"
});
})

// MooTools Demonstration
$("world").addEvent('click',function(event){
var dominate = new Dominate({
destroy : "body",
create : "p"
});
});

As you can see implementation of extensions is pretty simple. The jQuery implementation, I would have to say, is a little bit smoother and more transparent. But many developers are probably a lot more comfortable with the MooTools implementation.

It’s A Draw

Both languages have their strengths and weaknesses. jQuery attempts to be a lot more transparent in its power. MooTools has a lot more visual flare. Both libraries have extremely large, passionate followings. It is hard to argue against either library. They are both very exceptional and handle small and large tasks effortlessly.

Alıntı: http://melissa-brandon.com/2009/02/jquery-vs-mootools/