REVIEW: Ext JS 3.0 Eases Web App Development

Ext JS is a cross-browser JavaScript library for building rich Internet applications, Version 3.0 of Ext JS makes it very easy to create GUIs that run in the browser using JavaScript.

I feel like I'm about to reveal a deep secret that only a privileged few Web designers know. It's about a product called Ext JS. In short, if you use Ext JS, your Web development experience will be much happier and far easier.

As many Web designers will attest, when it comes to writing client-side applications that run in a browser, we've taken a few steps backward. JavaScript is certainly a powerful language, and HTML certainly has a great deal of elements that can be used for some powerful GUIs. But the two-JavaScript and HTML-don't exactly play well together. If you want to create a complex GUI in JavaSript, you're up against a formidable task. This is despite the fact that it was nearly two decades ago that GUI and usability extraordinaire Alan Cooper gave us the first version of Visual Basic, which lets you easily drag and drop sophisticated elements onto a form and attach code to them, ultimately building a GUI in a matter of minutes.

Labs Gallery: Ext JS 3.0 Sample Apps Show JavaScript Library's Potential 

But that's where third-party JavaScript libraries come in, including Ext JS.

The recently released Ext JS Version 3.0 makes it incredibly easy to create GUIs that run in the browser using JavaScript.

During tests, Ext JS let me create some pretty cool interfaces. Want a complex desktop with draggable windows running right inside your browser? Ext JS can do it. Want a GUI that's built like a typical e-mail program, with sliding panels and trees? Ext JS can do that, too. In fact, I was pretty shocked at some of the complex GUIs I could put together with little effort.

With Ext JS you don't do any drag-and-drop designing, as you do in Visual Basic and other such languages, but that's OK. The idea is that you piece together your GUI using JavaScript objects that describe in detail what you want.

The GUI library in Ext JS is very rich, indeed. You can create tabbed panels, data grids, forms with buttons and other elements rendered to match a particular theme, and you can use various layout mechanisms for organizing your controls, much like what you have with languages such as Java.

But Ext JS goes beyond just the GUI. It includes several classes for performing AJAX queries on the server (and even across to other servers using known AJAX tricks), and the results can be parsed using various encodings, such as XML.

You can hook up these data objects (called stores) to things like grids to create complex data views akin to what we programmers are used to seeing in desktop development tools such as Delphi and Visual Studio. And because this is client-side, you can page through the grids in the browser without reloading the page; only the grid itself updates through the beauty of AJAX.

There are also loads of helper classes, such as enhancements to the built-in JavaScript String class (including a very nice C-style string formatting function), as well as DOM-querying classes and functions for traversing DOM trees using CSS selectors. (I found the latter to be extremely useful for helping navigate all the DIVs and other elements generated by Ext JS and recommend that you study the concept of CSS selectors carefully if you're really interested in going far with Ext JS.)

Ext JS is fully backward compatible with the various 2.0 versions, and adds a few goodies, such as a certain amount of REST support, and some controls, such as a pretty cool list view, several ways of paging through data and some amazing charting capabilities. The charts make use of Flash, which is nice in that you don't need additional server-side libraries for generating chart images.

But perhaps the biggest addition to Ext JS is the new Ext.Direct specification. If you do a great deal of Web development, you know that you need to do lots of coding on both the client and server end. Ext JS has always helped with the client end, but on the server end you were left to your own devices to create the data to be passed down to the client through AJAX, writing code that effectively generated either

To mitigate this difficulty, Ext JS now includes server-side code for many different languages and platforms--including PHP, Java, ASP.NET including MVC and Perl--that will help save you time and effort in building your server code. These libraries fit together carefully with the client-side classes, making for easy generation and transfer of data. (Note: If you visit the Ext JS.com site, the server-side Ext.Direct packages are a separate download, further down on the main downloads page.)

Ext JS developers have also gone to great lengths to make sure that the Web applications you write with the product will work in all major browsers, including Firefox 1.5 and higher, IE 6 and higher (yes, even IE 6 is supported), Safari 3 and higher and Opera 9 and higher.

Ext JS also includes support for Adobe AIR, and there's a version that's integrated into Google Web Toolkit.

The Downsides of Ext JS

One of the gripes I've heard about Ext JS is that your final Web page ends up with a lot of DOM elements. This is true. Many of the single Ext JS elements are constructed of numerous DIV and TABLE tags piled inside of each other. But does that matter? Today's browsers seem to handle it just fine, so perhaps it's not a real problem.

But, still, working with Ext JS can be difficult if you want to create some really complex GUIs, especially, as I found in my own tests-for example, when trying to create a dialog box that has numerous controls and doesn't follow a set "field label - field" layout. (Think of some of the dialog boxes in popular software applications, such as Microsoft Word.) That's not to say it can't be done. But you're going to have to work a little to get there.

And it's also easy to end up with some really messy code if you're not careful, with layers of object declarations embedded inside of object declarations. As with any other language, you have to work to make sure your code ends up in a readable and maintainable form.

Ext JS' documentation also leaves a bit to be desired. There's an awful lot of it, but it's really not complete. The examples often use custom classes buried inside example code that isn't immediately apparent, and many of the API entries have minimal explanation of what the various configuration options do. A good technical writer who has spent a lot of time developing in Ext JS could have a go at it and clean it up.

That said, there are many examples, with lots of code, and if you're willing to dig a little, you can probably find the answer to your questions. There are also free forums you can use. (Don a thick skin in the forums--some of the people can get a little snippy with beginners.)

Licensing

If you're considering using Ext JS, you'll need to look very carefully at the licensing model, which has created some controversy.

Earlier versions of the product were apparently available under the LGPL license, basically allowing you to use Ext JS in commercial products without payment to Ext LLC, the company that owns the product. But that model has changed, much to the chagrin of some customers. Now the product includes a dual licensing model: You can license the product under the GPL (not the LGPL) or purchase a commercial license.

The problem: It seems that if you create software that uses a GPL-licensed library, then your software must also adhere to the GPL. Now, I'm not a legal expert, and I can't advise on software licenses. But that's the way the confusing GPL seems to be worded. As such, it appears that if you want to release a commercial product that uses the Ext JS, you need to purchase a commercial license for Ext JS. (If you want to create an open-source app under the GPL, then you're fine.) Check with the main Ext JS.com Website for more information, but, either way, you can download the entire product from www.Ext JS.com and try it out for free.

Also, the terms of the commercial license really aren't that bad compared with some I've seen out there, where you need to pay thousands of dollars for a library if you want to distribute it with a Web-based application. A commercial license for Ext JS can be purchased for $329 for a single developer to release his or her product on unlimited domains. If you're running a small business and are looking to build a commercial product, that's not over-the-top, in my opinion.

 Jeff Cogswell can be reached at jeff.cogswell@ziffdavisenterprise.com.