6 Dec 2012 5:58 AM #1
Sencha Touch performance
Sencha Touch performance
I am an experienced native developer, working with both iOS and Android platforms and convinced that the fastest and easiest way to create an app that would offer an outstanding user experience is to go native, although you'll need to do most of the work twice, once for iOS, then for Android.
A year ago I had my first chance to figure that out as I was a part of a team creating a Sencha Touch prototype for a client. My part of the work was to create an animated chart that would perform close to native, and I managed to achieve that using CSS3 transitions. Then I integrated that chart into emerging Sencha Touch app. That was the time when we were using Sencha Touch 1 and trying pre-release versions of Sencha Touch 2.
There were three of us in the team, one of us was fairly experienced with Sencha Touch, and we spent two months working on that prototype, still having some problems with animations being jerky, the whole thing not working properly on an Android tablet (even after Sencha Touch 2 was released), some buttons not appearing where they were expected etc.
If I had chance to create that app natively, I would spend less time just on my own for both iOS and Android versions. There would be no performance or layout issues whatsoever. My opinion about cross-platform development with Sencha Touch at that point was as follows:
1) Requires times more effort, and a lot more code, than native development.
2) Isn't really cross-platform. Works mostly okay on iOS devices but behaves quite badly on any other platform.
3) Sluggish. In only a few cases the performance was anywhere close to native.
4) A ridiculous tool chain. I still remember installing some obscure bits of software to get even the basic functionality working.
Fast forward one year, yet again I work for a company willing to explore the prospects of HTML5 development. Now that Sencha Touch 2 has matured, already in version 2.1, and has a nice tool like Architect 2, I decided to give it another go.
I went through the Build Your First Mobile App tutorial with the Architect and enjoyed the tool very much. It still has some wrinkles but is really a pleasure to use. The CityBars app seemed to work fine - until I deployed it to a real device. Then it was a disaster. The performance was simply awful. The list of the bars took ages to respond to a touch, and if I impatiently tapped it more than once, it would then react twice, animating the same detail view to slide in, and then I had to go back twice. It was *really* bad, despite being such a simple app.
In fact, it was much worse than my previous experience with Sencha Touch a year ago. Why is that, I wonder? I did nothing wrong, I believe, just followed the tutorial. Are there special steps required to make a Sencha Touch app less sluggish?
My colleague pointed me towards this Burrows success story. I tried to find that Ford Showroom app mentioned in the article on the App Store but couldn't, but I found another app by Burrows, Ford Focus. It is crude and kludgy, easily the worst example of what can be done with HTML5, but to be fair, it was probably developed with Sencha Touch 1.
So I wonder if someone could explain me, first, why a trivial tutorial app has such a poor performance on a device, and is there anything that can be done to improve the performance?