Elaina Polson

Musings of a Beginner Programmer

Exploring jQuery Alternatives

It’s hard to believe I wrote my first line of JavaScript code less than two weeks ago. Now, just days after learning the fundamentals of the language, we’ve jumped right into learning how to use JavaScript to interact with the DOM and alter the content displayed on web pages.

If you wanted to, you could traverse and manipulate the DOM with plain old vanilla JavaScript, but doing so can cause some issues with browser inconsistencies. Some older browsers may respond differently to certain vanilla JavaScript code. For this reason, most developers choose to use a library that extends the functionality of JavaScript, makes it easier to interact with the DOM, and offers cross-browser compatability.

In class, we’ve been using the library that most developers use for this purpose, and the most popular and widely used JavaScript library in the world: jQuery. jQuery is a cross-platform (meaning it works on all browsers) JavaScript library that simplifies the act of navigating a document, selecting DOM elements, creating animations, handling events, and developing AJAX applications.

“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.”

(jQuery documentation)

Some of my favorite days at Flatiron so far have been spent working on the jQuery and AJAX labs. I’ve found it thrilling to select and manipulate DOM elements so simply and conveniently. It got me wondering what other JavaScript libraries exist, and what kind of functionality they provide.

After some Googling, I discovered that there are many alternatives to jQuery and there is some debate in the developing world over which library is optimal. Here are a few alternatives to jQuery I found particularly interesting, with a specific focus on one of jQuery’s biggest rivals, MooTools.

MooTools

“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.” (MooTools documentation)

I quickly discovered that the largest dispute involving JavaScript libraries is the jQuery vs. MooTools debate. So what exactly are the differences between these two libraries, and how do you choose which one to use? I’ll explain.

MooTools, or My Object-Oriented Tools, is a popular object-oriented JavaScript framework. With MooTools, you can accomplish all of the things you can accomplish with jQuery, but with a different syntax and approach. Just like jQuery, MooTools allows developers to interact with the DOM, animate elements, and build powerful Ajax applications. But the most interesting difference between the two libraries is their inheritance models.

MooTools extends the functionality of JavaScript to allow for an object-oriented approach to traversing and manipulating the DOM, whereas jQuery doesn’t really deal with inheritance at all.

So what does all of that mean? First, let’s quickly review how objects are created and used in JavaScript. Pure object-oriented languages are class-based, meaning that objects are instances of classes. In JavaScript, objects inherit directly from other objects. So, when you try to access a property of an object that inherits from another object, JavaScript will look for the property on the child object, and if it doesn’t find it there, it will look on the parent object. This makes JavaScript a prototype-based language.

MooTools aims to make JavaScript more closely resemble a class-based language by supplying developers with a Class constructor. Proponents of the library say that this makes the prototypal inheritance model of JavaScript easier to use, and most importantly, makes it easy to define patterns and reuse code later in your application.

Let’s take a closer look at how this works. To make a class in MooTools, you pass an object to the Class constructor. That object then becomes the prototype for every instance of the class. Here’s how we would create a new Animal class that initializes each animal with an age.

1
2
3
4
5
var Animal = new Class({
    initialize: function(age){
        this.age = age;
    }
});

So now we have an Animal class. But what if we want to create a new version of an animal that has additional properties? We can use the “Extends” functionality of MooTools to create a subclass that has access to all of the properties and functionality of the parent object, Animal, but won’t affect the base class at all.

1
2
3
4
5
6
7
8
var Cat = new Class({
    Extends: Animal,
    initialize: function(name, age){
        // calls initialize method of Animal class
        this.parent(age);
        this.name = name;
    }
});

Now we can create a new instance of a cat that will have the properties name (from the base class, Animal) and age (from the subclass, Cat).

1
2
3
var myCat = new Cat('Micia', 20);
alert(myCat.name); // alerts 'Micia'.
alert(myCat.age); // alerts 20.

As you can see, this code reads more like a pure object-oriented programming language.

This approach makes reusing code easy in MooTools. Anytime you want to define a pattern, you can use these Class constructors. jQuery on the other hand, does not give you a system for extending instances into subclasses.

So now that we understand the primary difference between the two libraries, how can we conclude which one to use?

If your goal is solely to interact with the DOM quickly and easily, jQuery is likely all you need. It’s simple to use and very effective, which explains why thousands of programmers swear by it and it is present on millions of webpages. The large and active community means it’s easy to find great support and documentation.

But if you love object-oriented programming, and think that JavaScript’s prototypal inheritance model is frustrating and cumbersome, MooTools might be for you. MooTools utility goes beyond just manipulating the DOM; rather, the library aims to extend the functionality of JavaScript and make it more closely resemble a pure object-oriented programming language. As Aaron Newton (a MooTools contributor and author of a great blog post on the subject) poignantly says:

“Rather than focusing exclusively on the DOM, MooTools takes into its scope the entire language…If jQuery makes the DOM your playground, MooTools aims to make JavaScript your playground.”

When it comes down to it, MooTools and jQuery can be used in different ways to achieve entirely different things. You should decide which library to use based on what tasks you are trying to accomplish – and if you like some aspects of both, there’s no reason why you cannot use both libraries. After all, you’re a developer – you have endless tools at your disposable to utilize how you please.

Other Alternatives

The following libraries are similar to MooTools in that they aim to extend the functionality of the JavaScript language beyond basic interaction with the DOM.

Dojo Toolkit

“Dojo saves you time, delivers powerful performance, and scales with your development process. It’s the toolkit experienced developers turn to for building superior desktop and mobile web experiences.” (Dojo documentation)

Dojo is a much larger library than jQuery. Like MooTools, it offers solutions for object-oriented programming. It also provides a large collection of user-interface widgets. It is often criticized for its incomplete and unorganized documentation.

Prototype

“Prototype takes the complexity out of client-side web programming. Built to solve real-world problems, it adds useful extensions to the browser scripting environment and provides elegant APIs around the clumsy interfaces of Ajax and the Document Object Model.” (Prototype documentation)

Prototype is similar to Dojo and MooTools in that it also supports a class-based inheritance model. One of the largest complaints about Prototype is in regards to namespace pollution. According to JScripters.com, “Prototype adds several top-level names to the JavaScript global namespace, and adds numerous new methods to built-in JavaScript classes. There is a potential for namespace collision, either with other JavaScript libraries or with new JavaScript features.”

Another interesting note is that early versions of Rails shipped with Prototype as the default JavaScript library. Since Rails version 3.1, jQuery has been the default JavaScript library.

Ext JS

“The most comprehensive JavaScript framework for building feature-rich cross-platform web applications targeting desktop, tablets, and smartphones. Ext JS leverages HTML5 features on modern browsers while maintaining compatibility and functionality for legacy browsers.” (Ext JS documentation)

Like the aforementioned libraries, Ext JS provides a class-based system. Ext JS is similar to Dojo in that it provides a comprehensive collection of customizable UI widgets, as well as charting and grid packages that allow you to visually represent data in a number of ways. Ext JS is commercially licensed, meaning it comes at a price.

Sources:

Definitely read Aaron Newton’s post jQuery vs MooTools for a much more detailed analysis of the two libraries: http://www.jqueryvsmootools.com

JScripter.com on Popular jQuery Alternatives: http://www.jscripters.com/popular-jquery-alternatives/