Ext

With close to 100 billion text messages sent every month in the U.S., text messaging has clearly become a communication medium many of us have come to rely on. Zipwhip, a text messaging utility for the web with a polished Ext-based user interface, aims to take texting to a new level. The team at Zipwhip were eager to share their enthusiasm and approach to building with Ext.

Tell us a little bit about Zipwhip and your goals for the application.

Zipwhip is a utility for text messaging from the web. Text messaging is the fastest growing communication medium, but is still locked inside the mobile phone. We aim to help bring text messaging everywhere.

To pull off our ambitious goals, we’re using just about every web 2.0 trick in the book—comet to send carrier delivery receipts back to the browser in real-time, Ajax for server communications, download-on-demand Javascript packages (with preloading), Flash for audio notifications, and many others.

Why did you choose Ext JS?

One of the design decisions we made early on was that we wanted a rich desktop-like experience inside the web browser. We investigated the other major players in the field, but ultimately decided that ExtJS was the best. One of the things that made ExtJS especially appealing was the “Window” object that can contain “Panel” objects. Our core requirement was a windowed interface and having Ext.Window cross-browser out of the box was a major win.

Ext allowed us to focus on putting together the Ext building blocks that were engineered to be cross browser rather than reinvent the wheel. We had a limited budget and limited time and Ext provided 90% of the functionality we had in mind. We used a combination of Ext layouts and CSS to achieve many of the window structures used in the site. Theming the Ext widgets and integrating them with custom css layouts was a breeze.

Lastly, the XType architecture allowed us to create Javascript packages and download them on demand. This allows us to create an application that was not bounded by download size. A browser would have a difficult time rendering our site if not for lazy loading. What used to be a difficult custom built proposition (lazy loading) became an afterthought with Ext JS.

The Zipwhip application is extremely feature-rich. How did you manage the UI code complexity?

One of the small footnotes in Ext JS is the “plugin.” We’ve made that concept into a corner-stone of our application. Each carrier requires different functionality, features, and different business rules. With progressive enhancement we can swap in plugins that provide different implementations of various features, and ensure we only download the plugins that are needed.

Another thing that simplified my life greatly was David Davis’ (xantus) implementation of PubSub. This allowed us to decouple areas of the code, which made for a simple core framework. We implemented PubSub very late in the development process and are still working to fully take advantage of this wonderful design pattern.

Finally, keeping the code divided into standard namespaces was invaluable. We segmented common “Operating System” level widgets into Zw.controls and put all of our Ext.data.Records into Zw.data. Namespacing the code kept things manageable.

Oh yeah, and one class per file. Nobody likes a 10,000 line file.

What other techniques did you use to achieve such a gorgeous UI?

Most of what you see in the Zipwhip application is standard Ext JS with some fancy css overrides. We were surprised how easy it was to add some custom graphics to the existing Ext JS markup.

Ext.layout

One of the most awesome things about Ext JS are the Layouts! Because of the amazing flexibility we could mix css and Ext layouts to give us the desired effect with minimal code. The FormLayout (with anchoring) can manage the position of the fields, whereas CSS could manage the complexity of the Phone Preview Area.

Also Ext JS layouts improve performance and page weight. Specifically the layouts each decide when to render the content they are responsible for. This means that the Threading tab is only rendered the first time the user views the tab.

Ext.menu.Menu and Ext.DataView

Ext.menu.Menu (and the Adapter) became one of the handiest components in the ExtJS library. All of our Right-click menus were implemented with the Ext.menu.Menu. We host panels inside the menu and use a combination of CSS trickery plus Ext layouts to get the resulting effect.

Possibly the part we used the most out of Ext was the Ext.DataView. In the Contacts window (and Corkboard), we utilize an Ext.DataView and customized it to allow rendering of Ext.Components. The DataView abstracts away the difficulty of managing a list of Widgets linked to a Ext.data.Store.

Ext.SplitButton

The ContactCard (Zw.controls.ContactCard) extends the Ext.SplitButton. I know our ContactCard doesn’t look anything like a split button, but it truly was the best approach. Thanks to the way that Ext designed their components, we were able to easily modify the Template that is used to generate the button. Also thanks to the xtype, delay rendering, and plugin model the API was extremely simple.

items: {
     xtype: 'Zw.controls.ContactCard',
     closable: true,
     plugins:  [
           "Zw.controls.ContactCardEditNamePlugin",  //enable it to be editable
           new Zw.controls.ContactCardDropdownPlugin(), {  // allow right clicks on the card
           xtype: 'Zw.controls.ContactCardPopupPlugin'  //pop it up if its too small 
     }],
     listeners: {
          scope: this,
          'close': this.onContactCardClose,
          'rename': this.onContactCardRename
     }
}

What features could we add to Ext to make building a rich application like Zipwhip easier in the future?

