Evaluating Mobile Multiplatform Frameworks

For an upcoming, probably large mobile project, I was asked to look at the current situation on mobile multiplatform frameworks that cover at least Android and iOS and provide access to some native API’s like the camera. So I looked at several of the available frameworks, but only two of them fulfilled all requirements while also providing advantages towards other ones.
phonegap_logoFirst there is PhoneGap (http://www.phonegap.com/) which additionally provides you a buildservice in their cloud (https://build.phonegap.com/ – currently in beta), to which you can upload your project and it builds your Apps for Android, iOS, BlackBerry OS, Palm OS and Symbian. PhoneGap furthermore supports Windows Mobile and will be supporting Bada and MeeGo in the future. For an overview of the supported features on the different platforms, check this site: http://www.phonegap.com/features
With PhoneGap you write your  App in HTML, CSS and Javascript and can also access platform dependent API’s through the framework (You can write your own native classes and access them as well, but you have to provide them for every platform). The App runs inside the browser and so it doesn’t feel like an app, but more like a website. Moreover, you style it like a website, which makes it easier to design it for all the different platforms and display resolutions, and PhoneGap lets you even use your own JS-Framworks to do so.
 
Then there’s Titanium (http://www.appcelerator.com/), with which you also write your app in HTML, CSS and JS, but in terms of JS you can only use the Titanium provided JS-Framework and no others. It only supports Android and iOS, but provides you access to the native UI elements of both platforms and so doesn’t need to run in the browser, which is a big benefit to the Apps look&feel as well as to the performance. Unfortunately there’s also a downside to that: based on a few feedbacks from other projects, you have to differ between Android and iOS code on many occasions, because the UI elements are different or some of them only work on one of the platforms.titanium_logo
And what’s more, I didn’t even get the Titanium showcase App (KitchenSink) running in the first place. At the beginning there were several errors with the provided IDE that is needed to build the Apps. As the errors were cleared (took some time to find the solutions in the forum and elsewhere), I could build the App, but it only got to the splashscreen – and then it did nothing. I then decided to download it from someone who built it some time ago and it ran very smoothly and provided access to all kind of features.  But nevertheless, I couldn’t try it out myself, because it didn’t work for me.
 
So only PhoneGap was left and I decided to compare it effort- and performance wise with a Java coded Android App. I implemented some basic elements in both apps, like Textfields, Lists (with much data, because the upcoming project will most likely need that), dynamic SelectFields, Images, and of course multiple Activities/Pages.
What I noticed immediately is the difference in responsiveness of the elements. The ones in the browser need remarkably longer to react on the users touch. Other than that, the App by itselfs needs much longer to load with PhoneGap. This can be traced to the way transition animations are done in PhoneGap, according to the PhoneGap tutorials:

<div class="page" id="page1">
...
</div>
<div class="page" id="page2">
...
</div>

You have to declare the different pages in the same HTML file, with all but one styled as “display: none”. Then you switch between them via javascript (jQueryUI‘s hide- and show-methods for example).

function switchView(hideView, showView, hideDirection, showDirection) {
		$("#" + hideView).hide("slide", {
			direction : hideDirection
		}, 250);
		$("#" + showView).show("slide", {
			direction : showDirection
		}, 250);
	}

The problem in this case is, that multiple “pages” are being loaded right at the beginning, increasing the load time. Also the transition animation with JavaScript isn’t that smooth – even with high-end smartphones.
Comparing the speed of development of my sample App, I was a little faster with PhoneGap than with the Java code. In terms of speed, PhoneGap is especially useful, if you’re developing your App for mulitple platforms – you will most likely be a few times faster than developing them natively on each platform and you also don’t have to set up the different IDE’s if you are using PhoneGap Build on top of that.
Like I already mentioned, the performance isn’t that great, though. I assume that you probably won’t use PhoneGap – or html and js  in general – for larger Apps which you only need for one or two platforms. This is because the maintainability and testability are (from my point of view as a java developer) much better with java and also in other languages than they are with javascript and html+css (Well, you DO have only one codebase here, but therefor have a set of different mobile browsers that you need to check it with).
In my opinion, PhoneGap only comes in handy if you want to distribute a small App for as many platforms as possible while keeping the needed effort as low as possible.
In our case, we decided not to use PhoneGap or another framework for the project, because it needs to perform well and will be a bigger project where the maintainability is very important. Besides, it will only have to run on Android and (maybe) iOS, which doesn’t make the benefit you gain from PhoneGap that great.

Kommentare

  1. Did you use plain jquery or jquery-mobile?

  2. I used plain jquery and jquery-ui. Maybe I'll try it with jquery-mobile, if the subject becomes more important again.