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
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
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 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.
This code generates a simple page with just a red square and a button on it (view the demo). 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 if you’d like to play along at home):
Both code examples give the exact same result, as illustrated below (see for yourself).
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.
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.