We had the situation where we needed to create an Ext.DataView that displays Widgets. Currently you can only use an Ext.DataView with an Ext.Template. A solution that allows for controls to be created and inserted according to an Ext.data.Store would be valuable.

Additionally, “best practices” for preventing and dealing with memory leaks would make building an RIA easier. Memory leaks with templates, dataviews, and elements can cripple the development process if not planned for.

Do you have any advice for developers using Ext for the first time?

The best way to learn is to do. The rich examples provided give you a great starting point that can quite easily end up in your final product. One of the key value propositions of using Ext JS is the rich documentation - use it often.

Also put together various folder structures to gain experience for what feels right. A folder structure can make a huge difference on the quality of your product. Pick something that you can grow into and is not overly structured. I divide my OS, Controls, and Features and have found it rewarding, while not too restrictive.

Final thoughts?

Ext JS is more than an abstraction layer on top of Javascript (like other libraries). Ext JS is a set of design patterns and object models that naturally fit into application development. We continually reach inside the Ext JS treasure box when developing new functionality and find that most of the hard engineering has already been done. All that is left is to socket together a few pieces and tweak some CSS.

There is a growing amount of choice in the world of Javascript frameworks. We evaluated them all and decided Ext JS was the best. This was a hard choice for us initially, but now that we’ve launched our application to the public and it’s getting used every day, we’re really glad we selected Ext JS. The application has turned out to be everything we imagined and we like working with the Ext JS framework more and more.

As developers, we spend countless hours researching best practices to build engaging software. Often we find ourselves implementing the same repetitive functionality to wire our frontend to our backend. We’ve become accustomed to partaking in complicated design patterns to help separate logic from presentation - forcing the browser to play the role of a dumb terminal. While the RIA movement has unshackled the web browser from that awful fate, accessing our server side logic remains mostly unchanged. Ext.Direct aims to solve this issue for developers creating Ext JS applications by providing a single communication point with the server-side.

Common Concerns

At Ext, we’ve integrated Ext JS with many languages and platforms from Mainframe systems to Java to MUMPS to Perl. However, we noticed that there are several issues that are common across all server-side languages when creating Ext apps.

• How to organize code and where to place appropriate business logic.
• Parsing and formatting data on the server side.
• Keeping a maintainable structure.
• Parsing Ajax responses and retrieving error conditions.
• Doing data validation in multiple areas.

Wouldn’t it be nice if we had a cross-language standard that solved the problem the same way?

Introducing Ext.Direct

Ext.Direct is a new package in Ext JS 3.0 that helps alleviate many of these issues by streamlining communication between your client and server. When using Ext.Direct, you can expect to write 30% less code by eliminating common boiler plate code.

The Ext.direct namespace introduces several new classes for a close integration with the server-side. New classes have also been added to the Ext.data namespace for working with Ext.data.Stores which are backed by data from an Ext.Direct method.

Ext.Direct uses a provider architecture, where one or more providers are used to transport data to and from the server. There are several providers that exist in the core at the moment, for example a JsonProvider for simple JSON operations and a PollingProvider for repeated requests. One of the most powerful providers is the RemotingProvider.

RemotingProvider - Client-side Stubs

The RemotingProvider empowers the developer by mirroring server side methods on the client-side and allowing them to call the server-side methods as if they were sitting on the client-side. The server-side simply describes what classes and methods are available on the client-side. This allows for code to be organized in a fashion that is maintainable, while providing a clear path between client and server, something that is not always apparent when using URLs.

Intrinsic Call Batching

The provider immediately batches together calls which are received within a configurable time frame and sends them off in a single request. This assists in optimizing the application by reducing the amount of round trips that have to be made to the server machine. If a series of calls are received within the specified timeout period, the calls will be concatenated together and sent off to the server as a single request.

Server-side Stacks

In order for Ext JS’s Direct protocol to work you must have a compatible Ext.Direct Server-side stack residing on your server. The server-side stacks use a ‘router’ to direct requests from the client to the appropriate server-side method. Because the API is completely platform-agnostic, you could completely swap out a Java based server solution and replace it with one that uses C# without changing your JavaScript at all. Ext is providing a complete remoting specification along with several reference implementations of different server-side stacks in PHP, .Net, Ruby and ColdFusion. Each of these are licensed under an MIT license, so that the community can expand upon what has already been done and integrate them into their favorite MVC framework such as Zend Framework or Struts.

An Example - The Ext Support App

Support subscribers have a new tool at their disposal to receive a response from the Ext Team. We have developed the new Ext-based application that will be used to streamline the process of managing user support queries . The Ext support application is built on top of Ext 3.0 and utilizes Ext.Direct extensively.

In order to see the benefit of Ext.Direct more clearly, let’s take a look at how we utilized it. Ext.Direct enables server-side developers to easily expose methods from the server-side to the client-side. In this example, we are exposing two methods of the TicketAction class - getTickets and getOpenTickets.

