What’s The Difference?
I’ve seen a lot of confusion out there on what the actual distinction is between PhoneGap and Appcelerator Titanium in terms of programming. Both state that they provide cross-platform mobile development frameworks driven by a Javascript core. How different can they be? Turns out, very.
The fundamental difference is that PhoneGap is a web based solution where Appcelerator Titanium is a pure Javascript API that creates native code. As I’ve gone over the differences between these 2 in detail before, I’m going to very strictly stick to the topic of how their code works. Since people seem to love charts so much, here’s a quick review to show the divergence between the two frameworks:
| PhoneGap | Appcelerator Titanium | Notes | |
| Javascript API |  |
|
PhoneGap’s API interacts as typical JS does in your web code. Appcelerator Titanium API is NOT web code, it is used to interact with native code. |
| Supports HTML5/CSS3 | |
 |
PhoneGap is a web app that runs in a native web browser view. |
| Supports Web Standards | |
|
PhoneGap looks, feels, and develops like a standard web page. It is also subject to the same browser compatibility concerns. |
| Supports DOM based JS libraries |
|
|
JS libraries that reference the DOM, like jQuery, Prototype, or any of the new will only work with Appcelerator Titanium webviews |
| Native Code | |
|
Appcelerator Titanium creates a truly native app via a JS API that maps to native code. |
| Native UI/Performance | |
|
Appcelerator Titanium performance is limited only by the device. PhoneGap’s is limited by the device’s web view. |
What Does This Mean?
- Web developers will have a much easier transition going to PhoneGap than they would Appcelerator Titanium.
- Application developers without serious web development chops will likely gravitate towards Appcelerator Titanium. Why learn HTML, CSS, and Javascript when you can just learn Javascript?
- Designer work will be tougher to integrate into an Appcelerator project as all the layouts and assets are done programmatically. PhoneGap, on the other hand is effectively web development, which designers have been working with for a very long time.
- Appcelerator is always going to win on performance.
- There will be an inevitable flood of web developers calling themselves mobile developers because they are familiar with PhoneGap. Beware.
- Appcelerator has a much deeper and more complex integration with each mobile platform.
- Pros: Native look, feel, and performance
- Cons: Platform compatibility will be achieved more slowly. Much harder to “code once, deploy everywhere”.
Summary
The above is a hyper-condensed review of the whole story. As always, I encourage you to try both of these platforms. They both excel in many areas and offer unique features. Neither is the wrong choice, but depending on your scenario, one might be better suited than the other.
Although not the recommend solution, can’t I still create a Webkit view with Appcelerator and have my HTML5/CSS support, etc… I do this for some screens within my Appcelerator apps all the time. It is not the preferred solution within Appcelerator, but it would work. I think loading things like jQuery etc might be less than ideal as well.
@Chris: Absolutely, you can add a web view in your appcelerator app. One of my team members did just that when he was playing around with RaphaelJS for graphing. And yes, you can use jQuery inside of that web view, but you can’t use it to impact anything outside of that web view (i.e., your Appcelerator code).
The core problem is that jQuery and other DOM based JS libraries require a ‘document’ object and Appcelerator has no concept of a ‘document’ since it is not web based.
@Tony Great Summary! It might also be worth mentioning that the downsides of the PhoneGap red x’s can often be mitigated with PhoneGap plug-ins.
What are the things to consider when choosing between different cross-platform mobile development tools (ie. Rhomobile, Titanium, and PhoneGap)?…
Both PhoneGap and Titanium Appcelerator are JavaScript frameworks that help web developers access device capabilities and transform web code to native. However, they have two very different philosophies – “gap” versus “native” With PhoneGap you cre…
@Paul: You could perhaps fake the native UI with PhoneGap plugins or clever HTML/CSS (http://nachbaur.com/blog/native-ui-controls-in-phonegap-coming-along-nicely), but the performance will always be determined by the performance of a given device’s web view.
@Tony Yep, UI performance improvements would be hard to get around the Web View’s limitations. I would expect any non-UI performance bottlenecks to be solvable by plug-ins.
@Paul: Very true, but I the majority of concern when it comes to performance with web based mobile app solutions is with regards to a responsive UI. The whole world somehow got convinced that unless an app has smooth transitions between views, its crap.
“Appcelerator’s performance is limited only by the device. PhoneGap’s is limited by the device’s web view.”
Kind of…
Appcelerators performance is limited by the javascript interpreter that they wrap and mod with native hooks …
“we’re shipping a forked version of WebKit’s JavaScriptCore in iOS and a snapshot of Rhino 1.7 R3 CVS for Android”
(from http://stackoverflow.com/questions/4217551/what-happens-to-javascript-code-after-app-is-compiled-using-titanium-mobile)
There are still noticeable differences in performance, though much less than when they did use web views.
@Dan: Thanks for the clarification. I have always seen their integration referred to as “native hooks” without a good explanation of what that actually means.
I have noticed performance differences in appcelerator in very large lists or sometimes in transitions. Are there other areas in which you have seen noticeable performance differences?
i think CSS3 transition will get hardware acceleration isn’t it? Or it stll slow compare to native even after it get accelerated?
Thx for info
@katopz: Yep, css3 transitions are the way to go with web based solutions. Javascript animation is not nearly as smooth. If your design on each view is kept conise, as it should be in mobile development, CSS3 transitions will be very close in appearance to native transitions. I’m pretty sure thats what UI frameworks like jQuery Mobile and Sencha Touch use under the hood.
Oh, and nice to see you katopz! Haven’t been using away3d much lately, but I’ll be back when Molehill hits mainstream.
Tony,
Great to see your coverage of this space. Would be great to see you add discussion of Rhomobile’s Rhodes (http://rhomobile.com/products/rhodes) as well. Rhodes is very similar to the UI approach of PhoneGap. But it is a superset of the functionality of those two frameworks. Rhodes provides:
- the only Model View Controller among smartphone frameworks (MVC rules the web development world and allows separation of business logic from interfaces, critical in true informational apps)
- the only sync server of all frameworks (providing offline data usage and easy backend app integration)
- support for all major smartphones (Windows Phone 7 is a player due to the Nokia deal)
- the only hosted development service (RhoHub.com which provides hosted editing, build, sync servers, and app provisioning and management)
- the only framework with a debugger and incremental load simulator, allowing the fastest debug/fix/rerun cycle time ever on mobile (framework or otherwise)
- support for industrial capabilities such as NFC, barcode, signature capture, and Bluetooth
Rhodes provides many other core differentiators which can be summarized as “modern development goodness for native smartphone apps”: http://rhomobile.com/blog/modern-app-development-goodness-for-native-apps-what-rhodes-offers-that-no-other-framework-or-underlying-sdk-does/
“but you can’t use it to impact anything outside of that web view (i.e., your Appcelerator code).”
This isn’t actually true. You can fire events from the default namespace, Ti.App, and listen for those events outside of the webview. You can also embed Javascript functions into your webview that can be called from outside of the view.
This allows bi-directional communication between the webview and any other object or function in your app. The only caveat is the html loaded into the webview must be part of the compiled app.
As I am exploring ways to accomplish a smartphone app, this article has added to my investigation of PhoneGap vs Appcelerator. I experimented with Appcelerator Titanium and found it buggy, difficult to understand what their JavaScript was doing (I am used to JavaScript for web pages) and the Android emulator did not work well (whether this is the Android emulator or Titanium’s integration with the emulator, I don’t know). PhoneGap is next on my list. Thanks for great information.
@David: Have you tried using Appcelerator since the introduction of Titanium Studio? It makes the dev experience much smoother. And yes, no matter what you choose for app development, the Android emulator will always suck in comparison to the iOS simulator.
The reason the way JS is used seems foreign is because you are looking at it as a web language. This is understandable given that the browser has been JS’s only home for a long time. But you need to look at the JS you write for Appcelerator as you would any other API. It is a pure programming interface, it is no longer part of the a technology stack like when you use HTML/CSS/JS. The major positive for a guy like me, who is not a web dev by trade, is that you only need to wrap your head around one technology instead of 3.
David, thanks for the write-up, very clarifying. How do these frameworks compare to more native approaches like Marmarade (Airplay) and MoSync, based on compiler technology? They both seem to have the ability to include web views, if there is a Webkit implemenation on-board.
regards
/SB
@Tony Thanks for your question and comments. I did not try Titanium Studio. I do understand and appreciate your point about JS in Appcelerator.
I did manage to get PhoneGap going for my web app. I got good help from the folks working on PhoneGap and have worked through some problems in PhoneGap 1.0.0 and 1.1.0. I have the Android platform working. I am embarking on BlackBerry testing but need a physical device to complete my testing. iPhone is next but that requires a Mac due to Apple licensing.
@Sina Thanks for directing your comments at me. Smartphone development is completely brand-new for me. My objective is to release a smartphone web app on the major platforms with the mindset of “write once, deploy everywhere”. In reality, there are platform differences to deal with. And testing needs to be done for each platform with real devices. I know nothing about native smartphone app development. PhoneGap has served me well in insulating me from the platforms and has allowed me to develop my app.
@tony @adam blum and all you other dudes.
Check out Application Craft http://applicationcraft.com
jQuerymobile has announced AC as a jqm dev platform and here’s a case study that Phonegap did on them : http://phonegap.com/case_study/phonegap-application-craft-pain-free-mobile-app-development/
In summary, it is a cloud-based dev platform that does mobile (all important platforms) and desktop on an equal footing. It’s got an IDE that does drag-and-drop / wysiwyg UI building as well as code editing. I guess you could describe it as Visual Basic in the Cloud, but Javascript not Basic. Widget based like VB was, extensible. Open Source with free platform offering.
You mention that Titanium is going to always be faster then Phonegap for App performance. This is something I am trying to find out as I have heard the opposite most of the time
How come when I heard “cloud-based” I want to smash my head against a hard surface.
Hi Tony and all those of you who poste messages,
Thanks for this topic. Do you any feedbacks more recent about those 2 frameworks?
I also tought about one other important thing : what about analytics ?
How can you “see” the actions of your users :
1. in a native app (so, if I choose Titanium studio),
2. in a web app (developed with PhoneGap), making use of Mixpanel for example?
What do you think?