„RIA goes mobile“ : My article on Sencha Touch published in Mobile Technology

In the last years I had the chance to develop some applications with the ExtJS RIA framework and I was deeply impressed by the flexibility and power of the framework. I think, that the programming model, meaning the way how a programmer can use the framework to implement logic and presentation, is largely the reason for this. Therefore, it was quite clear to me, that I had to try out Sencha Touch as well, since it is simply put ExtJS for mobile devices.

Sencha Touch is a framework for developing mobile web applications on the basis of HTML5, CSS3 and JavaScript. The resulting web applications can be run on nearly any mobile browser, eliminating the differences of the platforms for the developer. Thus, you only need one code base and don’t have to develop a separate application for every platform.

My article can be found in full length in the January issue of “Mobile Technology” magazine (http://mobile360.de/mobiletechnology). The article contains an in depth description of the framework, using a web app I implemented for A:gon Solutions (http://www.agon-solutions.de) as an example. The idea behind the app ist hat the company needed a possibility to gain feedback on the many customer events. In the app the customer can score the presentations and talks of the event and give recommendations on what he expects from the next workshops. Actually, the web app is deployed on Google App Engine which was a first timer for me (http://agonfeedback.appspot.com/).

Considering the special situation, a mobile user finds him in, the design of the web app focuses on ease of use and simplification. Therefore, I abandoned little checkboxes and complex selection boxes in favor of big buttons and clear symbols. Also, swipe gestures are used to switch from one page to another or back, if needed. Sencha Touch really makes this easy, by carefully integrating these “swipe” events into the standard programming model of the framework.

Working with the Sencha Touch really is fun, especially if you are already acquainted with ExtJS or another similar JavaScript framework. With this kind of experience getting into the framework and coming up with first results is a matter of hours at most. Only some lines of code are needed in order to build complete application Frontends. The following code snippet shows a class, which defines the basic properties of the app:

var App = new Ext.Application({     

    name               : 'FeedbackApp',

    defaultUrl         : 'index.html',     

    launch             : function () {                               

          FeedbackApp.ViewportClass = Ext.extend(Ext.Panel, {

                fullscreen: true,

                items: [ carousel ] // carousel defined elsewhere         

          });                

          this.viewport = new FeedbackApp.ViewportClass();     

   }

});      

As a mobile framework, Sencha Touch also contains elements to cope with device orientation (landscape vs portrait). Although this is possible it proved to be not so easy as the rest and maybe needs some more thinking on the side of the framework developers. One more lesson I learned while doing the app: don’t use absolute sizes for your GUI elements since you will run into trouble on the very first phone you did not test it with.