We can now call these methods as if they were local client-side methods without worrying about how the request is sent to the server-side and how the response is processed. We can also use these methods to populate an Ext.data.Store with the new DirectStore object.

var store = new Ext.data.DirectStore({
    storeId:'open-tickets',
    directFn: TicketAction.getOpenTickets,  //it's really that easy
    paramsAsHash: true,
    idProperty: 'tid',
    fields: [{
        name: 'tid',
        type: 'int'
    },
        'title',
        'display_name',
    {
        name: 'last_post_time',
        type: 'date',
        dateFormat: 'timestamp'
    }],
    sortInfo: {
        field: 'last_post_time',
        direction: 'DESC'
    }
});

The TicketAction.getOpenTickets method can be called at any time, it is not required that it used solely in conjunction with a store.

I hope that the simple example above illustrates how Ext.Direct can help you better organize your client-server communication in your applications.

Ext.Direct Forum

We have added a new Ext.Direct forum under the the Ext JS 3.0 category. Several community members have already submitted server-side stacks for their favorite environments. We already have a list of several server-side stacks in a stickied forum thread. We encourage the community to contribute back server-side stacks for their favorite environments by implementing the Ext.Direct Remoting specification. There are five sever-side stacks currently available in our Ext.Direct pack with more implementations soon to come.

The Ext Team is proud to announce the release of Ext JS 3.0 RC1.1 available for immediate download. This new version of the Ext framework is the culmination of many long hours of dedication by the Ext Team. We appreciate our community of testers and supporters whom have made the stability of this release possible. Ext 3.0 is another leap forward providing increased performance, consistency, flexibility and UI enhancements to make you more productive - all without a significant size increase.

There are many enhancements in Ext JS 3.0, too many to include in a single post. Some of the major features in Ext JS 3.0 are the splitting of Ext Core and Ext JS, Charting for visualizations, additional User Interface improvements, CRUD-like support with Ext.data.DataWriter, Remoting using Ext.Direct, CSS enhancements to make theming easier, and Accessibility improvements - Section 508 and ARIA support. We also fixed several browser issues for the latest Chrome and Safari releases and added IE8 support.

Ext Core

The first major change to Ext JS 3.0 is that it has been built to sit on top of the new Ext Core library. Ext Core 3.0 is a lightweight library intended to give you all of the functionality to enhance a webpage. Drawing upon our experience creating rich user interfaces, we isolated the most powerful features used to enhance new or existing web pages and placed them in the Ext Core library. Developers familiar with Ext JS can leverage their existing skillset to provide an enhanced user experience to their web pages.

Winston Churchill once said, “We make a living by what we get, but we make a life by what we give.” As avid members of the open source community, Ext continues to give back. This time, we are releasing Ext Core under the permissive MIT license to be used by all for free.

New UI Features

Ext JS 3.0 introduces several new UI Components and enhancements to many existing components.

New UI Components

• RowEditor
• ListView
• Charting
• ButtonGroup
• GroupTabs

RowEditor

Editing a row in a grid just got a lot easier. The RowEditor is another great new UI component allowing you to rapidly edit full rows in a grid. You can even enable a validation mode which uses the new AnchorTips to notify the user of all validation errors at once.

ListView

ListView is a high performance, light-weight version of a grid like display. It provides you with selection, column resizing, sorting and other DataView features. The columns have percentage based widths and uses templates to render the data in any required format. If you need to show your data in a grid like display without some of the more advanced features of the Grid, then ListView is the perfect solution.

Charting

The Ext.chart package will allow you to visualize your data with flash based charting. Each chart binds directly to an Ext.data.Store. The new FlashComponent class, which extends BoxComponent, allows you to easily create custom Flash Components. By binding the charts directly to an Ext.data.Store, you don’t have to worry about updating your chart, they will update automatically.

ButtonGroup

ButtonGroup is a new component that will allow you to group together Buttons of different sizes to create complex toolbars enabling your users to find the most common actions first. We created an example to show the flexibility and power of this new component.

Sample code:

var btnGroup = new Ext.ButtonGroup({
       title: 'Clipboard',
       columns: 2,
       defaults: {
            scale: 'small'
       },
       items: [{
           xtype:'splitbutton',
           text: 'Add',
           iconCls: 'add16',
           menu: [{text: 'Add'}]
        },{
           xtype:'splitbutton',
           text: 'Cut',
           iconCls: 'add16',
           menu: [{text: 'Cut'}]
        },{
           text: 'Copy',
           iconCls: 'add16'
        },{
           text: 'Paste',
           iconCls: 'add16',
           menu: [{text: 'Paste'}]
        }]
     });

Grouped Tabs

Horizontal navigation can always be challenging. We’ve introduced GroupTabs to assist you in creating portal layouts similar to iGoogle, or providing a interface to access similar tasks quickly.

Sample Code:

