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:
- Take a photo with the camera (or choose from library)
- Upload an image to an external API
- Parse JSON response from API and display
- 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.
Hi,
Thanks for posting this, I too looked at Titanium for a bit, but ran in to problems with it not launching the simulator for the iPhone. I also experienced installation problems in Ubuntu that I documented, should anyone need help then the post might help (http://spikyorange.co.uk/?q=Titanium-1st-attempt).
My largest concern is how Titanium might slow you down in the compile->run cycle, it seemed to me that it had to tear down the simulator each time and took 30-60 seconds each time to start it back up, whereas in Xcode the compile->run cycle takes say 5 seconds tops. The difference on my MacBook would become prohibitive, what’s your opinion?
Thanks!
Rob.
@Rob Wilson
Hi Rob.
Certainly the tearing down and rebuilding of the simulator every time was annoying, but when developing against the iPhone simulator this did not cause me any problems. When I tried running in the Android simulator on the other hand, this caused massive issues. 99% of all attempts to run in the Android simulator resulted in Titanium timing out before the simulator had been initialised.
The iPhone simulator is rather lightweight and sort of designed to be torn down and deployed again regularly. The Android simulator is not. It is designed to be started once and left running. Deploying straight to the device on Android is much, much faster and massively more reliable.
Therefore I found the the compile/run cycle was not any slower on iPhone, and to be honest, you can always grab the created xcode project from inside the project/build directory and run that directly from xcode if you find it too slow. For Android, this severely impacts on the compile/run cycle and is rightly a consideration I should have made clear in the post.
Hi Emily,
I’ve just been told by someone we both know, that you used to work at Best Execution (now NETbuilder)?! This is where I now work (It’s a small world).
As of tomorrow, I’m starting a podcast with a friend of mine. In the near future I would like to have guests on to discuss iPhone development, in-fact, anything to do with development.
Would you be interested in being a guest occasionally / one-off? It’ll be great to get different opinions on the podcast.
My site is pretty basic right now, everything is very ‘new’, but hopefully you will see it’s ready for content 😉
This is purely for my own interest, nothing to do with Best-ex / NB.
If you’re interested, ping my email contact from my website!
Cheers,
Rob.
I really aprpceitae free, succinct, reliable data like this.
Thanks for the presentation in Brighton and this is a great comparison piece. Loving titanium.
@fluffyemily
I had the same timeout problem with the Android simulator, but solved it simply by making sure that I used the AVD to start the Android simulator and had it running before running the app. Also, I had to make sure not to start from a snapshot, because that always crashed.