MooTools for jQuery aka: moo4q

The Low-down

jQuery <3 the DOM

jQuery is awesome but it's scope is (generally) limited to the DOM. While the API is clear and simple to use, basing your entire application on it can lead to code that is difficult to maintain and dangerously bound to your document's HTML. Note that jQuery is not doing anything wrong, it simply isn't designed to help you organize your code outside of vanilla JavaScript.

Immutable Functions #ftl

You might write functions that are shared and even wrap them up into a plugin, but those are all immutable. When you need to do similar things you end up copying code and tweaking, and may end up with a mess. There's a better way.

Stateful Objects #ftw

JavaScript solves this problem with objects. Arrays are objects. An array object inherits a bunch of methods from it's prototype to help you work with the list. With JavaScript, you can create your own objects to use throughout your application that, like an array, inherit a bunch of stuff from their prototype. You can then create new objects that inherit from other objects. Then, when you find a bug in your application, simply fix the code in the offending object prototype and everything in your application that uses or depends on it is fixed. Same goes for new features: trick out the solitary object prototype and all of it's instances get an upgrade too.

JavaScript is an object oriented language believe it or not, but harnessing the power of prototypal inheritance is a little cumbersome. That's probably why so few people do it. You can certainly add mutable objects to a jQuery plugin, there's just no API for it. Enter MooTools.

MooTools <3 Objects

MooTools is not a library like jQuery, but rather an application framework. It's scope is all of JavaScript. Similarly to how jQuery makes the DOM cake to work with, parts of MooTools make working with objects huckleberry pie. It exposes the the prototypal inheritance of JavaScript through a beautiful object oriented API in a module called Class (with subclasses and mixins to boot.)

Moo4q Combines the Two Efficiently

Moo4q uses MooTools to fill in where jQuery leaves off. MooTools is modular and encourages users to only use the pieces they need. We only need a couple modules from MooTools, none of which contain any code relevant to working with Elements, Animation, or AJAX. Moo4q leaves that to jQuery. So there's little, if any, functional duplication. All said and done, the MooTools code is only 8k gzipped--diddly squat.

Moo4q <3 jQuery Syntax

Part of what makes moo4q so cool is a bit of code (the jQuery mutator) that automagically turns your MooTools Class into a jQuery plugin, making your objects accessible through familiar jQuery syntax. It follows jQuery patterns for setting and getting values, instantiating stuff, and chaining. Of course, you can still use your classes as regular JavaScript objects if you prefer, up to you. Check out the tutorial or download a copy today.

Sample Code

A Useless Person Class




Some real examples

Check out some real demos over here and the tutorial here.

The cool kids are saying: