Archive for 10th May 2007

Today, I Converted My JavaScript Allegiance to MooTools

As none of you probably realize (I mean, who even reads my JavaScript posts), I am an avid fan of JavaScript. I think it’s an awesome language that is very underestimated. Even Joel likes it. Anyway, one of the big problems with JavaScript is its inconsistencies between browsers. The first popular pioneer into cross browser scripting was Prototype, an open source library full of tons of useful functions and enhancements to the JavaScript language. It was quickly followed up by an extremely popular open source effects library called Scriptaculous. I was never a fan of Scriptaculous because of its bloat, but I have remained a steadfast supporter of Prototype.

That is, until yesterday.

Yesterday, I discovered MooTools, an amazing open source library that has all of Prototype and Scriptaculous’ functionality, and then some. After thoroughly examining its features, size, ease of use, and extensibility, I have concluded it is my new JavaScript library of choice. Some of the highlights include:

  • A relatively similar naming scheme as Prototype, making porting a simple process for most scripts.
  • Functionality that matches all of Prototype’s core methods, including AJAX functionality, DOM manipulation, and browser compatibility fixes.
  • Really easy animation effects that give you an amazing amount of control (see below).
  • Very active developers (they actually respond to questions within a day!)
  • The compressed download is only 40kb (which is the one you’d be using).

I highly encourage web developers to check it out. There was a recent article on Slashdot that discussed some of the big libraries out there, but it completely omitted MooTools. Well, I have been looking for a few months now for a library to use for our application at work. I examined Scriptaculous, Yahoo UI, Dojo, jQuery, Open Rico, Mochikit, and various other small ones I came across. I stumbled for hours just looking for JavaScript libraries. At one time or another, I wrote something relatively advanced with each of these frameworks in an attempt to see how well the advanced functionality was designed.

  • Scriptaculous suffers from insane bloat and heavy reliance on Prototype, a completely separate project — this problem was highlighted when a recent fix in Prototype broke Scriptaculous unless you switched to their unfinished beta release. This is unacceptable.
  • Yahoo UI tends to require more lines of code to do the same things in other libraries. It is trying to do “everything at once.” It is also very bloated because it fragments itself across many files.
  • Dojo is just huge (150kb, compressed). That’s a negative.
  • jQuery is too fragmented, which actually hurts it in my eyes (others see it as really “customizable”) – it has way too many plugins that you can’t depend on since the developers working on them aren’t affiliated to the jQuery project. If you do too much advanced stuff, it can end up like Yahoo UI, except the fragments you are relying on are made by 40 different people, none of whom have any reason to help you.
  • Open Rico is awesome for simplifying AJAX, but fails in the visual effects department due to over simplification of the process and requiring too many changes to the HTML (see their accordion example). It is, however, a great introduction for AJAX developers, in my opinion.
  • Mochikit had a (barely) tolerable size (113kb, compressed), but I despise their coding standards (just look at their code sample variable names!) and I wasn’t happy about the complicity in using their library. It is not very beginner friendly, in my opinion. This is a deal breaker since I can’t ensure future maintainers of my code will be JavaScript experts.

The decision was clear: MooTools owned the rest.

On ease of use, it was the top due to its consistent naming conventions and predictable function behavior. Their methods all support “chaining“, which allows you to compress several complex lines of code into one, easier to read one.

What impressed me most for its ease of use was its animation methods. Take this simple snippet:

new Fx.Style($('some-element'), 'margin-left', {
  duration: 400,
  wait: false)
}).start(0, 100);

What’s that do? It takes the element called “some-element” and slides it 100 pixels to the right by changing the margin-left CSS property from 0 to 100 over a 400ms span. This might seem complicated to complete JavaScript beginners, but believe me when I say JavaScript animation literally doesn’t get simpler than this. I have shown you an extremely simple example, but with only another line or two, you can do stuff like this. Here’s an example of making something transparent:

new Fx.Style('popup-message', 'opacity').start(1,0);

Change the “0″ to a “0.5″ and the popup message only goes half way invisible before stopping. They’ve done an exceptional job keeping it relatively simple while still giving you full control over the effects (you can apply transitional algorithms too).

On AJAX, I was also impressed because they managed to keep it very simple, yet give you control of the process. For example, check out this amazingly simple AJAX code:

<form id="myForm" action="submit.php">
<input value="bob@bob.com" name="email">
<input value="90210" name="zip">
</form>
<script>
$('myForm').send();
</script>

That sends an AJAX request to submit.php. Of course, you could customize this and add in callbacks and cool loading images, but just the fact that you can do the entire AJAX request in one line like that is impressive.

They also have a ton of demos (my favorite one). Again, if you are considering a library for AJAX and visual effects, MooTools is by far the best one I have encountered.

Note: If you are looking for a library for only AJAX and not visual effects, MooTools can be downloaded in pieces, so it can fit your needs there as well. It also means later, if you change your mind, you can always download the visual libraries and not have to worry about compatibility issues.