LOADING

Type to search

JavaScript Frameworks Compared

WebUser Nov 11
Share

JavaScript Frameworks Compared

First off, if you are coding JavaScript, use a framework. You will never go back because all frameworks will help in some way. The frameworks serve more like libraries (instead of full-fledged “frameworks” as Rails for Ruby or CakePHP for PHP). For example, instead of coding the whole XMLHttpRequest thing, most frameworks will simplify to just one line, handling all the cross-browser troubles automatically. Also, many of them include neat visual effects and dynamic controls that you’ll find useful. Here’s my take on several of the most popular frameworks.

Prototype

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

Prototype extends the DOM so it adds many convenience methods, the most useful being $ and $$, which allow you to select elements by ID or CSS selectors, respectively. The framework is class-oriented so the different features are grouped into individual classes. The framework is very clean and focuses on convenience methods on making scripting a lot easier. Prototype makes AJAX requests very simple and easy to use and is probably one of the greater strengths of this framework. Also notable is its dealing with JSON (JavaScript Object Notation), an alternative to XML for AJAX requests.

script.aculo.us

script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.

Prototype itself does not deal with anything visual, including animations and controls. This is where script.aculo.us comes in, a visual framework built on top of Prototype to provide an array of effects and controls. script.aculo.us provides six core effects (Opacity, Scale, Morph, Move, Highlight, Parallel) and a bunch of built-in “Combination effects” that use these to achieve more complicated effects. There is also a big collection of user-contributed effects which will give you more options than other frameworks. script.aculo.us controls include Draggables, Droppables, Sortables, Slider, Autocompletion, and In Place Editing. Also noticeable are its Builder (a helper to build DOM fragments) and Unit Testing.

Prototype/script.aculo.us is already integrated into Ruby on Rails and CakePHP, which is one reason why it makes it such a popular choice. The framework documentation is wiki driven and the community is pretty active, which is always a plus.

jQuery

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

jQuery takes a different approach to extending the DOM and instead of being class oriented like Prototype is, jQuery provides the jQuery object, created using $, which is extended to provide all the jQuery functionality. An interesting feature of jQuery is its “chainability.” Since every call returns the queried object, you can link functions one after another, making many calls in one statement. jQuery also handles AJAX requests very nicely.

jQuery’s effects and controls are rather limited. There’s drag and drop, and sortables for controls but no autocompletion, which is featured in most other frameworks. However, this emphasizes the “lightweight footprint” of jQuery, being less than 20 kilobytes compressed. jQuery’s documentation is also a wiki and has an active user community. jQuery is very powerful and is a framework that should not be overlooked. Just check out this jQuery solar system and you can’t deny that’s pretty neat looking.

Yahoo! User Interface Library

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources.

YUI Library is a collection of separate components built on top of several core files to form a library. It is very flexible and you use only what you need to. Created by people at Yahoo!, this framework has the biggest name and its documentation shows it. There’s a cheat sheet for all the components and multiple demo examples. Also worth mentioning is that Yahoo! allows using the library files they host in your sites directly.

YUI is probably the most comprehensive of the JavaScript frameworks that I have looked at. The visual effects are somewhat limited compared to script.aculo.us but beyond that, YUI handles XHR, Browser History Manager, and more in addition to the basics the other frameworks offer. The controls of YUI also greatly surpass other frameworks. Some examples include AutoComplete, Button, Calendar, DataTable, Menu, Rich Text Editor, TabView, and more. YUI also has a collection of CSS Tools, that has many prebuilt CSS sheets (which I personally don’t find too useful). Everything is documented properly with numerous examples and cheat sheets.

As powerful as YUI is, I personally feel it is more complex than other frameworks in getting started. Not to say it is not easy to use, the code you write will tend to be a little longer than the code you write with the other frameworks. Think a little heavier.

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.

I have not used MooTools as much as the other frameworks. However, this framework stresses being “compact,” which is apparent by how you download the framework. You select the individual elements you want to download and the compression you want, giving you a file that is custom made to how you want to use it, nothing more and nothing less. MooTools takes a object-oriented class approach similar to Prototype and has a nice selection of built-in components. The Accordion plugin is worth mentioning. For a website where minor JavaScript is used for effects or controls, MooTools is definitely a reasonable choice.

Prototype/script.aculo.us is currently my current choice for JavaScript framework(s). It was very easy to get started and has great API documentation and the fact that it is already integrated into CakePHP told me to take a good look. However, I don’t use the built-in helpers because I feel I have more control directly using JavaScript (so this doesn’t make me partial in that regard!) I find all the JavaScript frameworks mentioned above powerful in their own ways.

There are a lot more frameworks out there that I have heard of but haven’t used yet. Here’s a list of some of them so you can check them out:

Ext JS
moo.fx
Rico
Qooxdoo
The Dojo Toolkit

Which one do you think is the best?

Leave a Comment

Your email address will not be published. Required fields are marked *