Popular JavaScript Framework Libraries: Prototype, script.aculo.us, and MooTools | WebReference

Popular JavaScript Framework Libraries: Prototype, script.aculo.us, and MooTools

By Rob Gravelle


[next]

Overview of Popular JavaScript Frameworks

The Web 2.0 that we know today arose from the ashes of the dotcom meltdown. "The Ajax moment," as some called it, ushered in a new age of interactivity and a richer Web browsing experience. To assist in creating a more dynamic Web, Javascript Framework libraries have not only proliferated, but have become an integral part of Web development. The downside? Choosing from all the excellent choices can be a daunting task. No one wants to find out after the fact that another script library would have been better suited to their needs. This series will present an overview of the most popular dozen JavaScript Frameworks to help you make a more informed decision. This week's article will focus on Prototype, script.aculo.us and MooTools.

The Prototype Framework

URL: http://www.prototypejs.org/
Blog: http://www.prototypejs.org/blog
Docs: http://www.prototypejs.org/learn

Prototype is a class-oriented Framework that's easy (for people familiar with OOP concepts) to use. It has taken center stage as the most popular of all the JavaScript Frameworks. Prototype feels like a natural, object-oriented extension to JavaScript itself. Taking a class-oriented approach allows for both subclassing and inheritance, and makes the Prototype Framework highly extensible.

Each area of functionality is conveniently modularized into separate class entities. Here are the main ones:

DOM Extensions

Probably the most useful DOM utility methods are the $() and $$() functions. The former provides a handy alias for document.getElementById() and lets you pass indifferently IDs (strings) or DOM node references to functions. The $$() function returns a document-order array of elements matching a CSS selector. It can also be used at the element level using the Element.getElementsBySelector( cssRule ) syntax.

Class Creation and Inheritance

Prototype's powerful Class.create() method allows you to define a class, initialize it, and inherit from a superclass. To define a base class, you would pass an object literal that contains the class methods. Properties are created in a special function called initialize(). The Class.create() method also accepts an optional class as the first argument so you can assign it as the superclass. Here's an example taken from the Prototype.org Web site:

Ajax Calls

Anyone who's ever worked with Ajax knows that a lot of the code is redundant and potentially reusable. Prototype's Ajax class allows you to get down to the business of performing the call without having to create and manage a cross-browser Ajax object. The Ajax XMLHttpRequest object is represented by the transport variable. Requests are made by creating instances of the Ajax.Request object:

The Ajax.Request object accepts two parameters: the URL of the request and a hash object which can contain a number of options. The method option above refers to the HTTP method to be used; the default method is POST. The onSuccess and onFailure options specify the function code to execute based on the outcome of the call.

You can also pass parameters to your server-side script using the parameters option. Prototype has a handy function for sending the contents of a form called [form field].serialize(). Using this function requires only one line of code to send all your form data:

You can register callbacks that will fire on a certain state of any Ajax.Request issued using Ajax.Responders. Globally tracking requests can be useful in many ways, including logging them for debugging purposes using a JavaScript logger or making a global exception handler that informs the users of a possible connection problem:

Using an Ajax.Updater to update parts of the document with dynamically loaded HTML fragments is a snap! Just call the Updater with the container element that you want to fill with HTML returned from an Ajax response and Prototype will update the container with the response using the Element.update() method:

JSON Utilities

JSON Encoding

Prototype offers two ways to encode your data in JSON format. If you're not sure what type the data you need to encode is, the Object.toJSON( data ) can handle any data type; if you know the data type and if your data is not an instance of Object, you can invoke its specific toJSON() instance method instead:

You can override the Object.toJSON() method in your own classes by including the code in your class's prototype:

Parsing JSON

Prototype's String.evalJSON() function is used to evaluate the content of a JSON string. It takes an optional sanitize parameter, which, if set to true, checks the string for possible malicious attempts, prevents the evaluation, and throws a SyntaxError if one is detected. The following example uses the String.evalJSON() function with the sanitize parameter to parse an Ajax request's responseText. For added security, the request is told to only accept JSON data from the server:

Prototype is the Framework of choice for most developers for a reason. It's well written and versatile. I personally find it very easy to work with because of how well it follows OOP conventions. For a more in-depth look at the Prototype Framework, take a look at my latest WebReference article.


[next]