24

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)

RED.Skull
  • 1,696
  • 3
  • 24
  • 49
Ricardo
  • 11,609
  • 8
  • 27
  • 39
  • I would like more opinions if you please :D – Ricardo Apr 10 '12 at 16:54
  • I really was trying to make this thread interesting to other users of stackoverflow, but seems that couldnt be the case. Or maybe there is no one else capable of suggestion. Thanks to @Thiem Nguyen and camus. – Ricardo Apr 18 '12 at 08:41
  • You're welcome :) Sencha Touch 2 is really new to developers, even who have already worked with first version (Sencha Touch 1) like me, so I think it needs time to become more popular. – Thiem Nguyen Apr 18 '12 at 13:56
  • @Ricardo: do you see any difference 1 year later, with PhoneGap going from version 1.4 to 2.6 and Sencha Touch from 2.0 to 2.2? – user276648 Apr 30 '13 at 02:37

4 Answers4

16

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.

Thiem Nguyen
  • 6,345
  • 7
  • 30
  • 50
  • Thanks for the reply. For now I'm not customizing any CSS, but i'll have to eventually. What you mean by keeping the DOM at minimal? Using the minimal number of components? To make less HTML elements? – Ricardo Apr 10 '12 at 09:04
  • 2
    Yep, kind of removing views which are unnecessary or unactive. For eg, you have 3 lists on your current panel, when you click on an item in list 1, it shows list 2, similarly show list 3 (simple example is category -> product -> product detail), then only when user taps on list 1, you add list 2, similar for list 3. Moreover, when user taps "back", remove your list 3, then list 2, etc. In that way you could ensure that only necessary views are kept in DOM for display, others are destroyed :) – Thiem Nguyen Apr 10 '12 at 09:08
  • What about CSS3? I just should avoid gradients and such? Can I force it to use CSS2? – Ricardo Apr 10 '12 at 09:34
  • You can overwrite CSS3 by CSS2 anytime you want (using `!important` for eg), but it will make your app uglier, of course ... here I mean you should always keep in mind that, the more sophisticated your app looks, the heavier it will become. Some of CSS3 "heavy" properties, as far as I know, are shadow and transformation ones. – Thiem Nguyen Apr 10 '12 at 09:38
  • Thank you for your time. I'll keep the question open for discussion sake. – Ricardo Apr 10 '12 at 09:50
  • unfortunatly , that's also the case for others frameworks like jQuery Mobile and jQtouch. In my opinion , use of frameworks like this in a phone gap app , though eye catching , should be limited to basic functionnalities. – mpm Apr 11 '12 at 10:38
  • I see what you mean, but I would have to hardcode every shiny little thingy that sencha has, because basically my app needs to be good looking with transitions effects. what is your suggestion? – Ricardo Apr 11 '12 at 11:34
4

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.

soares
  • 61
  • 5
  • Hi Abel, thanks for your time. That's a rly good point on the android.webkit.WebView! I'm using PhoneGap 1.4, I haven't upgraded to Cordova yet and I'm not sure if I should..I may have to investigate deeper into the differences between them. – Ricardo May 03 '12 at 08:47
  • Also, I agree that the main performance problem here is due to the number of abstraction layers. But that's a problem that we can't avoid in mobile html5 app, at least yet. Sencha is improving in this matter, but who knows? If I choose to discard ST2 I gain more problems then solutions, I could use jQuery Mobile / jQuery Touch but that's a rly slow framework compared to ST2. And there...I'm out of options! :D What remains is: hardcode on top of Cordova, and multiply by 10 the time of production. – Ricardo May 03 '12 at 09:05
2

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.

Daniel Ribeiro
  • 10,156
  • 12
  • 47
  • 79
  • Thanks for your thoughts! I kinda disagree on some points. For my app I have a GalaxyTab and iPad2 for testing and debugging: the GalaxyTab is not that "lower machine" then the iPad, rly its not! Go check both products hardware. The performance difference is huge, and it shouldn't be! – Ricardo Apr 27 '12 at 15:32
0

I have a few fundamental questions about the performance of SenchaTouch based apps. Please refer to this article by LinkedLN team on how they improved the performance of their HTML5 app by hand coding DOM Manipulations :-

http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5

In the context of this article I see two issues with Sencha Touch :-

  1. Sencha Touch builds its UI by converting javascript objects into Dom Nodes and adding them into the Dom Tree. Chrome Tools will show that it ends up adding a relatively high number of DIVs and other DOM elements to the Dom tree. Wouldnt this have a detrimental effect on the performance.

  2. Most of the Dom nodes in the Sencha UI are generated by Sencha API code and not from markup. If we write code to directly manipulate these Dom elements, can we be sure that it will not produce any side effects ?

Nikhil_Katre
  • 555
  • 6
  • 10