Sencha Ext JS Spotlight: KiteDesk

KiteDesk funnels your most important cloud information into a single data stream. The idea is simple: consumers use Dropbox, Facebook, Gmail, Twitter, LinkedIn, etc., but switching between apps is a pain. KiteDesk brings them all together, so users can view emails, social media posts, calendar items, contact info, docs, pictures and videos in one place — no more “app-flipping.” Users can also build custom streams, for things like work, book clubs and softball leagues.

Why We Chose Sencha Ext JS

We selected Ext JS because it offers a very complete and robust client-side framework with beautiful built-in controls, and a simple but powerful programming model. We needed to enable a team of experienced Java developers to deliver a very sophisticated HTML5 based application with minimal startup time. Ext JS does a wonderful job of promoting a model, view, controller (MVC) architecture which is very familiar to programmers from a number of backgrounds. We designed KiteDesk’s user experience to feel like an app, and that required the latest web standards and capabilities like offline storage. Ext JS made it easy to load information from our existing REST services, store it, and to link it to our user interface controls using a convention over configuration approach.

The screenshot above shows KiteDesk’s Messages. The left column uses a subclass of the Ext JS Grid Panel to list email accounts and folders. The Grid Panel ties an interactive view with an underlying data store, in this case the mail accounts and folders. As accounts are added or updated with new messages, the list is automatically updated to match. Here we display accounts as icons, each with its own tooltip describing it in more detail.

The middle column lists mail messages for an account, and it also uses a Grid Panel filtering messages on the account and label selected in the navigation.

KiteDesk makes heavy use of many Ext JS built-in components like Panels, GridPanels, Windows, Buttons, Stores, etc. We also created a number of application-specific components to give the app its unique look and feel. In the Messages mail client, for example, we wanted to display messages using a distinctive and interactive card-like format. Since a user checking their inbox will be viewing one message thread after another, we wanted those cards to be as lightweight as possible and for the user experience to be fast and responsive.

“We selected Ext JS because it offers a very complete and robust client-side framework with beautiful built-in controls, and a simple but powerful programming model.

Our custom MessageCard component is based on the Ext JS Container component and includes a header, body and footer, each of which is pure generated HTML that can be updated independently of the others. Using HTML keeps our component lightweight, so it’s quick to draw, update, and tear down. A single click handler determines which part of the card was clicked on and fires the appropriate event to trigger a reply, forward, mark unread, etc. Following MVC conventions, those events are then handled by the appropriate controller.

Our early versions of MessageCard were built using standard Ext JS buttons and other components, which made it easy to rapidly prototype and try out different approaches and layouts. Once we settled on the best one, we then customized the component to generate hand-crafted HTML and minimize the JavaScript objects needed for each card to further improve performance.

The Ext JS documentation is top notch, and it was easy for our team to learn quickly and get the most out of the framework. We were pleased to discover that the online version of the doc includes user comments which we were very helpful. And, of course, the Sencha Forums were incredibly valuable and useful as well.

All in all, Ext JS is a solid and mature framework, and one we trust to build our product on. We have also found the Sencha community to be friendly and knowledgeable, which helped us tremendously.

We make extensive use of the powerful Event support Ext JS provides to seamlessly wire our application. For example, clicking the star icon on a message adds that message to your favorites. Behind the scenes that click fires a starMessage event which is handled by the MailController which takes care of the logic behind that action. That event could also be triggered by choosing the “Star Message” menu item, or by whatever other method you wish, but regardless of its source the event is captured and handled by the MailController. This is just one example of how Ext JS makes it easy to leverage MVC architecture, which cleanly separates the view (that users see and interact with) from the underlying controller logic.

Business Value of Using Sencha Ext JS

Ext JS offers an environment that is completely extensible and does not box developers into corners. It’s a core part of our product strategy because it allowed us to migrate our team of Java developers to an HTML5 based project faster and more efficiently. We got our team up to speed quickly using the extensive, high quality documentation. We didn’t face challenges of having to use disparate 3rd party controls and competing core programming models. Our initial prototype was delivered in much less time than it would have been using other JavaScript frameworks, and we were able to create a clean and modern UI. By using Ext JS, we were able to get our initial product to beta sooner which allowed us to get user feedback early in the cycle saving us time and money beyond the pure productivity gains offered by the framework.

Our Advice to New Developers

Ext JS will make it easy to develop your applications. It’s tempting to jump in and start writing your application immediately because the framework is so approachable. We recommend that you spend some time up front reviewing the examples and the documentation. Take advantage of the MVC convention that is built into Ext JS because it will minimize the code you write. If you find yourself writing a lot of code, it’s likely that you have missed some of the core capabilities and best practices of the framework. The event handling, CSS compilation, and other features of the framework should be invested in and understood at the onset of your project because using these capabilities will save you a huge amount of time over the long run.

Final Thoughts

Ext JS is a great framework and the Ext core that is largely shared between Ext JS and Sencha Touch is a powerful programming model for HTML5 based applications. It’s made our developers more efficient and has helped us to evolve KiteDesk quickly.