FANDOM


OverviewEdit

Mootools

Official Site: mootools.net
Writeup Authors: Robert Travis and Brian Eggleston

Mootools is a powerful and lightweight Javascript framework. It provides developers with a set of tools which is modular, cross-browser, and object oriented. The Mootools framework is separated into a group of libraries which provide basic functionality, and a set of plug-ins which leverage the libraries to create rich user interactions (such as sliding and dragging effects).

Javascript frameworks generally have two advantages. The first is factoring out the code for common tasks, thereby saving the programmer from having to repeat herself in her own code. The second and perhaps biggest advantage of Javascript frameworks is that they abstract away browser compatibility issues. The framework takes care of making sure that the correct Javascript is executed for current browser. Web designers don't need to worry about special casing for every browser which may visit their page. This is especially helpful in the creation of AJAX requests, which have radically different syntax depending on which browser the code is running in.

Basic LibrariesEdit

CoreEdit

The core libraries are built around the theme of making routine tasks in Javascript simpler, such as copying and/or merging object dictionaries together, and converting them to arrays. There are also functions for quickly getting timestamps and random variables. All of these common tasks require a fair amount of code using basic Javascript. For example, to generate a random integer between x and y in traditional Javascript, you would have to write:

 var result = Math.floor(Math.random() * (y - x + 1)) + x

whereas with Mootools you could simply write:

 var result = $random(x, y)

The core libraries also supply simple methods of obtaining browser information about a user. Although this information is available through the navigator object, obfuscation and differing conventions make the task of detecting browser and operating system incredibly difficult. In order to hard code all the rules necessary, this script took over 110 lines! However, because of incompatibilities, it is often important for a developer to know what browser and/or operating system a user has in order to display the page properly. Mootools has simple boolean values; for example, if

 Browser.Platform.trident //True if the browser uses the IE trident engine
 Browser.Platform.win     //True if the platform is Windows

are both true, the developer knows his user is running Internet Explorer on a Windows machine.

NativeEdit

The native libraries provide extended functionality for basic types (Array, Function, Number, String, Event), either adding to class prototypes or developing some new basic classes (Hash). For example, the Mootools String library provides extensive regular expression matching functionality, along with methods for converting between RGB color values and strings. The Function library provides exceptional support for generating closures with given parameters, variables, and even allows the developer to bind the this variable within the context of closure. The Hash class provides basic hash map functionality for a set of key-value pairs.

ClassEdit

One of the key features of Mootools is its emphasis on object-oriented development. The Class libraries give developers tools for mimicking the inheritance schemes seen in languages such as Java. A class is created from an object dictionary which contains keywords such as Extends along with their values, or method names along with their methods. For example, we could write:

 var Animal = new Class({
   initialize: function(feet) {
     this.feet = feet;
   }
 });
 var Horse = new Class({
   Extends: Animal,
   initialize: function(color) {
     this.parent(4);
     this.color = color;
   },
   setName: function(name) {
     this.name = name;
   }
 });
 var myAnimal = new Horse("Brown");
 myAnimal.setName("Mr Ed");
 alert(myAnimal.name); // Alerts "Mr Ed"

Extends provides access to a parent object, similar to other object-oriented programming languages. We can also create a class using Implements instead of Extends, which will just copy the methods supplied in the named class directly into the current class. One unique aspect of implements, is that we can also dynamically implement methods at run-time using the implement Class method, so we could tack on a setName method to an existing Person Class using the following code:

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

The implement Class method thus allows us to modify existing classes on-the-fly, including built in Javascript "classes" like Arrays and Objects.

ElementEdit

The Element libraries provide functionality for traversing and modifying the Document Object Model (DOM). The functionality here is in many ways just a way of compacting and standardizing the Javascript associated with using the DOM. These libraries offer the shorthand dollar ($) method for looking up items by id. The Mootools Element class also extends the existing DOM Element in order to offer additional functionality. One nice feature of Mootools is that it is relatively easy to modify the DOM. For example, we could write:

 var node = $('myNode'); //Equivalent to document.getItemById('myNode');
 var e1 = new Element('div', {id: 'myDiv'});
 node.inject(div, 'top');

