View Full Version : Sencha Touch performance

6 Dec 2012, 5:58 AM
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.

I was always curious though whether those claims regarding the benefits of cross-platform development with JavaScript and HTML5 have any truth behind them.

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 (http://www.sencha.com/blog/sencha-customer-spotlight-burrows-ford). 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?

Also, are there any nontrivial apps in the world that showcase the best of what Sencha Touch can do? I would be interested to see if they can really compete with native apps in terms of user experience.

8 Dec 2012, 6:06 AM
I haven't looked at the apps you mention but I do built quite a bit of extensions and applications. Developing for iOS is extremely easy, just a few things to watch out for. Android on the other hand using the stock browser or Chrome it has issues. The stock browser is not developed on any more which is a shame as it has quite a bit of issues with the javascript and css engine, it can easily struggle with some basic css transforms. Chrome is actively being developed and will replace the stock browser hopefully very soon (Nexus 7 it is the stock browser!) and is much better than the stock browser but still has it's issues.

The biggest performance hit you will take is the size of the DOM, how many elements are rendered at any given time. The larger the DOM, the slower and twitchy the animations will look. Also the slower it can react to things like user interactions.

Here is a scenario. Say you are using a container with card layout so you are only seeing 1 item at a time and you use setActiveItem method to switch between the items. If you have 5 items and each item has 10 items then you have 50 components rendered which can cause the DOM to swell in size. I usually only render what is currently visible so I only have 1 item added to the parent container and then add/remove items as I want to switch to and from items.

24 Feb 2013, 5:50 AM
Likewise, I am writing apps that are only useful on mobile devices (not web sites). The Sencha performance of modest apps is not acceptable - very sluggish with poor responsiveness. Are there sample apps that demonstrate how to achieve acceptable performance? You & others note catching requests, removing non-visible elements & only rendering visible elements. Are there examples of these techniques, for example, a tab panel with several image carousels, forms, etc. Thanks, Matthew

23 Apr 2013, 5:36 AM
I would like to see some examples of these techniques too, if there are any ?

29 Apr 2013, 12:07 AM
I'd also appreciate it if someone could upload an example with all the techniques that supposedly make sencha touch faster. Please consider to upload some examples. Thanks!