How does Sencha Touch + PhoneGap perform compared to native apps in terms of speed?

Question

I'm really worried that when I write iPhone app with Sencha Touch and put it in PhoneGap container the user experience would downgrade.

I particularly see the bottlenecks in:

• fluency of the screen transitions (animations)
• fluency of scrolling

Please have in mind that there are lot of 3G iPhones runnin iOS 4.x that made them very slow. I'm discarding the support for the original iPhone.

I, being a trained UI professional, can spot the ST app just by touching few things in it.

Does the shift from Safari to PhoneGap container increases the performance?

Do you have any experience with it?

Answer 1

I haven't used ST or PhoneGap, but I have used an app built with them. I can say definitely experience about the apps was worst in my 3GS. If you're planning a demo, prototype or test, you're safe with them. However if you want to make an app with competitive UI/UX , you should not. (and even you want to make prototypes, it should be better having some papers)

For your question, the speed. It's definitely not comparable. HTML + CSS is feature-rich, easy to use framework. Of course, it's slow as much as it's easy. Most of HTML based UI tools uses just UIWebView which is a part of native framework. In fact UIWebView is Mobile Safari itself. So the performance of the tools never be better than Mobile Safari. If you want to check performance in animations, just visit http://www.chromeexperiments.com/ with Mobile Safari. I checked none of showcase is running smoothly even many of them does not require strong graphical power.

Native apps are compiled and optimized with cutting edge technologies from professional researches over decades. And there are a lot of options to tweak and tune the code for performance. However a few of them are applied to HTML. Because HTML should guarantee feature-rich, easy-to-use framework always. And most of optimizations (which makes performance improvement) are trade off between feature and simplicity.

However in iOS 4.3 Mobile Safari's performance is improved. But I don't believe it's meaningful for apps with shining UIs.

I saw a considerable graphic framework with JavaScript. In fact, it was game framework with scripting in JavaScript. So it has no relation with HTML or CSS. (I forgot the name of it, however it was incomplete product)

PS.

And there is another big reason for you. The UI behavioral inconsistency. The frameworks mimics native UI of iOS but incomplete. So it feels uncomfortable like imitated copycat brands. However you have no need to care about it if you don't want native UI.

Edit

It's been a long time after I answered this question, but I realized that I also have to mention about GC. JavaScript is GC based language. It means, it has unpredictable GC time which makes main thread stops. This makes UI struggles. On native implementation, you have control to use GC or not.

This wouldn't be a problem on Android. Android always had those struggling because of GC on Java. Consequently, users will not feel any difference. But on iOS, your HTML5 based app never provide better experience than competitor's native app.

There are many workarounds for this GC time issue. Such as incremental-GC, realtime-GC and so on. But actually, there's no real solution. Because the primitive problem is you don't have control .

Answer 2

It turns out that putting a PhoneGap wrapper around any webapp (including all ST2 apps) can actually significantly decrease their performance. This is because the UIWebView which it uses is actually not the same as iOS's Safari browser which has had a number of enhancements to make it more perforant. One reason behind this is that as of iOS 4.3 , Safari make use of the "Nitro" JavaScript engine which is pretty fast, this is not available on the UIWebView which is used by PhoneGap (although as of iOS5 it's available for webapps running in full screen mode ).

A few people have experimented with the performance to see what the impact is, one looking at the performance of the Facebook App and another at canvas performance .

It turns out that the embedded UI browser maybe worse than the Andriod one as some tests have shown .

Answer 3

我发现ST应用程序的性能甚至在PhoneGap之外也很糟糕。

Answer 4

At time of writing I would say: Good for mockup and quick app with no high demanding graphics.

But things could change over time as both project (PhoneGap and Sencha Touch) are improving day after day.

And hardware is becoming more and more powerful (iPhone 4, 5, ..., dual arm cpu, ...) so there will be a time where ST and PhoneGap based applications will have performance close to native apps, and this might come after than expected.

So keep an eye on these projects and keep on developing "basic" applications with them to test their performance.

Answer 5

I built a business app with Sencha Touch with and without PhoneGap. Any major performance impact is from Sencha Touch (1.x or 2), not PhoneGap. As Eonil explains, this is because PhoneGap is really using the native browser. I've noticed ST performance "good enough" on iPhone 4 (and I'd argue 3GS with iOS 4.3+; depends on your users' expectations). On Android, only really recent devices are adequate for ST 1.1, but ST 2 has focused on Android performance. I'm sure Sencha will continue to innovate and drive performance because their business depends on it.

If you do use Sencha Touch (or any JavaScript), be sure to use the minified (-debug) version.

I've also built trivial native apps on iOS and Android, and indeed there is no comparison; native is far faster.

Answer 6

I've made several app with ST2, and wrapped for native. You can of course compare the two, however they are very different beasts!

Put simply, if your Sencha app performs well in Safari and Android Stock, it will perform in a similar manner once it is wrapped for iOS or Android. Phonegap/Cordova do not effect performance much, these are simply the bridge/container to the native functionality.

I think if you are worried about performance, look at the many tutorials around optimizing ST2 apps. There is lots that can be done to improve transitions and list scrolling.

If you are happy with how your app performs as a web app, then I think you have kind of answered your question already. Webapps are not native, and this masquerading done by some of the bigger frameworks is misleading. Ultimately the user will have expectations that are not always met.