var viewport = new Ext.Viewport({
        layout:'fit',
        items:[{
            xtype: 'grouptabpanel',
            tabWidth: 130,
            activeGroup: 0,
            items: [{
                mainItem: 1,
                items: [{
                    title: 'Tickets',
                    iconCls: 'x-icon-subscriptions',
                    tabTip: 'Tickets tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup         
                }, {
                    title: 'Subscriptions',
                    iconCls: 'x-icon-subscriptions',
                    tabTip: 'Subscriptions tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup         
                }, {
                    title: 'Users',
                    iconCls: 'x-icon-users',
                    tabTip: 'Users tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup         
                }]
            }, {
                expanded: true,
                items: [{
                    title: 'Configuration',
                    iconCls: 'x-icon-configuration',
                    tabTip: 'Configuration tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup
                }, {
                    title: 'Email Templates',
                    iconCls: 'x-icon-templates',
                    tabTip: 'Templates tabtip',
                    style: 'padding: 10px;',
                    html: Ext.example.shortBogusMarkup
                }]
            }]
        }]
    });

Enhanced Components

• Buttons
• Toolbar Overflow
• Menu Overflow
• AnchorTips
• Buffered GridView
• Debug Console

Buttons

Buttons in Ext JS 3.0 have been refactored to be a valid BoxComponent which enables them to partake in layout management. Buttons can now scale to any height or width and have advanced text positioning. Rather than being limited to only positioning buttons in a buttons configuration, they can now be placed anywhere you please.

Toolbar Overflow

Toolbars can now create a menu for items that don’t fit the visible toolbar area. The items in the menu still react with the same handlers as the toolbar items. This new behavior is turned on by default and can be disabled with the configuration option enableOverflow.

Menu Overflow

Menus now also handle overflowing in a more gracious manner. Whenever a menu gets so long that the items won’t fit the viewable area, it provides the user with an easy UI to scroll the menu. This feature is turned on by default and can be disabled by the configuration option enableScrolling.

ToolTips

Tooltips now support an anchor configuration which will allow you to bring attention to a particular element or component with a small callout arrow.

Sample Code

new Ext.ToolTip({
        target: 'bottomCallout',
        anchor: 'top',
        anchorOffset: 85,
        html: 'This tip\'s anchor is centered'
    });

Buffered GridView

Buffered GridView enhances performance by waiting to render rows until they are visible. As your user scrolls away from content which is no longer visible, the BufferedGridView will clean up the old DOM markup to minimize the DOM structure. As a result of the smaller markup, the performance of resizing, forceFit, autoExpandColumn and other layout and DOM manipulation features in a large grid will improve substantially. Buffer GridView is limited to working on fixed height rows.

Debug Console

The Debug Console has been revamped and we have added three new tabs, named Component Inspector, Object Inspector and Data Stores which are specific to Ext Development. Component Inspector will show you all components which have currently been registered with the ComponentMgr and the parent child relationships among components. By mousing over a particular component you will notice that it will be masked on the page. The Object Inspector will allow you to inspect objects and peek inside their contents. The Data Stores tab will display all stores which have been registered with the StoreMgr and how many records are currently loaded into each store.

Summary

This blog entry covers all of the user interface components which are new to Ext JS 3.0 or which have been significantly enhanced. Stay tuned for another entry that details all of the non-ui related improvements such as Ext.data package enhancements, Accessibility improvements, Ext.Direct and the refining of memory management within Ext.

Upgrading

User upgrading to Ext JS 3.0, will be happy to hear there are little to no breaking changes. We took great care in only creating breaking changes where absolutely necessary. You may encounter issues upgrading if you were previously manipulating private properties of an Ext.menu.Menu or an Ext.Toolbar or if you had custom styling of an Ext.Button.

Following a tradition started with Ext 1.0, we are offering a pre-release sale with hefty discounts to upgrade your 2.x license. If you’ve thought about purchasing an Ext License, for a limited time, you can purchase online for less than an Ext 2.x License. There’s no better time to support the Ext team.

In collaboration with Adobe, Ext is releasing several new enhancements to the Ext.air package today. These include improvements to existing classes responsible for Sounds, Windowing and Database as well as new classes responsible for Notification, Clipboard and File System Interaction. We have also added new samples demonstrating how to use these new features. One of these examples is ExtPlayer, a simple MP3 player, that leverages the new Ext.air.MusicPlayer and Ext.air.Notify classes. You can install ExtPlayer or download the source.

Ext.air.MusicPlayer

Ext 2.0.2 introduced an Ext.air.Sound class, which is useful for playing small sounds such as beep and chimes. In contrast, Ext.air.MusicPlayer is meant for long running sounds such as music and podcasts which you would never want multiple files playing at the same time. MusicPlayer supports all of the basic operations, stop, pause, play and skipTo along with supporting events. The MusicPlayer enables the developer to add music and podcasts to their AIR-enabled Ext application very quickly.

var mp = new Ext.air.MusicPlayer();
mp.adjustVolume(0.5);
mp.play(url);

