Emily Toop

I talked recently at OpenMIC8 at the Grand Hotel on 4th November 2010 and the theme was native vs web. I decided to talk about the investigations I had recently been doing in cross platform development tools such as Titanium and PhoneGap.

I decided to write a simple app twice, once in each technology. I decided to replicate the first proper iPhone app that I wrote. This was a simple app that I wrote for Ian for a presentation that he was giving about the uses of Artificial Intelligence in the modern world. The app used a webservice that he had created that used Optical Character Recognition to read text in images and return the transcribed text. This meant that the app needed to do 4 main things:

1. Take a photo with the camera (or choose from library)
2. Upload an image to an external API
3. Parse JSON response from API and display
4. Play streaming Audio of transcribed text

As the first native iPhone app that I had written, only having implemented tutorial examples before, this app took me approx 14 hours to create. At this point all I had done in PhoneGap was some toy examples and I had not got further than downloading and installing Titanium. I thought this would make a good comparison point for the two techniques.

PhoneGap is the most versatile of the cross platform techniques. You write HTML and CSS which gets executed from inside an app using WebKit. It is basically a mobile website embedded inside your app. PhoneGap works on all iOS, Android, Symbian, Blackberry and Palm devices, but you must download and install each SDK and development environment, and then integrate PhoneGap with each. You then build and deploy your app inside the platform build environment. However, you can pretty much write your mobile site inside your web dev environment of choice and then just import it into the platform environments when it’s done. Then it’s just a case of making small, platform specific changes (there are small differences in the availability of methods for each platform).

Titanium is currently only available for iOS and Android, although there is a Blackberry version in beta. You download Titanium and it installs Titanium Developer, a project creation and execution environment. You then use your own favorite editor to write Javascript. This Javascript again runs within webkit, but instead of providing an HTML interface, it creates and uses native components, giving your app the look, feel and more of the speed of a native app. From within Titanium Developer you can then execute your app on iPhone devices or simulator, and Android devices or simulator at the touch of a button. You can also either use TD to deploy and package your app for the store, or to generate a platform specific project to import into the plaform development environment for packaging.

With both PhoneGap and Titanium, you can write your own native functionality and provide an interface to call from Javascript inside the non-native part of your app.

I started reading Titanium’s documentation, hungover, at 1pm on a Sunday afternoon. I found the documentation pretty good and it was very easy to find examples of everything that I needed to do. The Kitchen Sink app that you can download from GitHub contains a demonstration of all the features of Titanium and a couple of quick Google searches gave me everything else I needed.

By 6pm I had the main bones of the app, but another couple of hours (including time to create some images) gave me the final thing. The whole app is in one file, app.js. Despite not knowing a lot of javascript I found the whole experience easy and fairly enjoyable.

You can view the code here.

On Monday evening, about 6pm I started on the phonegap app. I had already done most of the examples that I could find so there was no need for the initial documentation reading that I had needed to go through for Titanium.

At this point I need to point out that I do not do web programming. I know no CSS and have very little HTML experience and no HTML5 knowledge. In fact, I have avoided as much front end web programming as I could throughout my whole career. I chose to use JQuery Mobile as I’d looked at it previously and I found that it provided some very nice looking components which massively reduced the need for me to know any css at all. For me this was hugely important. It enabled me to get to the point of having a most of my app within 2.5 hours of starting. It did, however, look utterly appalling. For this I needed to recruit some help from a friend of mine who knew CSS. I spent 30 minutes with him on Tuesday and we got it all looking fine.

However, it took me an awful lot longer than 3 hours to complete the app. It took 4 hours and 3 different people to solve the biggest problem I had – uploading the image to the webservice. In both the Objective C and Titanium versions this had caused only small, easy solvable problems. However all of the upload examples for PhoneGap used code that attached the image data as a URL query parameter to the POST. The webservice, however, needed the image attached as a file on a multipart message. Constructing the multipart header was no problem , but it took quite some time to discover that the message was being posted base 64 encoded. The webservice only returned a HTTP Status 500 so we had to debug for some time before we figured out what was wrong. However, even when i used a Javascript base64 decode function before posting, the webservice still failed to understand the message.

In the end we created a new webservice that did the base64 decode after posting, but this was not an idea solution. I have since (with help from Keiran Gutteridge) I have worked out how to add my own PhoneGap function to send the image base64 decoded so I can use the original webservice. This headache sadly took up most of Monday night and part of Tuesday and Wednesday. It also took 3 people. PhoneGap total: 8 hours & 4 people.

You can view the PhoneGap code here

In conclusion, writing cross platform code is far quicker and simpler than writing native. The results, for very simple apps, are almost as good. Titanium, building native components, gives an device experience almost as responsive as if you had written it natively. If I had been an experienced web developer, the look and feel of the PhoneGap app would have been almost as good as the real thing, and if I were to do PhoneGap development in future, I would have to ensure I had a CSS and HTML expert to handle the creation of CSS transitions and beautiful interfaces. Even then, the responsiveness of the result is somehow not quite good enough. It’s just slightly laggy and the transitions just don’t look perfect. If you app relies heavily on that last 5% of Wow factor to set it apart, I would still choose native.

Also, even though Titanium gives access to far larger parts of the device than PhoneGap, to do really complex functionality you still need to write it yourself natively and then you need to wire it in to your chosen non-native environment. In my opinion you would need a really good reason not to go native, but if that reason was there, then I would choose Titanium. If I were an experienced web dev, perhaps I would have more time for PhoneGap, but for me it’s not really an option. I will probably use Titanium again, for rapid prototyping, but would write natively once the prototype was finalised.