By: Daniel Solin

December 14th, 2007

Reader Rating: 8

Ext (available from extjs.com [1]) 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 [2].

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 [3], 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.

Let's take a look at a simple example of what Ext can do for us. Suppose we wanted to implement a graphical fading feature in our application -- something we can use to make an object appear and disappear in a way that looks pleasing to the eye. Here's a possible implementation of such a feature in plain JavaScript, without using Ext:

<html>  
 <head>  
   <title>Fading without Ext</title>  
 </head>  
 <body>  
   <div  
     id="my-element-to-fade"  
     style="width:100px;height:100px;background-color:Red">  
   </div>  
   <br />  
   <button onclick="shiftOpacity('my-element-to-fade', 1000);">  
     Fade!  
   </button>  
         
   <script type="text/javascript">  
     function changeOpacity(opacity, id)  
     {  
       var object = document.getElementById(id).style;  
       object.opacity = (opacity / 100);  
       object.MozOpacity = (opacity / 100);  
       object.KhtmlOpacity = (opacity / 100);  
       object.filter = "alpha(opacity=" + opacity + ")";  
     }  
         
     function setOpacity(id, opStart, opEnd, ms)  
     {              
       var speed = Math.round(ms / 100);  
       var timer = 0;  
 
       if(opStart > opEnd)  
       {  
         for(i = opStart; i >= opEnd; i--)  
         {  
         setTimeout(  
           "changeOpacity(" + i + ",'" + id + "')",  
           (timer * speed)  
         );  
           timer++;  
         }  
       }  
       else if(opStart < opEnd)  
       {  
         for(i = opStart; i <= opEnd; i++)  
         {  
           setTimeout(  
             "changeOpacity(" + i + ",'" + id + "')",  
             (timer * speed)  
           );  
           timer++;  
         }  
       }  
     }  
             
     function shiftOpacity(id, ms)  
       {  
         if(document.getElementById(id).style.opacity == 0)  
         {  
           setOpacity(id, 0, 100, ms);  
         }  
         else  
         {  
           setOpacity(id, 100, 0, ms);  
         }  
       }  
   </script>  
 </body>  
</html>

This code generates a simple page with just a red square and a button on it (view the demo [4]). Clicking the button either fades the red square in or out, depending on whether or not it's currently visible. The functionality works just fine, but as you can see it required quite a few lines of (ugly) code. Fortunately, we can achieve the exact same functionality using Ext, but with much less code (download Ext [5] if you'd like to play along at home):

<html>  
 <head>  
   <title>Fading with Ext</ title>  
   <script  
     type="text/javascript"  
     src="ext/adapter/prototype/prototype.js">  
   </script>  
   <script  
     type="text/javascript"  
     src="ext/adapter/prototype/scriptaculous.js?load=effects">  
   </script>  
   <script  
     type="text/javascript"  
     src="ext/adapter/prototype/ext-prototype-adapter.js">  
   </script>  
   <script  
     type="text/javascript"  
     src="ext/ext-all.js">  
   </script>  
 </head>  
 <body>  
   <div  
     id="my-element-to-fade"  
     style="width:100px;height:100px;background-color:Red;">  
   </div>  
   <button onclick="showHide('my-element-to-fade');" style="margin-top: 10px;">  
     Fade!  
   </button>  
   <script type="text/javascript">  
     function showHide(id)  
     {  
       Ext.get(id).toggle(true);  
     }  
   </script>  
 </body>  
</html>

Both code examples give the exact same result, as illustrated below (see for yourself [6]).

The code of interest to us in these examples is what you see between the <script> tags in the two code listings. Although this is a very simple example, the difference is quite remarkable. If you put this into a bigger context (like a full-blown web-based word processor), you can imagine what difference the use of a library like Ext could make.

Summary

The Ext JavaScript library can save you from enormous headaches. Seven years ago, before words like Ajax and Rich Internet Application existed, I joined a team that began the development of a full-featured web-based business system. We wanted to make it a worthy alternative to desktop-based systems, so a rich and intelligent user interface was a must. Back then, nothing even close to Ext existed, and while our system today implements everything we need it to, there's no doubt that if something like Ext had existed from the very beginning it would have reduced the development effort significantly.

As I've stated a couple of times in this article, Ext is a very consistent library -- much of the functionality can be found throughout the whole library. This means it's important to get things right from the beginning, as it will help you a lot when moving forward to the more advanced (and interesting) features.

[1] http://extjs.com/
[2] http://blogs.zdnet.com/SAAS/?p=338
[3] http://developer.yahoo.com/yui/
[4] http://www.sitepoint.com/examples/ext/fade-square.html
[5] http://extjs.com/download/
[6] http://www.sitepoint.com/examples/ext/ext-fade-square.html