2007 / January 5^th/ MooTools: review

A little while ago Valerio Proietti took the little moo.fx that could and spun it off into the full-blown MooTools Javascript framework. The framework is still in its infancy (almost 1.0!), but already has a good following as well as a unique approach unlike that of prototype, script.aculo.us, jQuery or YUI. MooTools is lightweight, feature-packed, prototype-esque and extremely modular.

Overall Impressions

Overall, I love the code of MooTools. It’s extremely well documented, semantic and well formatted. Classes are generally small with many small methods. The framework was written modularly — so the framework is split into a dozen or so files of functionality with a clean dependancy chart to map dependencies.

Inheritance

Inheritance has long been a pain in the side of Object-Oriented Javascript developers. Prototype tried hard with it’s initial offering of Object.prototype.extend, but ultimately fell back to the ugly Object.extend that’s created a bit of madness. However, MooTools uses a spinoff of Dean Edward’s Base.js. This fixes access to overridden methods and supports a nice clean syntax:

var Animal = new Class({
  initialize: function(){
    console.log("Hi, I'm an animal!");
  }
});
// new Animal() ==> Hi, I'm an animal!

var Dog = Animal.extend({
  initialize: function(){
    this.parent();
    console.log("Woof!");
  }
})
// new Dog() ==> Hi, I'm an animal! Woof!

This somewhat minor change in syntax has great impact on the fluidity of the framework code as well as any scripts based off of it. The main benefit of this is an order of magnitude more DRY-ness in your classes.

Modularity & small code bases

Although I’m personally not one to care about file sizes, it’s nice to know that the MooTools team takes this into consideration. MooTools in its entirety weighs in at a lean 28kb (compressed) at it’s largest size. But remember, everything in MooTools is split up into lean little modules that can be included or left out; if all you need are simple DOM functions like $ and $$, you can grab everything that Dom.js depends on and only end up with 12kb. I like this approach since it allows the framework to grow while remaining lean.

Effects

Given that MooTools rose from the glory of moo.fx, it’s understandable that MooTools has an excellent lightweight yet powerful effect library. Fx.js is the answer to this, and implements a real framework for effects rather than just one-offs like script.aculo.us (though, there are a number of one-offs in Fxpack.js).

Fx.Style allows you to change any CSS-style over time. This means you can easily make a quick little effect that changes your margin-left from 0 to 100px over 1/2 a second:

var effect = new Fx.Style(element, 'margin-left', {duration:500});
effect.custom(0, 100);

I really like this approach a lot more, and allows for true custom effects with ease. There’s also a couple dozen transitions in Fxtransitions.js to suit your easing needs.

The end result of this effect framework are lightweight, non-processor-intensive smooth effects. The syntax and usage is a lot different from how script.aculo.us uses it (effects are toggled in MoTools, not toggled on instance creation).

Cookies

Finally! A prototype-like framework with a built-in Cookie class. I know it’s minor, but it’s nice to see.

Documentation

Out of all the frameworks out there, I like MooTools’ documentation best. It’s the prettiest, the easiest to read, and the most concise. Unfortunately, they’re still lacking some good examples — but I’m sure that’ll come soon enough. Also, they get bonus points for using bbPress for the forums. Overall, MooTools seems very serious and professional when compared to other framework’s sites. And those sliding tabs are just way too cool.

A few complaints

Every framework has flaws, and MooTools is no exception.

Syntax

One of the things I don’t like about MooTools is the new syntax for otherwise extremely similar functions. For instance, in MooTools we have Element.addClass as opposed to prototype’s Element.addClassName. Little changes like this are thrown around the library, meaning you have to learn a whole new DSL to not throw syntax errors every few minutes. Now I understand that there are aliases for Element.addClassName — but it’s not the same. It changes the style of plugins & resulting codebases. There’s just not a whole lot of need to change meaningless things like this. It’s the same reason I really don’t like using milliseconds for effect durations.

DOM Traversing

Another feature that I think it’s definitely lacking is the use of DOM traversing functions that prototype has. The brilliant implementation of Element.up, Element.down and the like have become saviors to me in the past few months. I absolutely love them. I’d love to see these find their way into Dom.js.

Not quite bug-free

I’ve been using MooTools since it came out, and it’s definitely had it’s rough patches. The bottom line is that the framework just isn’t as road-tested as veterans like YUI, Prototype, and Scriptaculous. I’m sure things will iron out over time, but right now it can be the source of some rather frustrating bugs along the way.

Conclusion

While there are some minor downsides to MooTools, I would definitely recommend checking it out. It’s MIT-licensed, so no need to worry about cost. It’s a really good approach to Javascript code, and if anything a great learning exercise in writing OO Javascript. I’ll be using it on my upcoming redesign, as well as a couple of other projects. I even have one major use of it in a sweet drag, drop & compare app from work that should be going live soon, but alas, NDAs and such disallow me from disclosing it. I was planning on adding some goodies for MooTools to this post, but they’ll have to come later. This post has gotten a little too long already.

