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.