PhoneGap 1.4 wrapping Sencha Touch 2.X - What about performance?

Question

I'm building a multiplatform tablet app wrapping it with Phonegap 1.4 using just its webview, then I work my magic with the Sencha Touch 2 framework. By multiplatform I mean iOS 5.X+ and Android 3.0+ (for now).

This app is working great so far, all its features work on both systems but... On the Android tablet (Samsung GalaxyTab) its really slow. What's happening? Can I do something about it, or its just android's limit?

Thanks

Ricardo Perre: http://edgecodetechology.blogspot.pt/

---

****EDIT**** (I'm trying to make this post somewhat useful to sencha community)

Sencha Touch, like many other Javascript Frameworks are not the best example of performance due to javascript itself.

Then Why use Sencha Touch?

• In my case: Multiplatform (iOS, Android, Windows Phone, Blackberry, Windows, Mac OSX, Linux. Sharing 80-90% of the code)

Mitigating performance issues due to lack of visual pre-process in Android systems:

1. CSS3 heavy visual process:

   • Avoid Gradients
   • Avoid Shadows
   • Avoid Transformations and animations

2. Good MVC practices:

   • Don't use more views and you actually showing
   • Pre-render / Pre-datafetch when possible to avoid render and data process simultaneously

3. For any scrollviews, overscroll should be disabled on Android. I've tested many Sencha Touch 2 applications on Android devices and overscroll causes badly unpleasant experience because of delays and lags. (tested on Galaxy Tab, Nexus S, and some HTCs) by Thiem Nguyen (I've been mining your posts, sorry dude :P)

Answer 1

Same here. I've tested many of my Sencha Touch 2 applications on Samsung GalaxyTab and the performance is really terrible. There's a fact (which maybe a part of actual reason) that, iOS does many pre-process and calculation before rendering to make it seems smoother to user's look and feel, while Android tends to render & process simultaneously on the go.

In general, it could be say that, to every cross-platform mobile apps built on Javascript, like Sencha Touch, iOS performance is significantly better than Android. However, Sencha Touch dev team is trying their best to improve this, hopefully it would be better in next releases. You could see this article about iOS & Android devices performance comparison.

http://www.sencha.com/blog/sencha-touch-2-developer-preview/

PS: While it's much relevant to the OS's limit, you can also optimize your app to make it perform better on Android devices. To my experience, the best practice is:

• Do NOT use CSS3 too much.
• Keep your DOM as minimal as possible.

Hope it helps.

Answer 2

I´m not a phoneGap or Sencha developer whatsoever, but i try to keep up with what concerns browsers performance and evolution.

You got so many abstraction layers (sencha touch, phonegap, android, webkit, fffuuu) for your app that it may be very hard to understand where performance issues are.

As far as i get phonegap design, it does not embed any webkit implementation, what it does (on android) is to make use of android.webkit.WebView. I found many people complain about how webview got a terrible performance over android webkit browser itself. it may be hard to improve here, since you are using phonegap, and messing up with android sdk may make you loss portability, if thats important to you.

What i see as a performance problem on phonegap is that depends not only on the hardware, but also on the browser implementation the OS have.

If you want to tune performance, then you may make improves in your js/css code. This can be simple as caching DOM nodes in js (DOM queries are slow), keep the DOM minimal or it may be more hard, because since phonegap targets diferent browser engines implementations, you may need to target you code to those browsers in order to improve performance.

Answer 3

I'm not quite sure if the issue directly relates to the OS, as if the app is running on Android, iOS, etc.

If you test the Sencha Touch 2 Kitchen Sink example on a low to medium capability hardware device, like a Samsumg Galaxy, you will experience low performance issues.

However, if you move to better hardware devices, such as the HTC Desire 2 (something closer to iPhone 4S), you will see that the performance gets way better.

I don't think Android has limitations on Sencha Touch 2 concerning performance in comparison to iOS. I just think some devices are better than others (iOS always runs on high level performance devices, the iPhone/iPad).

And for our misery, people tend to own lower price and hardware capable ones.