CSS Animations and MooTools

Today on Ajaxian I stumbled across an interesting post in regards to CSS animations via MooTools. WebKit’s CSS animations are pretty cool, but not compatible with all browsers. This little script seems to work pretty nicely with most of the browsers. Well, it works wonderfully in Safari, but is a bit buggy in Firefox. It just does a bit of a jump in Firefox, but overall - runs great. You can view Chris’s example here and view the JavaScript here.

I found it really interesting when I read over the article and instantly thought - can I do that with jQuery? We’ll have to see…
∂ meow


Tags: , ,

MooTools vs. jQuery

Which library is better?

There has been much hype over the different JavaScript libraries such as Dojo, jQuery, MooTools, Prototype and Yahoo. I’d like to focus on MooTools and jQuery as those are the two libraries I have been personally debating as of recently.

As you may already know, I am fairly new to the world of JavaScript and just recently started using jQuery. Just a couple weeks ago, I wrote my first reactions/review of jQuery and here I am today comparing it head to head with MooTools.

After much analyzing here is what I’ve come up with.

jQuery is really easy to use and learn. After just a day of playing with it, I learned all kinds of things and quickly caught onto the structure of its syntax. The syntax for jQuery is very simple, easy to understand, quite short and the chain-ability is really sweet. On top of all of that, the documentation and tutorials are phenomenal.

After researching and experimenting with MooTools, I must say that the first thing I noticed is the slightly bulky and less friendly syntax. However, MooTools seems to be great for Object-Oriented Programming and it is very smooth with it’s animations - almost a Flash-like feel. I thoroughly enjoyed their demo page when I first visited the MooTools website.

The MooTools documentation is pretty good as well, but their website did lack in tutorials. That must be largely because MooTools is marketing itself toward the intermediate and advanced JavaScript developer. But what about the beginners or the not quite intermediate developers that are eager to learn? A few tutorials wouldn’t hurt, especially, since there seems to be much complaint about the MooTools community and lack of support for the simple-easy questions that someone learning might ask.

After running a SpeedTest found on MooTools website, I found that there is very insignificant difference in the speed of MooTools vs. jQuery and it varies quite a bit from browser to browser and platform to platform. If one takes all of the results into account, overall, MooTools is a bit faster than jQuery. But what is a few milliseconds? Does that really matter?

So where is the hold up and which should you choose?

This got me contemplating on which library would really be the better way to go. I think that is totally up the the individual’s preference and the project at hand. If a few milliseconds and smoother animation really matter to you, then MooTools is the way to go.

Personally, I’m loving the ease and friendliness of jQuery and do not care too much for the slight difference in smoothness of the animation. However, if a project comes along and MooTools seems to be a better fit, then that is what I will use; but by default, I’m staying loyal to jQuery.

It is good to know or at least have a good grasp of both of these libraries, and even some of the other ones, as you never know what you might encounter with a future project or employer. By knowing or at least being familiar with several of these libraries, you’ll be in a better position to judge and decide which is more fitting for individual projects and you.

In quick summary:


jQuery:
Concise syntax
Great documentation and tutorials
Easy to learn, even for beginners
Nice plugin architecture


MooTools:
Better for OOP
Smooth animations
More advanced - harder for beginners
Overall faster

∂ meow


Tags: , , ,