Mootools - Classy Fun

On my journey of AJAX discovery a week ago, I came across Mootools. “MOOTOOLS??” I hear you cry, “but thats been out for ages!” It has been out a while now, but they seem to have greatly improved the included functionality and cut down on the package size. You can even customize the package for download directly from their site, so you only get the features you need. You only need to have a quick browse around the demo page to get a feel for the endless possibilities available at your fingertips.

MooTools is a compact, modular, Object-Oriented JavaScript framework.

Previously, I used script.aculo.us, but have since found it to be a fairly large and cumbersome package. It tends to slow IE down a considerable amount, which you definitely don’t want if you’re trying to convert one time visitors. I’ve worked with it for a while now and it seems outdated and has in the past been extremely hard to extend.

Back to the point of this article, I wanted to discuss JavaScript classes. JavaScript isn’t the best when it comes to trying to apply Object Orientated techniques, but Mootools helps by improving the JavaScript concept of classes and help cut out a lot of the fuss.

For those of you new to OO in JavaScript but familiar to standard function practice, classes were originally achieved through crude coding methods, as shown below.

function Dog(name, age) 
{
    this.name = name;
    this.age = age;
}
 
function bark() 
{
    with (this) {
        alert('My name is' + name + ' and I am ' + age + ' years old.');
    }
}
 
var fido = new Dog('Fido', 4);
fido.bark();
// ==> "My name is Fido and I am 4 years old."
 
var rowdy = new Dog('Rowdy', 5);
rowdy.bark();
// ==> "My name is Rowdy and I am 5 years old."

This example combines objects, properties and class methods in ways only JavaScript knows how. There are many ways to achieve the above in JavaScript but unfortunately, none make any significant leaps forward.

This is where Mootools steps in. This is a framework, designed by many skilled developers which streamlines OO techniques. The new method implemented through Mootools, is a familiar and better structured programming approach than many others. It is extremely extensible and thus provides many other possibilities as explained after the Mootools class example below.

var Dog = new Class({
    options: {
        age: 4
    },
    initialize: function(name, options){
        this.setOptions(options)
        this.name = name;
    },
    bark: function(){
        alert("My name is " + this.name + " and I am " + this.options.age + " years old.");
    }
});
 
Dog.implement(new Options);
 
var fido = new Dog('Fido');
ollie.bark();
// ==> "My name is Fido and I am 4 years old."
 
var rowdy = new Dog('Rowdy', { age: 5 });
rowdy.bark();
// ==> "My name is Rowdy and I am 5 years old."

This is only the beginning of the magic, since Mootools has many other features, such as events; which can instantly be used once the class implementations are set.

One website in particular explains this all very well, so it’s pointless trying to regurgitate the basics for you. I highly recommend you head over to Warpspire to check out the tutorial before reading my next article.

Just a quick note to end this off. When trying this out for yourself, you will find the Mootools documentation very handy. As they say in the office, RTFM!