6 Dec 2012 5:58 AM #1
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?
8 Dec 2012 6:06 AM #2
- Join Date
- Mar 2007
- Gainesville, FL
- Vote Rating
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.
Sencha Inc, Senior Software Engineer
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services firstname.lastname@example.org
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!
When posting code, please use BBCode's CODE tags.
24 Feb 2013 5:50 AM #3
Are there sample apps that demonstrate how to achieve acceptable performance?
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 #4
I would like to see some examples of these techniques too, if there are any ?
29 Apr 2013 12:07 AM #5
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!