MooTools is an open source JavaScript library released under the MIT license that allows you to build your web application entirely in JavaScript with support for Internet Explorer 6+, FireFox 2+ and Safari 3+.

The library has a modular structure consisting of the following core modules:

• Types
• Class management
• Browser Interaction
• DOM
• Effects
• Networking
• MooTools Plugins

Along with these core modules additional modules can be added in the form of plugins.

Types

MooTools adds extra functionality to the types already defined in JavaScript using extensions known as 'types'. Array, String, Number, Function and Object all have had extensions added by MooTools. Alongside adding extensions to existing JavaScript types MooTools has adds a new type called Event.

For a full list of functions added by MooTools types see the online documentation.

 

Class Management

MooTools adds two special properties Extends and Implements. Extends simulates inheritance and Implements simulates composition.

Extends:

var Animal = new Class({ 
    initialize: function(age){ 
        this.age = age; 
    } 
}); 

var Dog = new Class({ 
    Extends: Animal, 
    initialize: function(name, age){ 
        this.parent(age); 
        this.name = name; 
    } 
}); 

var snoopy = new Dog('Snoopy', 20); 
alert(myCat.name); 
alert(myCat.age);

Implements:

var Animal = new Class({ 
    initialize: function(age){ 
        this.age = age; 
    } 
}); 

var Cat = new Class({ 
    Implements: Animal, 
    setName: function(name){ 
        this.name = name 
    } 
}); 

var myAnimal = new Cat(20); 
myAnimal.setName('Micia'); 
alert(myAnimal.name);

 

The problem with using Implements like this is that you still end up with two distinct classes. However MooTools provides a Class Method 'implement' that allows you to append the new functionality to an existing class.

var Animal = new Class({ 
    initialize: function(age){ 
        this.age = age; 
    }
}); 

Animal.implement({ 
    setName: function(name){ 
        this.name = name; 
    } 
}); 

var myAnimal = new Animal(20); 
myAnimal.setName('Micia'); 

alert(myAnimal.name);

 

Browser Interaction

MooTools provides a Browser object that contains a number of properties that return Boolean values. For example you can check if the current browser is FireFox with the following code.

alert(Browser.firefox);

Along with checking the browser you can also check the platform, if specific plugins are present and the presence of features like support for DOM queries using XPath.

 

DOM

MooTools has similar abilities to jQuery when it comes to selecting elements. MooTools uses the document.id("messageBar") this is aliased with the $ function much like jQuery (just remember using $ when you're using other JavaScript frameworks could cause in unpredictable results). The returned element is of type Element as defined in MooTools. If you wish to select multiple elements MooTools provides the $$ function that returns an array of Element instances.

The ability to manipulate the DOM is essential for an JavaScript framework and MooTools provides a number of methods to facilitate this. For example the inject method lets you inject another element into the body of a selected element.

Hand in hand with DOM manipulation is event handling and like other frameworks MooTools provides a mechanism to handle events in a browser independent manner. The addEvents method can be used to attach multiple event handlers to a single element as follows:

$('someElement').addEvents({
    mouseover: function(){
        alert('mouseover');
    },
    click: function(){
        alert('click');
    }
});

 

Effects

MooTools provides Fx types that facilitate special effects these include Fx.Tween, Fx.Morph and Fx.Transition.

 

Fx.Tween

This can be used to transition any CSS property from one value to another. This example shows how an element is selected and a Tween is created and applied to the element in an event handler.

var elm = $('myElement');
 
var myFx = new Fx.Tween(elm, {
    duration: 'long',
    property: 'background-color'
});
 
 
elm.addEvent('click', function(event){
    myFx.start('#ffffff', '#ff0000');
});

 

Fx.Morph

Similar to Tween Morph allows for the animation of multiple CSS properties at once. In the example below the background colour is changed along with the size of the font.

var elm = $('myElement');
 
 var myEffect = new Fx.Morph(elm, {
    duration: 'long',
    transition: Fx.Transitions.Sine.easeOut
});

elm.addEvent('click', function(event){
 
    myEffect.start({
      'background-color': ['#fff', '#f00'],
      'font-size': [10, 30]
    });
});

 

Fx.Transition

By default transitions are linear meaning that the transition will linearly move through all values terminating at the specified end value for the CSS property. However MooTools also offers alternatives to simple linear transitions which are all defined in the Fx.Transition type.

One point worth noting is that the Fx types support chaining therefore you can use this to create more complex animations.

 

Networking

MooTools provides the Request class that wraps the browsers implementation of XmlHttpRequest so that you are abstracted from browser specific issues when dealing with XmlHttpRequest. You simply create an instance of the Request specifying values for a number of options such as the URL. There are various options available that allow you to specify the method used to make the request, encoding schemes etc, for a full list see the documentation. Some of these properties can be used to define events that should be called in relation to the Request such as the onSuccess property.

There are two classes that extend Request, Request.HTML and Request.JSON. These classes are intended to make life easier when calling services that return HTML and JSON data. They both include the update property that specifies the Id of the element that should be updated in response to the request.

The last class worth mentioning in relation to requests is Request.JSONP. This class makes it easy to make cross-domain calls when using MooTools.

 

MooTools Plugins

MooTools plugins are classes that have been written by core MooTools developers or members of the community to add functionality to the core library. These plugins are called 'MooTools More' and can be downloaded from the official site http://mootools.net/more. The More Builder avaliable at this site allows you to select the plugins you would like to use on your site and it will conveniently bundle these with all required dependencies ensuring that the plugins will work when added to your site. Once you have downloaded the plugins you wish to use you must include them in the correct order:

1. MooTools Core Library
2. MooTools More Library
3. Your MooTools script

You can learn more about MooTools More at http://mootools.net/docs/more.

 

Summary

So the big question is how does MooTools fit in with existing JavaScript frameworks such as jQuery. Well jQuery is more adapt at DOM and UI manipulation. However a framework such as MooTools offers better features in terms of actual JavaScript programming for example the features I mentioned that add more object-orientated features to JavaScript via MooTools. So while you'll probably stick with jQuery for the majority of client-side coding I think you should keep an eye on other frameworks such as MooTools as this will give you more power when you need to write actual JavaScript code and it's easy to combine these frameworks in your application.