Ext.air.Notify

The new notification class allows you to notify your users with toast or growl-like messages from the operating system. This allows you to notify users that something important has occurred even when your application may not be visible. By displaying these notifications at the operating system level it is sure to get the users attention without being lost within a browser tab.

var msg = 'Title: {0}<br/>Artist: {1}';
var sample = new Ext.air.Notify({
    msg: String.format(msg, id3info.songName, id3info.artist),
    icon: '../famfamfam/music.png'
});

Window and App API’s

We added methods and configurations for common window manipulation tasks that did not already exist. Ext.air.NativeWindow now exposes methods to re-order windows, set a window as always on top, and enable full-screen mode. A new singleton, Ext.air.App will allow you to set your application to start on login and get the currently active window.

Ext.air.App.launchOnStartup(true);

Ext.air.Clipboard

Ext.air.Clipboard allows you to interact with the system’s clipboard. Developers can determine if a particular format has data, set the data and get the data. At this point, this is largely a pass through to an existing class from Adobe air.Clipboard.generalClipboard. There may be enhancements or workarounds which Ext will add in the future including integration with drag and drop.

Ext.air.Clipboard.setData('air:text', 'Sample set on the clipboard');
var data = Ext.air.Clipboard.getData('air:text');

Ext.air.VideoPanel

Ext.air.VideoPanel enables you to embed flash based video while maintaining the same functionality as an Ext.Panel. VideoPanel’s can also take part in Ext layout management. This means that you can nest your Video’s in a border layout, add toolbars, buttons, just as you have become accustomed to. You just need to provide the recorded FLV to playback or provide a camera connected to the PC. You can even watch the video fullscreen in high definittion!

var vp = new Ext.Viewport({
    layout: 'fit',
    items: [{
        id: 'video',
        xtype: 'videopanel'
    }]
});
Ext.getCmp('video').loadVideo('sample.flv');

AIR and the Future of Ext.air

Adobe AIR enables web developers to use their existing skill set to create desktop applications. AIR is a cross-platform runtime and allows you to develop your application once and then deploy it across Windows, OS X or Linux. (The Linux runtime is currently in beta status.) Adobe AIR 1.5 was shipped last week at AdobeMAX and features database encryption, an updated WebKit (including SquirrelFish) and Flash Player 10.

Ext will be adding support to encrypt your SQLite database soon. Another exciting technology which was included in Adobe AIR 1.5 is PixelBender. PixelBender allows you to apply lightning fast image or video processing filters to your application. An important feature of AIR that many people are unaware of is that you can mix and match Ajax, Flash and Flex technologies. There are several existing open-source ActionScript libraries which you can take advantage of immediately by including them in your application. A new project from Adobe named Alchemy will even let you compile C or C++ code to the ActionScript virtual machine. You could then consume this code in an Ext application on the AIR platform! The entire Ext.air package including samples can be downloaded here. It will also be included in the next release of Ext.

We are pleased to announce that Ext has partnered with CacheFly, a global content network, to provide free CDN hosting for the Ext JS framework. Cachefly’s globally distributed network and aggressive caching accelerate the delivery of web content like JavaScript and CSS, making for an even faster Ext experience.

The Ext CDN also provides the ability to create your own custom builds using Ext’s Build It! tool, and host them on the CDN. The custom builder implements features to intelligently cache your component selections, adapter, and Ext version to create a unique custom build. These custom builds are cached across sessions and used by anyone who makes the same selections as you have - allowing for caching of custom builds across applications to fully realize the benefits of the CDN.

Creating a Custom Build

We’ve made the process of creating the custom build on the CDN as simple as a selecting the option.

Using the Custom build

To use your custom build on your own site, insert the output into the HEAD section of your site. If you needed to use a build with no grid or tree support you would just paste the following:

 <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-7.js"> </script>
 <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css" />

For those of you that need the complete library and use ext-all.js and ext-all.css we have those available as well.

 <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2/ext-all.js"> </script>
 <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css" />

Summary

There are many ways to judge an application’s performance, however none are as noticeable as the time it takes for an application to load. There are many techniques such as compression using gzip , minification using JSMin, and tools like YSlow to help developers make noticeable improvements. We hope the Ext CDN is another optimization our community will add to their toolbox.

We first heard about Marketo a long time ago, as they were a very early adopter of the Ext framework. The initial version of their marketing automation application was very nice even using pre-1.0 versions of Ext, and it has steadily improved over time. In addition to using the standard Ext components extensively, Marketo also employs their own custom UI theme to give the application a polished and distinctive look. They have also extended the base Ext platform with many sophisticated user interaction techniques that add power and expressiveness to the user experience.

I recently spoke with Glen Lipka, Marketo’s Director of UX and Product Management, and Paul Abrams, lead UI engineer, about their application and their use of Ext.

Tell us a little bit about Marketo and how you’re using Ext.

