Web 2.0 startups. Choice of JavaScript framework

SEPTEMBER 28, 2009

Summary

It is incredible how far web technologies have advanced over the last several years, and it would be hard to dispute that JavaScript frameworks were among the main forces to drive this progress. By providing a wide set of tools, and, more importantly, by making client-side scripting easy to learn and use they allowed web developers to build complex, robust, and highly interactive online applications quickly and efficiently.

Nevertheless, while aiming to solve similar problems, modern JavaScript frameworks differ in their approaches. The choice of the right tool for the job is often not an obvious task which depends on both the team and the project at hand. As it is one of the earliest decisions an engineering team has to make when starting a new project, we decided to write this white paper in order try to help you make this decision in an informed and consistent manner.

Quick overview

First, let us narrow down our choice to the most widely used, open source, general-purpose frameworks of today. These are: jQuery, Prototype/Script.aculo.us, Mootools, Yahoo UI, Ext and Dojo Toolkit.

Each of these frameworks (a) is used by many thousands of developers (b) has an active community behind it (c) is well maintained and tested across different browsers, and (d) supports commonly used JavaScript functionality: Ajax, DOM traversal and manipulation (including CSS selectors), event handling, animation and various utility functions.

Let us take a closer look at each framework.

jQuery

jQuery today is one of the most popular JavaScript frameworks among developers. jQuery is used by such industry giants as Microsoft, Nokia, Digg, BBC and Dell. jQuery is famous for being extremely easy to learn and use. Its APIs are built entirely around selecting DOM nodes with CSS, which makes it especially easy to use for developers who are not very familiar with JavaScript but have experience with HTML and CSS. It also encourages a unique coding style (being based on a single function with chainability) which many find very easy to get used to. Note that in some cases this latest point may be considered a drawback because jQuery encourages procedure-style coding, while projects with complex JavaScript functionality often require an object-oriented approach.

When it comes to UI components (such as pop-ups, sliders, tabs, etc.), there is a separate project called jQuery UI which provides a very good set of widgets for UI implementation. However, it is a relatively young project and is not as established and feature-rich as YUI, Ext and Dojo. jQuery also has a centralized plugin directory containing thousands of plugins for different purposes, though they are not as reliable as they have been created by independent developers and thus are not always well-tested.

Another advantage of jQuery is that it does not conflict with the global namespace and does not modify native JavaScript types, which makes it possible to use jQuery with any other frameworks or scripts without complications - some developers use it alongside with other popular frameworks, utilizing strong sides of both.

Prototype

Prototype is on a par with jQuery in terms of its popularity. It was initially developed as a part of Ruby on Rail (RoR), so it is integrated into RoR, which makes it a number one choice for Rails-powered projects. It is also mostly used in pair with SScript.aculo.us an animation and effects framework especially built for Prototype. Prototype is used by such sites as CNN, The New York Times, Digg, Apple, Twitter and Last.fm.

Prototype is considered to have a steeper learning curve and a more complex API than jQuery, though it has all of the functionality that jQuery has. One of the major differences with jQuery is that Prototype offers classical object-oriented inheritance model which can be used to build complex JavaScript components. Prototype also has some utilities for functional programming.

The most frequently cited argument against using Prototype when developing interactive web applications is its lack of official UI component base. In cases when some specific UI components are required, developers are forced to build such components from scratch or seek solutions from independent developers around the web. There recently emerged a project called Prototype UI which aims to solve this shortcoming, but it is too young to be considered for production use in serious web applications. This project looks promising though.

Prototype also does not care for global namespace and native types purity, so you can not be sure that it will not conflict with another framework within the same page (unless this other framework is "pure", like jQuery is).

Mootools

Mootools is mostly known for its smart modular, object-oriented design and its animation/effects component which is considered the most powerful of all JavaScript frameworks. It is currently used by Mint, Bebo, Vimeo and CNET and others.

Mootools' modular design and its object-oriented approach to components makes it very easy and enjoyable to use by developers who prefer OOP. This also makes it really easy to extend component base within Mootools framework. Mootools is also very configurable, allowing developers to choose which components they want to use to minimize the size of the library. It has a nice set of utility classes to choose from.

