Take note of Sencha: an application-centric HTML5 framework and IDE, now with native packaging

I have been spending some time with the recently released Sencha Architect 2. This is a development environment with three core components:

Ext JS 4.0 Framework: an HTML5 application framework for desktop browsers
Sencha Touch 2.0: an HTML5 application framework for mobile browsers
Sencha Architect IDE: a visual development tool for both Ext JS and Sencha Touch
Architech is a commercial product, but there are free and open source versions of Ext JS and Touch with various licensing and support permutations available.

I installed Sencha Architect on Windows, which works though I cannot quite describe it as Windows-friendly; there is a Mac flavour to the documentation and nothing quite works in Internet Explorer, Chrome or Safari is recommended.

What you get though is an elegant IDE which is focused 100% on applications, rather than general HTML design. It is not Eclipse-based, which I found interesting having recently also tried the latest Titanium IDE from Appcelerator, which is built on Eclipse. Although Eclipse is a wonderful thing, it does add complexity and overhead compared to a lightweight, dedicated IDE like Sencha Architect.

The frameworks are also interesting. Both Ext JS and Sencha Touch (which are similar in many respects) are based on a Model-View-Controller design, and this is neatly expressed in the IDE which shows Controllers, Views, Stores, Models and Resources in its Project Inspector. A store is essentially a collection of model instances, and might for example be an Ajax proxy retrieving JSON data from a remote URL. The image below uses this technique to show bars in London. The app is designed for a smartphone, though I am displaying it in Google Chrome to test.

A great feature of the latest Sencha toolkit is that you can package apps as native apps for Android or iOS. Support for RIM Playbook is also planned. You can even package for iOS on a Windows machine, though of course without the benefit of the iOS simulator. Sencha's approach to native packaging is similar to Phonegap/Cordova, in that it uses the embedded browser on the device. However Sencha is not using Phonegap, but as far as I can tell, draws on technology acquired from Nimblekit, a small company specialising in native apps for iOS with HTML and Javascript acquired by Sencha.

These frameworks are not the easiest to pick up quickly, but I was struck by the clean design of both the code and the IDE. Further, Sencha apps generally look good and in many cases the visual components come close to what you can achieve with native code.

From what I can tell, the pressure on developers to create apps that play nicely with a variety of devices, from Windows desktops and laptops through to iPads and Android smartphones, will only increase. Sencha is worth a look.