Marketo is sophisticated yet easy marketing automation that helps B2B marketing professionals drive revenue and improve accountability. In short, we are a Marketing department’s one-stop, on-demand resource. We use Ext as the fundamental base for the client-side interface. Additionally, I use the numerous examples posted on extjs.com and the forums as my UI design toolkit. When faced with a feature or problem, I often look at different UI examples. The samples on Ext give me confidence that we could implement that approach quickly without reinventing the wheel.

Did you evaluate other JavaScript frameworks when starting work on Marketo? Why did you choose Ext?

We started using Ext very early, when it was called YUI-Ext. We were using YUI and Prototype and homegrown and others at the time. The mishmash wasn’t helping us, rather it was making maintenance difficult. When we started using YUI-Ext 0.33, there were lots of hurdles, but it still made things much better. We understood the vision and bought in. We skipped 1.0 and introduced 2.0 when it came out in Beta. By this I mean that we ran 0.33 and 2.0 simultaneously. The new efforts in 2.0 totally transformed our development process. The flexibility of the system and the general intuitive nature of how it was built made it an easy choice to standardize on.

How does Ext fit into your overall technical architecture?

We have a LAMPhp stack using the Symfony framework. Before Ext, we used a lot of one-off HTML. The CSS and HTML burden of trying to maintain duplicate code everywhere was a hassle. Now, we use Ext configurations and subclass components we want to extend. The potential of UI variations has dropped significantly and we can now reuse UI patterns much more effectively.

How has the transition from .33 to 2.0 been going?

We introduced 2.0 in the fall of 2007 and ran it with 0.33 and our legacy code. The new tree, grid and other components were much more in line with our needs. There were many useful enhancements in 2.0.

We are finally ready to remove the legacy 0.33 code. We hoped the technical switch would involve upgrading components to their Ext 2.x equivalent and be relatively painless. It took six months on and off experimenting with different strategies before finding a new app structure and upgrade approach that worked, and then a couple of months of solid work rebuilding all the components derived from YUI and YUI-Ext 0.33 from scratch in Ext 2.x. Unfortunately, little was reusable. We have delayed a few components while we are designing a new skin, and later this year we will have a 100% Ext 2.x application. This has been a long time coming, but we are excited about it.

The Marketo application is extremely feature-rich. How did you manage the UI code complexity?

Just like Ext, we organize our code base into components and try to reuse as much code as possible. For example, our main Viewport lives in a folder/namespace and gets its own .js and .css files. We also have custom extensions for most of the major building blocks such as trees, combo boxes, grids, dialogs, etc.

What features could we add to Ext to make building a rich application like Marketo easier in the future?

There have been several places where building a custom extension involved overriding private methods, so more subclass hooks and smaller methods would help.

Ext also needs a unified Ajax session manager similar to the role of the Ext window manager. A rich web application like Marketo needs more management over the user session, such as detecting a session timeout and showing a login prompt. Another example is managing groups of Ajax requests, so that making a request to the same group could abort ongoing requests. Building an Ext RIA would involve creating a Viewport and an Ajax session manager, and then building components on top of that foundation. We rolled our own session manager in the 0.33 days and need to hook in the new Ext 2.x components.

Do you have any advice for developers just starting out with Ext for the first time?

If you are building a large application, don’t try to use Ext to decorate an existing app via “unobtrusive JavaScript” or build an app half with conventional construction and half with Ext. Instead, embrace Ext as a framework and start from scratch with something like a Viewport, and build components on top of that foundation.

We love to see all the different types of applications developed using Ext. SingleHop has developed LEAP, a server management application that gives the end user significant power over administering their remote servers via the web. They started off by customizing our popular web desktop example, but have added lots of neat goodies like dynamic charting, visual server provisioning and built-in SSH and remote desktop capabilities.

I recently spoke with Dan Ushman, a co-founder of SingleHop, to get the scoop on LEAP and find out more about how they used Ext.

Tell us a little bit about LEAP.

LEAP is a first-of-its-kind server management portal designed to allow our dedicated server clients to easily and effectively manage multiple servers from one interface.

Did you evaluate other JavaScript frameworks before deciding on Ext? How did you choose?

We selected Ext JS because, frankly, there is nothing quite like it out there. We thought that our unique product deserved a unique framework that offered true desktop-like UI features. The framework was also selected from about a half dozen other options by our developers for being easiest to work with and most flexible.

How does Ext fit into your overall technical architecture?

We integrated Ext JS into our own back end system, called Manage, built in PHP. The system is purely a LAMP-based setup, using CentOS and Apache with MySQL and PHP running the code. SingleHop has always been a supporter of open source projects, such as Kernel.org and the CentOS project and we’re proud to have built our infrastructure on open source software.

You have customized the Ext desktop example in LEAP — what other types of custom components did you create?

We have not created any custom components/extensions for our initial release, but we did take advantage of a large number of community-created components and hope to give back to the community in the future with any custom components that do get created.

