Build Rich Internet Applications with Ext

Ext (available from extjs.com) is a JavaScript development framework initiated and maintained by highly respected JavaScript guru Jack Slocum. By delivering a continuously growing structure of JavaScript classes that solve many of the common problems associated with developing Rich Internet Applications (RIAs) in JavaScript, Ext can potentially save you months of work in your web application endeavors.

In this article, I'll give you a solid introduction to what Ext actually is and does -- why I think we as web developers need it, and how it makes developing RIAs so much easier. We'll answer the questions: What is Ext, really? And why do we need it?

Defining "Rich Internet Application"

Just so you know, throughout this article I've deliberately chosen to drop the widely known (and hyped) "Ajax" and "Web 2.0" terms since, in my view, there still seems to be some confusion over what they really stand for. The definition of "rich application," however, is commonly accepted. The term defines an application with a functionally rich user interface -- an application as responsive and intelligent as any of the desktop applications we use daily. Adobe Photoshop and Microsoft Excel (shown below) are good examples of rich desktop applications.

So, why do we need RIAs then? We already have all the applications we need right there on our desktops, right? Well, while this is true, more and more companies are embracing the RIA concept, replacing their traditional desktop applications with web-based equivalents. The most obvious benefit of this approach is, of course, that your potential customers can gain full access to your application from wherever they have access to a web browser and an Internet connection. For customers using an application that's not only developed, but is also managed and operated by a third party, the responsibility of operating mission-critical applications is moved to an external party, which has the potential to free up internal resources.

Distributing applications via the Web falls under the SaaS (Software as a Service) concept, which has become one of the industry's hottest topics in the last few years. SaaS adoption is already widespread in North America, and some expect it to take off in Europe very soon.

The concepts of SaaS and RIA are tightly linked: the potential success of SaaS naturally relies on the market's potential to produce good web applications: people will not be willing to give up their traditional software unless the web-based alternatives prove to be equally good. To build web applications that can compete with traditional desktop apps, we need to add another dimension to the traditionally static Web. This is where Ext comes into the picture. But first, let's have a look at the problems with which developers have traditionally struggled when developing RIAs.

Developing Rich Internet Applications

An RIA can be developed using a few different techniques: Java Applets, Flash, and Microsoft's XBAP are technologies that can serve as a platform. However, the technique that has been most widely adopted -- and, in reality, has become the de-facto standard -- is JavaScript. By using JavaScript to dynamically alter the HTML and CSS loaded into the user's browser, developers have found a way to create web sites that look and feel like real applications, and come with all of the accessibility and SEO benefits of HTML.

But such an approach is not without its drawbacks: much of the user interface must be created from scratch. When developing a Windows desktop application using Windows Forms, for example, you have a predefined set of widgets that automatically generate nice-looking tables, trees, dialogs, context menus, tool bars, and so forth. None of these widgets exist in JavaScript. JavaScript and CSS, after all, lie at a quite low technical level, and programming advanced user interfaces from scratch using these techniques is therefore quite complicated, or at least very cumbersome.

Of course, many examples of the above-mentioned building blocks already exist, distributed across various sites around the Internet as code examples or even free software. So if you were to put some effort into it, you might just find working versions, or at least code examples, for most of the building blocks required to build an RIA. The problem is that these code samples are scattered all around the Internet, and they vary in both quality and style. Collecting JavaScript code and using what you find as the base for your application might save you a lot of development time when you compare that approach with doing everything from scratch. But it would probably also require you to alter much of the code you find in order to achieve a consistent look and feel. Additionally, you wouldn't have any assurance that you'd get updates or bug fixes, which would make this approach less than ideal.

If we want to easily develop a uniform, professional-looking, easy-to-use, and stable RIA, we'll obviously have to overcome a few issues.

Ext Comes to the Rescue

In a nutshell, Ext delivers just what we need -- a stable and uniform JavaScript platform for building rich web applications. Initially built upon the Yahoo! UI Library, Ext has looked very promising for some time. When version 2.0 was released last week, however, the library matured into possibly the most robust JavaScript library available for developing rich web user interfaces.

There are a few alternatives out there of course, such as Dojo and the Yahoo! UI Library, but there are a few key points that, when combined, make Ext stand out from the crowd. These points include:

• Ext is very fast. Performance is often a problem when programming JavaScript.
• Ext is implemented in a 100% object-oriented, well structured, consistent way. This makes the library fast to learn, and the code easy to read and understand.
• The modular implementation with its consistent base makes the library easy to extend.
• All Ext elements (widgets) are ready for use. In contrast to many other libraries, the widgets are usable as they are, with pre-defined styles, settings, and behavior. Still, all elements are fully customizable and can be themed if required.
• The Ext developers are extremely dedicated and competent, and have an understanding, and most importantly an interest, in users' needs. Ext documentation is thorough and full of working examples.
• The Ext community is very active, and the tone is generally very positive.
• Ext can be used both under a free and a commercial license.
• Last but not least, Ext looks very slick!

Some (or maybe even all) of this is true for other libraries as well. I don't pretend to suggest that there aren't other excellent alternatives out there, and you should investigate all options before deciding to stick with one. However, in my experience Ext gives the best overall impression, which is why I decided to run with it.