- // Posted on Apr 21, 2008 by
Danny
-
Comments (24)
After four days of ASP.NET AJAX training with Stephen Walther I set out to learn more about my options in choosing a solution for a JavaScript/Ajax framework. If I realized days later I would be writing this comprehensive post on 7 of the most popular frameworks, I may have just went with the "Inny-Minny-Miney-Moe" method! I decided to share my research, analysis, links, resources, and personal grade for each of the frameworks compared - jQuery, YUI, Prototype, Dojo, MooTools, Ext JS, and Script.aculo.us. I put together a comparison matrix to illustrate where many of the frameworks differ. I did not spend a great deal of time comparing features side-by-side simply because most complete frameworks offer very similar functionality (perhaps another post? :P).
>> jQuery
http://jquery.com
Current Version: 1.2.3
Download Size: 94.5 KB
Grade: 9/10
"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's framework is based on the jQuery object that extends the DOM, as opposed to taking a class-oriented approach (provided using the $ operator). The "Magic of jQuery" stems for the chainability of method calls, much like C#. Each method in this framework returns the base jQuery object, allowing you to access functionality in a chained fashion. One particularly nice feature of jQuery is the ease by which Ajax calls can be made. Examples of simple callbacks can be found at http://docs.jquery.com/How_jQuery_Works#Callbacks_and_Functions.
You will notice in the comparison chart provided in this post that jQuery is one of the only JavaScript frameworks built using an Official Plug-In Architecture that allows easy extension. One reason I believe this is a strong framework choice is the myriad of extensions (framework, widgets, and UI controls) that are available through the jQuery community. Their well-designed API/documentation and live examples reflect the maturity of this framework. A variety of google groups are also in place of standard forums.
Highlighted Extensions/Controls/Widgets
>> Yahoo! UI Library
http://developer.yahoo.com/yui/
Current Version: 2.5.1
Download Size: 49.7 - ? KB
Grade: 8.5/10
"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 Yahoo! UI Library is a very complete collection of controls, animations, and utilities, though it tends to be a little "heavier" than most of the frameworks. All the controls are based on a few core scripts - Yahoo Global Object, DOM Collection, and Event Utility. While the learning curve for the YUI Library is a little steeper than most frameworks, you only need to include the features you are utilizing. This library is a stable, mature option with many advanced tools not commonly found in many lightweight frameworks such as a logging control, testing utilities, and browser profiling.
The extensive documentation and live examples (complete with full code) depict the strength of the framework. Yahoo groups are also available for troubleshooting and discussion topics. Handy cheat sheets are also available for download to get you rolling with YUI.
Highlighted Extensions/Controls/Widgets
>> Dojo Toolkit
http://dojotoolkit.org
Current Version: 1.1
Download Size: 75 - ? KB
Grade: 7.5/10
"Dojo is an Open Source DHTML toolkit written in JavaScript. It builds on several contributed code bases (nWidgets, Burstlib, f(m)), which is why we refer to it sometimes as a "unified" toolkit. Dojo aims to solve some long-standing historical problems with DHTML which prevented mass adoption of dynamic web application development."
The Dojo Toolkit is a stand-alone solution that offers the comparable Ajax (including JSON support), Event, CSS, and animation features in the core implementation. The flexibility of this framework allows the addition of several optional modules like support for unit testing, debugging, and much more. It may not be as mature as jQuery or Prototype, but the Dojo toolkit is a powerful library. Provided extension libraries Digit and DojoX offer many advanced controls and features for creating widgets, data display and manipulation, theming, and more.
The demos on the official Dojo Toolkit site are disappointing. Most useful demos exist on external sites provided by project contributors, which is a bit of a deterrent. The API could also use a little work to make it more complete. It is good to note that this is one of the only solutions that offers professional training besides Ext JS.
Highlighted Extensions/Controls/Widgets
>> Prototype
http://prototypejs.org/
Current Version: 1.6.0.2
Download Size: 124 KB
Grade: 7/10
"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 takes a class-oriented approach to extending the DOM and makes those extensions available in a variety of ways ($ and $$ operators being the most common). The library is very simple to use since it is conveniently modularized into separate class entities. Ajax implementations are very straightforward and can support JSON formats. A strong focus on extensibility via subclassing and inheritance is the backbone of this framework's flexibility.
My biggest gripes around this framework are the lack live examples and discussion avenues, as well as the lack of UI features without the inclusion of Script.aculo.us. I could see handing out a grade of 7.5/8 had those aspects of the framework been stronger.
Highlighted Extensions/Controls/Widgets
>> Ext JS
http://extjs.com
Current Version: 2.1
Download Size: 510 KB
Grade: 8.5/10
"Ext JS is a cross-browser JavaScript library for building rich internet applications that includes high performance and customizable UI widgets, a well designed and extensible Component model, and an intuitive, easy to use API."
Those familiar with the Yahoo! UI Library will recognize Ext JS as it was previously an extension framework solely for YUI, however it now support jQuery, Prototype, and it's own library as the base component. Ext JS is a relatively new, and impressive, option in the JavaScript framework realm. Their website recently underwent a dramatic renovation and offers a really well-designed set of samples, but falls short with it's web-based code samples. All sample code will need to be downloaded - a minor inconvenience.
Coolite Studio recently announced a collection of ASP.NET controls based on Ext JS that are definitely worth a few minutes of your time. I also really like that their online API is built using their framework - neat!
>> MooTools
http://mootools.net
Current Version: 1.1
Download Size: 9 - ? KB
Grade: 6.5/10
"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 is another recent addition to this rapidly growing space. The framework takes a class-oriented approach that is similar to Prototype's structure. It is one of the more lightweight options out there. In fact, the most basic implementation boasts a measly 9KB script. However, you will be sacrificing certain features that most (if not all) libraries offer out-of-the-box (e.g. form validation). Like the other libaries discussed in the post, Ajax is a supported feature. The implementation is a bit different than other frameworks, but it still seems easy enough to use (especially for the ASP.NET developers out there). There are active forums available on MooTools' website. I like what I see with this framework, but I think it will really benefit from a little more time to mature into a more powerful library.
>> Script.aculo.us
http://script.aculo.us
Current Version: 1.8.1
Download Size: 262 KB
Grade: 7.5/10
"Script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly."
This library is an extension to the Prototype framework aimed at offering the UI elements Prototype ignores. Script.aculo.us focuses on offering six core UI effects - highlight, morph, move, opacity, parallel, and scale. More advanced UI effects can be accomplished, however they require the use of combination effects. There are a set of 15 controls available out of the box with Script.aculo.us (e.g. Ajax AutoComplete and Drag & Drop).
If you are strictly focused on UI effects this is a great solution. It offers a powerful set of UI tools, but I am a little weary that the project is run by one developer. It is hard to argue against this solution when you look at the real world usage though.
Conclusion
There are a several great options when choosing a JavaScript framework for your company/project. My personal choice would be jQuery as my base library, and the optional use of Ext JS as an extension. Prototype + Script.aculo.us is another very popular solution, but as I mentioned I like the stability offered by jQuery and Ext JS. Your choice will really depend on the features and functionality you require. Hopefully this comparison helps in making the decision easier by promoting the strengths and weaknesses of the different libraries.
What do you use in your applications, and, more importantly, would you recommend it?
(For anyone that wants to use the analysis for corporate justification, I will be providing a word document in the next day or so that wraps up this post in a nicely formatted fashion)