LEAP has a custom theme that nicely fits your company look. Did you use a community theme or create your own?

We did in fact use madrabaz’s Olive Theme in LEAP. The color palette perfectly fit in with our corporate color scheme.

What has been your overall experience using Ext so far?

After some initial confusion with the radically different development process that goes along with an Ext-based site, our development team fell in love in Ext JS. The plethora of components available really help to accelerate the development schedule and are a pleasure to work with.

Do you have any advice for developers just starting out with Ext for the first time?

We found that the best way to dive into Ext was to simply dissect the sample code that it comes with. Most of the common uses for all the components seem to be represented in the sample code. We also found the community forums to be an invaluable resource. The wealth of knowledge represented was large enough for us to not even have to make a single post on the forums.

Last week I had the pleasure to sit down with the team at Red Sun Systems to have a demo of VersoChat, their website chat management application. This is a very interesting tool that allows visitors to request chats with site operators, and for operators to push chat requests to site visitors. The console application includes many features for monitoring site usage, managing and transferring chat sessions, etc. and the UI looks fantastic! VersoChat is an existing application, but they have recently retooled the user interface from the ground up using Ext 2.0 and are launching the new version this week.

Tell us a little bit about VersoChat and how it evolved from its original version.

VersoChat is a web-based, multi-platform live chat solution with real time analytics for businesses with websites. Originally, VersoChat used simple PHP/MySQL scripts for both the font and back ends. Each chat session had to be opened in a separate browser window, and the live monitor was missing some of the functions that now are possible thanks to Ext. With Ext everything has changed. The UI is much more intuitive and easy to learn, and we implemented a lot of new features. For example, ChatTabs (multiple chats can be now handled in one window), GeoIP, IP labeling and many more great features are now possible that make VersoChat a top notch solution for live chat! VersoChat currently is only web-based, but now with Ext enabled our possibilities are endless and we plan to create a downloadable version with Adobe AIR in the near future.

Did you evaluate other JavaScript frameworks when starting work on VersoChat? Why did you choose Ext?

Our general development experience was very good. Our live chat application was built in PHP and we wanted to have a robust, responsive and desktop-like front end for the new version of our application. We compared various JavaScript frameworks and found Ext’s features most suitable to our requirements because the widgets were extremely good-looking with professional quality. And most of the widgets we needed like panels, grids, forms etc. were available out of the box which made it a lot easier. When I came across your website and saw the BorderLayout example, I just fell in love with it and thought: “Where were you Ext when we started development on the first version of VersoChat?”

How does Ext fit into your overall application architecture?

The main work was in porting an already working application (chat support system) to Ext. So our work was really on the front end side of things along with changing the back end code output to suit our new AJAX needs. Our application still has PHP/MySQL as the back end, and Ext serves the front end. As our application was already running, there were some problems and issues in porting it to Ext, but those were gradually solved.

The VersoChat operator console is a pretty complex application. How did you manage the coding complexity?

It is true that the VersoChat operator console is a complex application, but given the power of Ext, it was not much of a problem. We mainly required grids for presenting user data and forms for getting input from the user. Ext’s Grids, Forms and Tabs made programming a lot easier. Much of the AJAX request handling, error checking and validation was easily and gracefully handled by Ext.

What features could we add to Ext to make building a rich application like VersoChat easier in the future?

Tab panels don’t support title/header which is required in certain circumstances. Size of Ext is an issue but considering the functionality it provides, you can’t really complain. And once the things load the performance is always good afterwards.

Do you have any advice for developers just starting out with Ext for the first time?

Learning Ext can be a bit intimidating in the beginning due to its steep learning curve but I guess that’s true for every framework out there. So be patient! Layout implementation is a major part of this framework and many issues can be solved just by using the right layout for parent and child elements, so try to understand the Layout structure of Ext.

One thing we plan to do more often is focus on how Ext is being implemented by real companies doing real business. As a perfect example, we recently ran across a company called Jama Software whose flagship product, Contour, a fully web-based requirements management application, sports a complete Ext-based user interface from top to bottom. It’s easily one of the most sophisticated and visually polished Ext applications we’ve seen yet. We decided to find out more about Contour, so we interviewed 2 of the co-founders of Jama Software, Sean Tong and Derwyn Harris, who lead the Contour development team.

Tell us a little bit about Contour and your goals for the application.

Contour is designed to provide project teams a collaborative approach to requirements management. Traditionally, requirements were locked away in massive specification documents or bulky proprietary desktop apps that only a few people on a team controlled and these approaches too often resulted in frustration, errors and delays. We wanted to provide an alternative that embodies much of what Web 2.0 is all about, where the application is 100% Web-based – unlocking the requirements, use cases and other items, giving everyone instant access to the system and thus enabling teams to work faster.

From a developer’s perspective we wanted to build an application that was light-weight and flexible, which meant that the architecture had to be designed such that sections could be ripped out and changed. The UI has always been the hardest part.

