Mootools – One more Javascript framework

Some time back, i had written a post on few good User Interface Frameworks. If you are a web developer and have a understanding of javascript, here is one more interesting post.

Last few days, i was evaluating few javascript frameworks available on web which are free and open for developers. It was my finding that, each one of them targets a different kind of audience and is good in something compared to other. Jquery no doubt is one of the best available Javascript framework today in market. But, there is one more javascript framework called "Mootools" which infact made me to believe that Jquery is not the only best framework available.

I am a big fan of Jquery but nothing stopped me to see what Mootools had to offer.

By definition from the site,
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer.

It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

What can you do with this framework?

• Do access, traverse html elements, types, browser functionality and requests.
• Do use the Util functions, write your addons.
• Do provide effects and animations to your elements and pages.
• Do more than what you were doing earlier with any other framework!

Browser Compatibility

MooTools is compatible and fully tested with Safari 3+, Internet Explorer 6+, Firefox 2+ (and browsers based on gecko), Opera 9+, and Chrome 4+.

Website : http://mootools.net/
Demos : http://mootools.net/demos/
Documentation : http://mootools.net/docs/core

I do not want to teach you Mootools. The website does it all.

Now, you would say
"Well, all the above can be achieved through Jquery. Why do i need one more framework and when should i use it"
Believe me, there is nothing to debate. Let us compare

By Definition
JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer.

Thats not all. But it is clear enough right?

The takeaway from above definitions are

• 
  Jquery is for rapid web development. (Simple and Easy for anyone).
• 
  Jquery is made for html document traversing, handling events ,animations and ajax.
• 
  Mootools is powerful.
• 
  Mootools is for intermediate to advanced developer.
• 
  Mootools has well documented API.

Based on the 3rd and 4th points above, you can decide on which to use in your application.

Still Not Clear Enuf? Lets see some more things

• 
  Jquery is a bit less sized say by 10-15 kb compared to mootools
• 
  Jquery has more plugins in this world
• 
  Jquery is more popular & has a big community
• 
  Jquery has a official UI library but mootools doesn't.
• 
  Jquery is fast and easy to learn

By now, you are sure that Jquery has an edge over mootools.
Hold on.. There are few things Mootools has.

jQuery doesn't focus on things outside of the DOM. But mootools does.
Jquery is for people who have developed a style of "get a element in html and do something". The scope is limited to DOM. What it means is, being a programmer, when you use Jquery, DOM (Document Object Model) is the scope or playground. But, if you are using mootools, the whole javascript is the playground!

Wow, there is a reason now for people to use Mootools. Isnt it? Some more..

Jquery doesn't address inheritance clearly. Mootools does. Remember, that is why by definition Mootools is more object oriented.

Mootools focuses on both DOM and Entire javascript. You can do in mootools what you do in jquery and and and.. much more what jquery cannot do. That's the point. May be, when it comes to the DOM, jquery has more utility/helper methods than Mootools.

Let us take a function of Jquery
[sourcecode language="JAVASCRIPT"]
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
alert('mouse entered');
},
function() {
alert('mouse taken out');
});
});
[/sourcecode]
and when we to translate this to MooTools, we'd have:
[sourcecode language="JAVASCRIPT"]
window.addEvent('domready',function() {
$$('#orderedlist li:last-child').addEvents({
mouseenter: function() {
alert('mouse entered');
},
mouseleave: function() {
alert('mouse taken out');
}
});
});
[/sourcecode]
I agree that mootools take a bit more lines of code. But observe that, this improves readability.
Which is more readable now? (Hover or Mouseenter/Mouseleave? )

In Mootools also, you can use chaining patterns, do animations, extend the inbuilt classes and what not...

Finally, the conclusion is

Use Jquery if
you are not a javascript expert
you have very less time to do things
you want to see the things happening easily more than doing it

Use Mootools if
You have good knowledge of javascript
You can invest a good deal of time learning Mootools and do extraordinary.
You have to go out of DOM.

After all, javascript was not invented only to work with DOM. So many languages came and went, so many technologies came and ran. But the king of scripting known as "Javascript" is there from decades and is expected to be the future. Isn't it?

Will keep posting more on JS frameworks, Happy coding :)