Which would find the tag with id "myNode" and append a new div named "myDiv" as its first item.

UtilitiesEdit

The Utilities libraries contain functionality to make some everyday web-page coding easier. Two of the libraries provide increased support for working with the DOM, one defining a DomReady event that is fired when the DOM has finished loading, and another for browsing elements and their children more easily. This second library provides methods such as contains and nth-child to more easily traverse child elements. The utilities libraries provide full Javascript Object Notation support for serializing and deserializing Javascript objects. There is also a Cookie library for quickly and painlessly dealing with Javascript cookies, and a Swiff library for creating simple Flash objects.

FxEdit

The Fx libraries allow developers to create animation effects in their webpages by dynamically adjusting CSS properties. The basic effect is a Tween which transitions an item to a new CSS property value over a period of time. For example, we could change a link's color style from red to blue using:

 var myFx = new Fx.Tween(myLinkElement);
 // adjust the color style from red (#f00) to blue (#00f)
 myFx.start('color', '#f00', '#00f);

The Morph class allows developers to adjust more than one property at once, and the Transition class allows users to specify how evenly to transition from the starting value to the end value (for example, we could get exponentially closer to the end style rather than linearly progressing to it).

RequestEdit

The request library serves as a nice object- and event-based set of AJAX tools. The basic process for issuing a request begins with the creation of a new Request object and setting that object's options (such as the request URL) via an object dictionary. The next step is registering a set of handlers for events that may occur on the Request (such receiving a successful response, or failing). The final step is actually sending the request. The libraries include support for generating raw HTTP requests as well as HTML and JSON requests (which will automatically encode and decode Javascript objects as Strings).

Plug-ins LibraryEdit

In the Plug-ins library we begin to see some component-oriented design. The Plug-ins library contains a series of components that encapsulate different kinds of functionality for DOM elements, all built on top of the functionality from the core libraries. For instance, the accordion component (shown in the example below) actually encapsulates the functionality of allowing different sections to expand and collapse automatically as the user clicks on different sections.

As explained below, the Accordion component is created by passing in the elements that should be made clickable, and the elements that should expand and collapse in response to user clicks. The component returned can then be used in the webpage, and the details of how the expansions and collapses happen are completely hidden from the users of the component.

ExampleEdit

A simple web page using MooTools can be found at Class Demo.

This page was built using the following code:

 window.addEvent('domready', function() {
   var slider = new Fx.Slide('accordion', {mode : 'horizontal', duration : 'long'}).hide();
   
   show = true;
   $('showHide').addEvent('click', function() {
     $('showHide').empty().appendText(show = !show ? 'Show' : 'Hide');
     slider.toggle();
   });
   
   new Accordion($('accordion'), 'h3.toggler', 'div.element', { opacity : true });
 }

Notice that the very first line of code creates an event handler on the window. This is a programming pattern in MooTools that ensures that the javascript doesn't get executed until the DOM is completely constructed. The true body of the code occurs inside this event handler.

The first line:

 var slider = new Fx.Slide('accordion', {mode : 'horizontal', duration : 'long'}).hide();

tells the MooTools framework to find the 'accordion' element (the element is found by id) and create a slider from it, using the given properties. Calling the hide() method on the newly created slider immediately tells the slider to start hidden.

The second line:

 $('showHide').addEvent('click', function() {
   $('showHide').empty().appendText(show = !show ? 'Show' : 'Hide');
   slider.toggle();
 });

adds an event handler to the 'showHide' link at the top of the page that does two things:

  1. It toggles the text of the link between 'Show' and 'Hide'.
  2. It tells the slider object to toggle its display.

These two method calls are enough to create all of the functionality of making the content of the 'accordion' div slide on and off the screen when the link is clicked.

Finally, the third line:

 new Accordion($('accordion'), 'h3.toggler', 'div.element', { opacity : true });

creates the accordion functionality. The first parameter tells MooTools what element to make the accordion out of (in this case, the same div that slides on and off screen). The second parameter is a selector that specifies the elements that should trigger the accordion actions when clicked. The third parameter is a selector that specifies which elements should be shown and hidden when the toggler elements are clicked. Notice that MooTools is able to recognize CSS style selectors in order to find elements. Finally, the last parameter specifies the options to use (in this case, we're telling the accordion to apply an opacity effect to fade content in and out as the divs are appearing and disappearing).

This interactivity in this example would require a huge number of lines of code if written from scratch in javascript. However, using the MooTools framework, the example can be created with only three method calls.

What makes Mootools unique?Edit

Mootools is similar to other Javascript frameworks like JQuery, Prototype, Dojo, and YUI in terms of the functionality it offers to users. However, Mootools shines in that it is lightweight, modular, and object-oriented.

LightweightEdit

Because Javascript code must be loaded for every page, a large Javascript library can significantly increase the file size, and therefore the load time, of any given web page. Therefore, several Javascript frameworks have attempted to make themselves as small as possible while still providing a useful suite of functionality (chief among these Mootools and jQuery). For example, the size of several of the major frameworks are as follows:

Size (Uncompressed) in kB:
Mootools: 95.7 kB
JQuery: 97.8 kB
Prototype: 126 kB
Dojo (core): 270 kB

Note that the Dojo framework size can be given a little leeway, as it is extensively commented, even more so than the other frameworks. Mootools and JQuery can both be compressed with gzip to roughly 15kB (Dojo weighs in around 26kB in comparison). The decompression involves a fair amount of work on the client-side, though, and so it is not always better to send the compressed version rather than the uncompressed one.

Web pages are generally around the order of tens to possibly hundreds of kB, so the difference in Javascript file size can make a significant difference. Mootools is also faster at interacting with the DOM than Prototype and YUI, and on a general par with the jQuery and Dojo. You can see the results of a speed test here.

ModularEdit

Frameworks are generally packaged as a single Javascript file that is included in the web page. This means that frameworks are included as “all-or-nothing." To get any of the functionality in a framework you have to use the full-sized framework, every single kB of it. Some frameworks attempt to alleviate this sizing issue by separating themselves into different packages, each of which can be included separately. Dojo, for example, includes three different packages: core, dijit, and dojoX. A developer can use the core Dojo functionality by including the core package, without having to include the other packages. Mootools is unique in the fact that it takes an even finer grained approach. Mootools consists of various “Libraries,” or cohesive pieces of functionality. A developer can choose exactly which of these libraries he wants, and then create a customized Javascript file containing only this subset of Mootools functionality.

For an example of how much difference a modular, lightweight framework can make, consider the Mootools-based Slimbox, a clone of the Prototype/Scriptaculous-based Lightbox 2.0. Lightbox 2.0 is 186kB, compared with Slimbox, which is only 51kB. The largest difference is the sheer combined size of the Prototype and Scriptaculous libraries: 163kB. But also, the author of Slimbox managed to shrink down the size of the Mootools framework to only 45kB by eliminating libraries he didn't need. That’s only 47% of the size of the entire Mootools framework!

Object-OrientedEdit

One major point of difference between jQuery and Mootools, which seem to be duking it out for supremacy recently, is the focus of the two frameworks. Mootools focuses on creating object-oriented code for large-scale development. We can see this in the implementation of the Class libraries, which include advanced functionality for creating classes, extending them, and adding additional functionality via the implement Class method. In contrast, jQuery focuses primarily on creating a rich and simple syntax for interacting with documents.

Analysis of MootoolsEdit

BenefitsEdit

Mootools offers a framework to developers which is compact, customizable, and fast. It also allows users to program in a much more object-oriented fashion than core Javascript does. Although this doesn't necessarily make Javascript more powerful (since the prototyping mechanism allows for very similar constructs), it does mean that programmers can use many of the same design patterns that they are used to from other object-oriented languages. This means less overhead for the developer in terms of learning the prototyping mechanism, as well as a more direct relationship between Javascript code and code written in truly object-oriented languages.

The MooTools framework's plugins allow web designers to add fairly advanced interactive functionality to their websites with minimal effort. As the example shows, creating an interactive element like a content-accordion can be done with a single line of code. This simplicity makes the developer's life much easier. However, it should be noted that these plugins are not significantly different from what you might find in other Javascript libraries, so this is not a benefit that is unique to MooTools, but rather a general advantage of using Javascript libraries.

DrawbacksEdit

The drawbacks of MooTools generally fall into two categories:

  1. The drawbacks of MooTools relative to other Javascript libraries
  2. The drawbacks of Javascript libraries in general

MooTools-Specific DrawbacksEdit

MooTools is a great example of a framework where a task only takes 1-2 lines of code, but figuring out what those lines of code should be can take a long time. This is because the framework takes a fairly non-intuitive approach to adding functionality to an object. Consider the following code snippet:

 var myEffect = new Fx.Morph('myElement', {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
 
 myEffect.start({
   'height': [10, 100], //Morphs the 'height' style from 10px to 100px.
   'width': [900, 300]  //Morphs the 'width' style from 900px to 300px.
 });


We create a new Fx.Morph object from some element, and give it properties about how the transition should happen. When we call start on the transition, we pass in the parameters of what the transition should actually do. It's not necessarily very clear why the length of the transition should be an inherent part of the Morph object, but the styles that the transition is operating on are just an incidental parameter to its start method. It's also not clear why a Morph object needs to be created and started, rather than just calling some method on the element itself that tells it to morph. This lack of intuitive structure makes the learning curve for using MooTools fairly steep.

Another example of the lack of intuitive structure is in how MooTools adds functionality to elements. For instance, take the example above, where we create an accordion from a set of divs:

 new Accordion($('accordion'), 'h3.toggler', 'div.element', { opacity : true });

The most intuitive thing for the call to new Accordion() to do would be to return an actual accordion object that could then be added to the DOM. However, in this case, the actual Accordion object isn't used at all. Instead, the constructor has the side-effect of adding accordion functionality to an element that already exists in the DOM. This is not the most intuitive object-oriented code.

Javascript Library DrawbacksEdit

Other drawbacks of MooTools become clear when you consider the current role of Javascript libraries and frameworks in web pages. Fundamentally, they are used in websites to increase their interactivity. However, MooTools requires at least some general knowledge of a document's HTML structure in order to properly function (e.g. for referencing elements of the page). This is fine if you're serving up a static site where you have control over the exact HTML that is handed to the browser. But as web pages become increasingly complex and dynamic, it becomes harder and harder to guarantee their specific HTML structure.

Server-side web development frameworks are increasingly allowing developers to provide only rough specifications for web pages, with the frameworks themselves taking care of HTML generation. As developers author less and less HTML content themselves, and frameworks on the server side generate more and more, it becomes increasingly difficult to integrate MooTools (or any other Javascript library) into a website. In order for MooTools to be useful, server-side frameworks will have to provide hooks that make it possible for MooTools' Javascript to either interact nicely with the HTML produced by the framework, or access the server-side content itself.

However, even if the server-side frameworks provide these hooks, the question becomes: if the framework is taking care of rendering the HTML for the page, why must the programmer be responsible for explicitly writing its functionality? Why can't the programmer simply describe the desired functionality of the page on the server-side, along with the desired layout of the page? Why not just let the framework take care of generating both the HTML and the Javascript? This would be a model similar to the current desktop model (and is being somewhat approximated by newer frameworks such as Cappuccino). It is very probable that as frameworks like these become more prevalent, Javascript libraries and frameworks in general will become obsolete.

MooToolsCow

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.