Tales of a GeekTrotter Binary Logbook

15May/121

Mobile Applications in HTML5/CSS3 with Sencha Touch

A few years ago, I was writing about building smartphone applications with Rhomobile Rhodes.

Since then, I also tried several frameworks, such as Appcelerator Titanium Mobile but was especially satisfied by a relatively recent one, using only web technologies: Sencha Touch 2.0.
My main concern about Titanium Mobile is that the generated application was not behaving the same on Android and iOS (and was not working on iOS).
After writing code and testing on Android, I was very frustrated that it didn't work out-of-the-box on iPhone.
I didn't really have time to investigate the problem, but it gave me a bad image of the product.
That's how I ended up trying Sencha Touch 2.

A quick summary of the strengths and weakness of Sencha Touch 2.

Strengths:

  • Rapid testing (inside the browser)
  • Good User Interface API
  • MVC Design Pattern
  • Provides a GUI for quick mockup (Sencha Architect)
  • Pure HTML5/CSS3

Weaknesses:

  • New, working fine on Mac (from what I heard/read), but unstable on Windows/Linux*
  • Is limited by the cross-domain security that prevents from fetching data from other domains that do not?explicitly?allow it if ran in the browser (not packaged as an application)
  • Needs to be integrated into another framework such as PhoneGap (Cordova) to be packaged as a real?application*
  • Tiny visual difference between the desktop browser rendering and the smartphone browser rendering (text is not coloured in one of the pages)

*The Sencha command-line is supposed to provide packaging, but doesn't work well on Linux so I had to integrate the app inside a PhoneGap project to deploy as a real?application.

It took me about 8 working hours (a geek weekend) to build a simple application from scratch.
For testing, I created a small application that allows you to add transactions to the easy online money management service Buxfer, which provides a JSON API (Sencha Touch 2 can easily handle data coming from JSON/JSONP objects).

The application is very basic: 3 tabs (Home, Add and Logout).
On the Home tab, I list the accounts and the last transactions.
On the Add tab I allow to add a transaction (an expense or an income).
And the Logout tab will log the user out.

The application works very well on the desktop browser, and it's really fast to test our program:

However, there are a few differences on the real?application on the smartphone:
- There are no colours on the accounts balance listing (should be green if positive, red if negative)
- It's hard to make the checkboxes on the Add tab activate (touch)

I recorded a video of the real?app running on my phone, not really good quality but gives an idea of the rendering:

As we can see, it's still very nice, and I'm sure the little problems will be fixed soon.

You can find the source code of that application on BitBucket: Buxfer Mobile

Next time, I'll try another promising mobile framework: jQuery Mobile.