You must have evaluated other popular JavaScript libraries when starting work on Contour. Why did you choose Ext?

When we started building Contour about 2 years ago we knew we wanted a rich interface and actually debated using Web Start or XUL. However we ended up using Spring, Hibernate, and JSP simply because it was what we knew best. We continued to pursue alternatives to making the UI richer and came across DWR which opened our world to Ajax. We then started evaluating different JavaScript libraries for the UI and finally settled on Dojo…Ext never even came up.

A year or so later with Dojo fully in place, Dojo announced it was developing their .9 with little or no support for .4 which we were on. Knowing there was an imminent migration it was as good a time as any to re-evaluate our choice. Around this same time a buddy of mine mentioned Jack Slocum and Ext. The documentation, UI and support were impressive so we did some evaluations and decided to switch to Ext. Our choice came down to documentation, layout, tree, and grid support.

What has been your experience so far using Ext in your project?

The documentation has been wonderful, the code is clean and the structure makes sense. It seems well thought out. The forum is very active and the Ext team is doing a wonderful job to respond to questions quickly. The community as well is quite involved in sharing best practices and tips which is always a good sign. When we have questions, we can usually find answers in either the API or the forum.

The migration of Contour from Ext 1.1 to Ext 2.0 took us more than 2 months, which is longer than what we expected. But we think the effort was worthwhile since Ext 2.0 is faster, cleaner and more consistent. We certainly hope future migrations such as 3.0 will be easier.

How does Ext fit into your overall application architecture?

Ext is 100% of our UI at this time. Basically our architecture is such that our UI is almost purely Ajax driven which provides a clean separation from UI logic and Server Logic. Our backend is developed using Spring, Spring MVC and Hibernate. The communication between client and server is through DWR. We have built 180+ custom Ext widgets for forms, dialogs, grids, trees etc. and the main application is a single HTML-less page.

We see a lot of opportunity to open our application up with Web Services and plug-ins. Ext’s architecture being configuration driven makes it possible to fit in our future plug-in framework.

What’s missing in Ext, or what do you wish it did better?

The biggest areas we’d like to see are best practices for memory management (e.g., properly destroying widgets, managing memory leaks, etc.), and continued enhancements to layouts and forms (enhanced layout flexibility when designing complex forms, integrated support for hiding/showing fields based on configuration rules, etc.).

Do you have any advice for developers just starting out with Ext for the first time?

Ext has great documentation. Pouring through all of that is essential. It’s clear and very helpful. Then check out the examples, reading the source to see how it is done. Then start creating your own, checking the API and forums for help.

Adobe recently held a contest called the Adobe AIR Derby, an international competition open to software and web application developers to showcase their skill in using Adobe AIR Beta software. Contestants were able to submit their entries to different application categories and were judged on originality, visual design and appeal, usability, and application of Adobe AIR functionality in the following categories: best business application, best community application, and wild card.

We’re proud to announce that Ext-powered application Ora, developed by John Wu, won the Best HTML Business Application category:

“ORA Time and Expense is an application for tracking timesheet tasks and expenses. It can also generate and export reports such as timesheets, expense reports, and invoices. It uses the webcam APIs assist in the filing of expense reports by taking pictures of receipts and including them in the expense reports.

Built using the Ext JS Ajax framework, the user interface includes wizards to help with data entry. The wizards smoothly slide in from the edges of the window allowing the user to maintain context while navigating the application. A timer in the upper left discretely logs the amount of time that has been spent on a specific task making it easier to keep track of billable hours. Data is managed using the local embedded database and reports are written to the local file system in HTML format.”

Full details of John’s Ora application can be found at his site along with a video demo of the application. You can also install Ora straight from the project page.

Requirements:

• Windows XP SP2, Windows Vista Ultimate Edition, Mac OS 10.4.8 and 10.4.9 (Intel and PowerPC). Linux version coming soon
• 2 MB free hard drive space
• Adobe Flash Player 9.0 & Adobe AIR (beta1)

Ext developer Yuki Naotori of Tokyo was the first place winner in Sun Microsystems’ Japan Mashup Award 3rd contest. His winning application, ONGMAP.com, is a geo mashup that collects a vast range of information about what is at a given location and makes it easily locatable on a map of the world.

“If you look at ONGMAP.COM, you can easily notice it owes a lot to Ext (and if you look into its source code, you can easily notice that I’m not a professional programmer…, but, I did win the award thanks to Ext’s powerful and easy to use framework)”

By looking at the application, it’s immediately evident how much effort Yuki dedicated to enhancing the user experience:

Features include:

• Mashup with Google maps
• Localized weather and news for specific points on a map
• Keyword tagging
• Twittervision-like behavior
• Mashup with Google maps

You can read more about the application at Yuki’s blog and see Yuki’s prize winning site at ONGMAP.com.

Congratulations Yuki!