Albeit to a lesser extent, the lack of UI component base also applies to Mootools, (some UI components can indeed be found in its distribution package). There are three Mootools UI projects to choose from: Mocha UI, Mootools UI and JxLib. Though these projects are still young too, they provide developers with more choice than Prototype UI.

Mootools, like Prototype, also pollutes the global namespace and modifies native types (so you can not use both as it will cause conflicts).

Yahoo UI

Yahoo UI is feature-rich JavaScript and UI components framework developed by Yahoo!’s front-end team. It is used extensively on (obviously) most Yahoo! sites (including Flickr), and also on sites like Walmart.com, LinkedIn, Bebo, ImageShack and YouSendIt.

In addition to providing a well established UI component framework, YUI has a many really advanced JavaScript components (for example, Rich Text Editor, Browser History Manager, Charts). This makes it an especially good choice for complex projects that require a variety of reliable, well-tested JavaScript functionality.

One YUI drawback is its UI component design. Its development team focuses on engineering side (being brilliant at this), not graphical one, leaving the task of designing “pretty” components to the users of the library. So if you need a really impressive UI skin right out of the box without effort, you should consider using Ext (described below).

It is also worth mentioning that YUI team is currently actively working on the next-generation version of the framework (v. 3.x), which is quite an ambitions project that introduces many new concepts. It is not yet ready for primetime (some critical components are not yet written), but it is a really exciting development that many developers look forward too.

Ext

Ext is a powerful framework for creating desktop-like interfaces. It is widely known for its extensive set of UI widgets and a really nice looking default skin. It is used by such well-known companies as Adobe, CNN, Amazon, HP, Canon, Siemens, Sony, HSBC and others. It is comparable to YUI, having less advanced features but reasonably more polished UI and graphics.

One major barrier for using Ext is its dual licensing which requires you to buy an expensive commercial license as you can not release your Ext-based code under GPL (an open source license) terms. On the other hand, if you have the resources to buy the license, you may find Ext’s extensive commercial support very useful.

Dojo Toolkit

Dojo Toolkit is also a very big player among JavaScript frameworks with UI widgets base. It is officially supported by IBM and Sun Microsystems and is used on such websites as Apple Store, Ask.com, AOL, MapQuest and others.

Dojo is known for its powerful packaging system, focus on accessibility, many advanced features (like data storage systems, rich-text editor, charts) and a very good support across server-side technologies. It also has a very active development community behind it. On the negative side, many consider its documentation/tutorials to be noticeably sparser compared to similar frameworks. However, this area is rapidly improving due to the community effort to write a complete online book about Dojo.

Conclusion

As a summary, below you will find several rules of thumb when choosing a JavaScript framework. They are a subject to debate and exceptions, but our experience at Cogniance shows that they apply well to most projects.

• If you are building a “heavy” web application with many UI components like popups, data grids, dynamic layouts, etc., you should choose between YUI, Ext and Dojo. Otherwise, choose between jQuery, Prototype and Mootools.
• Between YUI, Ext, and Dojo, choose Ext if you need attractive desktop-like interface out of the box or an extensive commercial support (this can also save development costs if you do not have strict graphical design requirements or a dedicated UI resource on the project). If that is not the case, the choice between Ext, YUI and Dojo depends on developers' personal preferences and where they have the most experience. We usually choose YUI as the most reliable and well-documented framework among the three.
• For the second group of frameworks (jQuery, Prototype and Mootools), you should definitely choose jQuery if you have many developers without much JavaScript programming experience on the team. If your project is powered by Ruby on Rails, Prototype becomes the first choice because it is integrated into RoR and because Rails developers usually have experience with it. Mootools is the best choice if your developers prefer object-oriented approach in JavaScript, or if you need a lot of amazing animation effects on the site. Otherwise, just leave it to a personal preference.

Good luck with your projects!

About the author:

Vlad Agafonkin is the Front-End Architect at Cogniance. Vlad has broad experience creating large-scale web applications, implementing complex UI functionality, and mentoring other front-end engineers. Vlad enjoys learning modern technologies and programming languages like Ruby and Python. He supports and prefers Open Source software. You may follow Vlad's micro-blog on Twitter, connect via LinkedIn or just Skype him through SkypeId agafonkin.