MooTools

MooTools

Developer(s)	The MooTools Dev Team
Stable release	1.3 / October 11, 2010; 13 months ago (2010-10-11)
Written in	JavaScript
Type	Ajax framework / JavaScript Framework
License	MIT License
Website	http://mootools.net

MooTools (My Object-Oriented Tools)^[1] is a lightweight, object-oriented, web-application framework for JavaScript, written in JavaScript. It is released under the free, open-source MIT License.^[2] It is used on more than 5% of all websites, and is one of the most popular JavaScript libraries.^[3]

History

Valerio Proietti first authored the framework and released it in September 2006^[4] taking as his inspiration Prototype and Dean Edward's base2. MooTools originated from Moo.fx, a popular plug-in Proietti produced for Prototype in October 2005,^[5] which is still maintained and used.

Whereas Prototype extended—prototyped—many of JavaScript's native String, Array, and Function objects with additional methods, Proietti desired a framework that (at the time)^[6] further extended the native Element object as well^[4] to offer greater control of the Document Object Model (DOM).^[7]

Components

MooTools includes a number of components, but not all need to be loaded for each application. Some of the component categories are:

• Core: A collection of utility functions that all the other components require.^[8]
• More: An official collection of add-ons that extend the Core and provide enhanced functionality.^[9]
• Class: The base library for Class object instantiation.^[10]
• Natives: A collection of JavaScript Native Object enhancements. The Natives add functionality, compatibility, and new methods that simplify coding.
• Element: Contains a large number of enhancements and compatibility standardization to the HTML Element object.^[11]
• Fx: An advanced effects-API to animate page elements.^[12]
• Request: Includes XHR interface, Cookie, JSON, and HTML retrieval-specific tools for developers to exploit.^[13]
• Window: Provides a cross-browser interface to client-specific information, such as the dimensions of the window.^[14]

Browser compatibility

MooTools is compatible and tested with:^[15]

• Safari 3+
• Internet Explorer 6+
• Mozilla Firefox 2+
• Opera 9+
• Chrome 4+

Benefits

MooTools provides the user with a number of advantages over native JavaScript. These include:

• An extensible and modular framework allowing developers to choose their own customized combination of components.^[16]
• MooTools follows object-oriented practices and the DRY principle.^[17]
• An advanced effects component, with optimized transitions such as easing equations used by many Flash developers.^[18]
• Enhancements to the DOM, enabling developers to easily add, modify, select, and delete DOM elements. Storing and retrieving information with Element storage is also supported.^[19]

The framework includes built-in functions for manipulation of CSS, DOM elements, native JavaScript objects, Ajax requests, DOM effects, and more. MooTools also provides a detailed, coherent application programming interface (API)^[20] as well as a custom downloads module allowing developers to download only the modules and dependencies they need for a particular app.^[21][22]

Emphasis on modularity and reusability

Every JavaScript framework has its philosophy, and MooTools is interested in taking full advantage of the flexibility and power of JavaScript in a way that emphasizes greater modularity and code reuse. MooTools accomplishes these goals in a way that is intuitive to a developer coming from a class-based inheritance language like Java with the MooTools Class object.

Class is an object of key/value pairs that can contain either properties or methods (functions). Class is effortlessly mixed and extended with other Class instantiations allowing for the greatest focus of MooTools: Code reuse achieved through maximizing the power of JavaScript's prototypical inheritance, but in a Class object syntax more familiar to classical inheritance models.^[23]

Object-oriented programming

MooTools contains a robust Class creation and inheritance system that resembles most classically based Object-oriented programming languages. For example, the following is MooTools' equivalent of the examples in Wikipedia's polymorphism page:

var Animal = new Class({
 
    initialize: function(name) {
        this.name = name;
    }
 
});
 
var Cat = new Class({
    Extends: Animal,
 
    talk: function() {
        return 'Meow!';
    }
 
});
 
var Dog = new Class({
 
    Extends: Animal,
 
    talk: function() {
        return 'Arf! Arf';
    }
 
});
 
var animals = {
    a: new Cat('Missy'),
    b: new Cat('Mr. Bojangles'),
    c: new Dog('Lassie')
};
 
Object.each(animals, function(animal) {
    alert(animal.name + ': ' + animal.talk());
});
 
// alerts the following:
//
// Missy: Meow!
// Mr. Bojangles: Meow!
// Lassie: Arf! Arf!

See also

Free software portal

• Moo.fx
• Ajax framework
• Rich Internet application
• Web 2.0
• Comparison of JavaScript frameworks
• XMLHttpRequest

References

1. ^ MooTools at FOSDEM slides
2. ^ The Official MooTools Website
3. ^ Usage of JavaScript libraries for websites
4. ^ ^{a b} Newton, Aaron (September 18, 2008). MooTools Essentials: The Official MooTools Reference for JavaScript™ and Ajax Development (1st ed.). Apress. pp. xvi. ISBN 1430209836. http://apress.com/book/view/1430209836. 
5. ^ Newton, Aaron (September 18, 2008). MooTools Essentials: The Official MooTools Reference for JavaScript™ and Ajax Development (1st ed.). Apress. pp. xv. ISBN 1430209836. http://apress.com/book/view/1430209836. 
6. ^ Version 1.6.1 of Prototype includes "an element metadata storage system." Prototype 1.6.1 released by Sam Stephenson, written September 1st, 2009. Retrieved March 21, 2010.
7. ^ Note that MooTools does not extend the native Object—all JavaScript primitives like String and Function inherit from it—but instead provides a convenient Hash for the purpose: Think of it like having a set of utility methods that allow for nearly effortless object manipulation of regular JavaScript objects that are otherwise unaffected by the process. (Newton, Aaron (September 18, 2008). MooTools Essentials: The Official MooTools Reference for JavaScript™ and Ajax Development (1st ed.). Apress. pp. xvi. ISBN 1430209836. http://apress.com/book/view/1430209836. )
8. ^ MooTools Core
9. ^ MooTools More
10. ^ MooTools Class
11. ^ MooTools Element
12. ^ MooTools Fx Class
13. ^ MooTools Request Class
14. ^ In addition to getting the size for any Element, you can easily get the dimensions of the window
15. ^ MooTools lists its compatibility on its homepage.
16. ^ MooTools' Core Download Page
17. ^ MooTools Class Object
18. ^ MooTools' Effects (FX) Class
19. ^ MooTools' Element Class - A comprehensive list of Element manipulation methods.
20. ^ ,A Better Way to Use Elements
21. ^ MooTools Core Builder
22. ^ MooTools More Builder
23. ^ jQuery versus Mootools

Further reading

• Orchard, Leslie M.; Pehlivanian, Ara; Koon, Scott; Jones, Harley (August 31, 2009). Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools (1st ed.). Wrox Press. p. 888. ISBN 978-0470384596. http://www.wrox.com/WileyCDA/WroxTitle/Professional-JavaScript-Frameworks-Prototype-YUI-ExtJS-Dojo-and-MooTools.productCd-047038459X.html. 
• Newton, Aaron (September 18, 2008). MooTools Essentials: The Official MooTools Reference for JavaScript™ and Ajax Development (1st ed.). Apress. p. 300. ISBN 1430209836. http://apress.com/book/view/1430209836. 

External links

• mootools.net Official website
• The Official MooTools User Group
• Mootools Examples