"A rich Internet application combines the benefits of using the Web as a low-cost deployment model with a rich user experience that's at least as good as today's desktop applications. And, since RIAs don't require that the entire page be refreshed to update their data, the response time is much faster and the network load much lower. Think of a globally available client/server application."
Rich Internet Applications: State of the Union
Since 2004, the number of Rich Internet Applications (RIAs) has increased, making them a key component of the Web 2.0 phenomenon. Many RIAs have been developed using JavaScript (JS) and AJAX (Asynchronous JavaScript And XML). AJAX is used to access remote data sources, that reside on the server or are available through an open API, directly from within the application. The rich variety of applications would not be available today without the concurrent appearance of many, powerful JavaScript toolkits that have taken the development of these applications from labour-intensive to nearly painless. These toolkits provide an open source alternative to the proprietary products developed by Adobe (Flash/Flex/Air) and Microsoft (Silverlight).
This article provides two examples that demonstrate the evolution of RIAs, then compares the features of the most commonly used JavaScript Toolkits used to create RIAs. We then discuss how freely available toolkits are able to compete against proprietary alternatives. Finally, we provide some concluding remarks based on our experience with creating enterprise RIAs.
Evolution of RIAs
We have been involved in the rise of RIAs right from the beginning. At digg.com, we adopted AJAX before the acronym was created, when it was basically referred to by the much less friendly acronym XMLHTTP. One of the early features that drove a lot of traffic to digg was "Digg Spy". Originally developed in February 2005 with JavaScript, it was greatly enhanced in July 2005 via the use of a couple of the first JavaScript toolkits to appear: Prototype and Scriptaculous. Digg Spy provided a near real time view of activity on the site without resorting to the meta-refresh technique in common use at the time. What was innovative then can now be seen all over the Web, most noticeably at sports sites such as espn.com and nfl.com. These sites were the largest users of the clunky meta-refresh approach, and have since heavily invested in AJAX.
Several years later at tripadvisor.com, I was deeply involved in the development of TripAdvisor Flights, a meta search product for travel planning with a huge interactive front-end component, developed using jQuery and Prototype. The evolution of JavaScript toolkits over the past four years has been astounding, and can be seen clearly when contrasting these two products. It's interesting to note that the original Digg Spy was retired recently in favour of the proprietary Adobe Flash product, and that had more to do with an Adobe sponsorship of the product than technical merit.
JavaScript Toolkits
The sheer number of JS toolkits can be confusing to the uninitiated. In addition to technical considerations, issues such as licenses, modularity, and support should be considered. We discuss the most common toolkits: Prototype/Scriptaculous, Dojo, YUI, Ext-JS and jQuery.
Every toolkit, either in its core or with closely associated packages, provides support for a variety of things inherited from desktop applications that are not easy to do in JavaScript and which are especially difficult to do in a cross-browser compatible fashion. Drag-n-drop, tooltips, status bars, windows, modal dialogs, and progress bars are present in all of the toolkits. Additionally, most provide a set of widgets like tree controls, combo boxes, sliders, rich text editors and other controls inherited from their desktop predecessors. It's not entirely clear that these controls actually make people more comfortable on the Web. Our experience has been that most people have adapted to the dumbed-down interface of the web browser and are often confused by additional controls.
One important, but not obvious, consideration is that JavaScript does not support the class-based inheritance model that is familiar to most software developers. It instead uses a "prototype" based inheritance. Many of the toolkits provide a mechanism for class-based inheritance as a way to make development more attractive.
- Prototype: Prototype is the oldest framework, and thanks to its close association with Ruby on Rails, it is a widely adopted rapid application development (RAD) framework for the web. Developed by Sam Stephenson in 2004, it's probably the best-developed class-based system. Scriptaculous is a separate library, built on Prototype, that provides effects and animation. Scriptaculous has gained a reputation for being bloated, and that caused Digg to abandon both Scriptaculous and Prototype in favor of jQuery.
- Dojo: Dojo, unlike the rest of the toolkits mentioned, provides a rich text editor, something for which there is a great demand. It has also completed a great number of partnerships, most notably with Zend. Zend is a leading framework for PHP development, supported by IBM and SUN, and they plan to integrate Dojo in their next version. In addition to the usual collection of widgets, Dojo provides extensions to do box and line charts.
- YUI: YUI is the kitchen sink of JS toolkits, chock full of widgets and gadgets, with Yahoo as its corporate backer. There is a much smaller core available, countering any accusation of bloatedness. Overall, it has the richest set of widgets, and the big company support is a decisive factor for many websites. YUI also includes a very useful JavaScript compressor that we use at tripadvisor.com to decrease download times and to save bandwidth.
- Ext-JS: Ext-JS has a dual commercial/GPL license, and this has spurred some licensing issues that have impaired its adoption. Most JS toolkits use the LGPL or MIT license, which has allowed them to be used without developers having to open source their server side code. Ext-JS provides a rich set of widgets, and provides integration with Google Web Toolkit, a server-side framework that generates JavaScript.
- jQuery: jQuery has the usual widgets available under the rubric jQuery UI. It's probably best known for its terseness, a result of a technique called "chaining" that makes for very concise code. This is important for JavaScript which almost always has to be transferred from a server to a client machine over the Internet. Its greatest strength, chaining, is also the main point of criticism as jQuery code looks completely different from JavaScript code. It has also benefited recently from a close association with the Mozilla Foundation; John Resig, the initial developer, is employed there.
Competing with Commercial Alternatives
One of the interesting dynamics at play in the Internet industry and the continuing evolution of RIAs is the ever present rhetoric pushing the latest proprietary alternatives. The toolkits described above have been instrumental in ensuring that JavaScript can compete, even in a world with many different browsers, each with their own quirks and bugs. Ten years ago it would have been hard to argue that the number of browsers in use would increase. Now, it's a given, with Opera, Chrome, and Safari all holding their own against Firefox and Internet Explorer. This has presented challenges for JavaScript developers and a lot of great work by countless individuals has ensured that the open source alternatives continue to be preeminent.
The canonical cool application for JavaScript is still Gmail, and its success has demonstrated that useful and usable applications can be done in pure JS. Other well known applications include Zimbra and Zoho Applications. Beyond the obvious rivalry of JavaScript vs. Flash, the continuing success of JavaScript in developing RIAs also represents another success for open source. As the adoption of browser-based applications increases, the reliance on many different types of proprietary desktop applications decreases. This is good news since the adoption of open source browsers continues to be on the rise.
Concluding Remarks
One possible concern with the use of JavaScript, Ajax and rich JavaScript applications is the fact that the original XMLHTTP protocol is itself a proprietary protocol owned by Microsoft which was originally released as an ActiveX object. Other vendors have implemented their own versions of the protocol and there are other ways to do the dynamic updates that XMLHTTP provides, should Microsoft ever decide to be less benign about the protocol.
JavaScript has a clear lead in the next big frontier in applications, that of mobile development. In particular, the iPhone doesn't support any of the proprietary alternatives, but it does support JavaScript. Most applications, including our own JavaScript heavy flights product, work quite well in the iPhone version of Safari. Flash and Silverlight don't, at least not yet.
Our recent meta-search application turned out to be quite large and challenging, but the use of JavaScript and jQuery turned out to be a key contributor to its apparent success. It still took a great deal of effort to make it perform adequately while working across all major browsers. As most web developers know, the weak point for these applications continues to be the large installed base of Internet Explorer 6.0. The DOM and JavaScript implementation in that browser has a huge number of bugs, and requires many workarounds and often the foregoing of best practices. We can only hope that the recent launch of Internet Explorer 8.0 will prompt at least some people to upgrade.
Recommended Resources
The Business Benefits of Rich Internet Applications for Enterprises