Edit: Jonathan Snook has come up with a great cheat sheet for MooTools. Definitately check it out.

1. 

   Thame

   January 5^th | #

   Wow, dom.js looks incredibly helpful. I’ll have to see if we can start using it at work!

2. 

   Noah Winecoff

   January 5^th | #

   Very sexy download page.

3. 

   Matt Puchlerz

   January 5^th | #

   We’ve been using MooTools where I work for a while now, and have found it to be the best out there, despite the occasional bug or two you might run across. Of course those are always easy to override. There are quite a few up-and-coming personal projects that will be fully utilizing it as well. A+

4. 

   Ekonoline » Around the Nine #4

   January 8^th | #

   [...] Warpspire: MooTools: Review [...]

5. 

   Nir Tayeb

   January 15^th | #

   I Agree, mootools is the best framework. I liked the way they implement things.

6. 

   Sebastian

   May 6^th | #

   Yes this is the best framework tool ever…

   thanks

7. 

   chingis

   June 19^th | #

   very interesting framework. will trying to use it in next project against protoculous

8. 

   Thomas Zauberer

   July 18^th | #

   Hi,
   very helpful java scripts, thanks and keep on doing

9. 

   TIMBaER

   August 21^st | #

   Hi

   I search everytime for Tools for Webdesign. This Tool is a very interesting framework. So I will try it to use it in next project.

   Greets

10. 

    udo

    August 30^th | #

    Wow.
    moo.fx is open source.
    Cool effects for some of my next pages.

    Thanks.

11. 

    AlexeyGfi

    September 2^nd | #

    Hi!

    This framework cool!

12. 

    owl

    September 18^th | #

    A very good framework tool!

13. 

    NBA

    September 19^th | #

    keep up the your great work.
    thank you…

14. 

    Kevin

    September 20 | #

    Very helpful java scripts, thanks and keep on doing.
    Thanks.

15. 

    Dentallabor

    September 20 | #

    This is a cool framework tool.
    Thank you for this Tip.

16. 

    Alonzo Mourning

    September 20 | #

    very interesting framework. will trying to use it in next project against protoculous
    thanks…

17. 

    Adsense

    September 23^rd | #

    Great site ! I really enjoyed reading all of your posts.
    It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more.
    So please keep up the great work.
    Greetings…

18. 

    fitness

    October 3^rd | #

    For me it works very good.
    Mootools is one of the best frameworks.

19. 

    zack

    October 4^th | #

    agreed… mootools only now and forever. (well… until the world ends in fire and the internet no longer exists.)

    blessings…

20. 

    Skischule

    October 4^th | #

    the effects are very great man, thanks for it

21. 

    Wellnesshotel

    October 4^th | #

    thanks, this are the effects what i have search.

22. 

    fitness

    October 9^th | #

    The good modules and the size of the modules makes it one of my favorite frameworks.

    MooTools was just i was looking for!

23. 

    Handball

    October 17^th | #

    nice article and comments found on this page, greetings seduction amog mystery

24. 

    Miami Heat

    December 11^th | #

    This tool is a very interesting framework.I will try it to use it in now project.Thanks dude.

25. 

    sohbet

    December 12^th | #

    great work thanks

26. 

    cowboy pictures

    December 12^th | #

    This tool is a very interesting

27. 

    Enya

    December 27^th | #

    The good modules and the size of the modules makes it one of my favorite frameworks.

28. 

    Galatasaray

    January 8^th | #

    thanks dude, this are the effects what i have search.

29. 

    partyband

    January 10^th | #

    perfect Work thanks

30. 

    Kykladen

    February 6^th | #

    I have tested a lot of frameworks and MooTools is now one of my favorite ones.
    i am very good in javascript and so its easy for me to use MooTools

31. 

    griechenland

    February 6^th | #

    I used mootools with succsesss in a project and i think i will use it for other projects too, because it is so easy to use.

32. 

    denizli web tasar?m

    September 18^th | #

    thank you for work.

33. 

    denizli web tasarim

    September 18^th | #

    thank you

34. 

    Around the Nine #4 at BrianGilham.com

    October 29^th | #

    [...] Warpspire: MooTools: Review [...]

35. 

    NBA

    May 24^th | #

    Thanks Men!

36. 

    Daniel

    June 28^th | #

    It´s good, that the code ist documented so well. That´s very important and many programmers tend to skip that work.

37. 

    ChinaTravel

    July 20 | #

    nice blog i like this skin

Name

Email (will not be published)

Website (optional)