A look at PhoneGap and Appcelerator Titanium

Ever since I had started working on my project for my diploma thesis, I was fascinated by the capabilities of smart phones (at the time, in 2006, 3G had just come out in Austria). Even though I had a lot of fun, learned a lot and even got my thesis published, for one reason or the other, I never really dared to venture into the whole mobile application development sphere professionally, thinking I should stay where I feel comfortable—web development. However, the developments over the last years, mainly around the iPhone, but also recently regarding Android, brought me back to this topic I have always been very interested in. Being a web developer (and far away from a “proper” Computer Engineer), however, I still can’t wrap my head around certain technologies, i.e. languages. Java is my Mt. Whitney, but Objective-C is more like a Mt. Everest to me. So I was very happy to see that there are people that acknowledged that this is a problem and developed phone web based application frameworks that people with a web development background can take and build mobile applications with. Without having to learn Objective-C. And right there they caught my attention once again.

What are phone web based application frameworks?

Essentially, these are frameworks that provide developers coming from a web development background a certain set of tools to use their current skillset (HTML, CSS, JavaScript) to build native or native-like mobile applications. PhoneGap and Appcelerator Titanium are the most popular amongst all the frameworks out in the wild. I got to play around with both of them recently and I am going to share a summary of my findings and a look from 10,000 feet at the two below.

PhoneGap

PhoneGap, developed by Nitobi Software, gained a lot of popularity in the web development world, because of exactly what got me interested myself. On their website, it says “Build apps in HTML and JavaScript and still take advantage of core features in iPhone/iPod touch, iPad, Google Android, Palm, Symbian and Blackberry SDKs.”. Sounded exactly what the web developer but wannabe-mobile-developer needs.

PhoneGap projects require the underlying SDKs (e.g. iOS SDK) to be installed and typically building the application happens from an IDE, e.g. Xcode. The developer puts his files into a www folder in the project directory. When building, PhoneGap then renders these files inside a native WebView provided by the OS-specific language (either Objective-C or Java). It exposes access to certain native device features, like Contacts, Accelerometer, Camera and Notifications, through the PhoneGap JavaScript API.

The actual interface of the app, however, is styled with ‘the usual suspects’, meaning HTML and CSS. Because of the fact that UI elements are styled with CSS, these can look significantly different to native OS interface elements (e.g. buttons), as well as the performance might be not as good as if native elements were used.

In the end, a PhoneGap application is essentially still a web application, wrapped inside a WebView. It still remains a web application that is displayed through rendering of HTML, CSS and JavaScript using a browser instance on a mobile device. It currently supports development for the iPhone, Google Android, Symbian OS, BlackBerry and Palm operating systems.

Example

The following example code is taken from PhoneGaps API documentation to illustrate the syntax of how a PhoneGap application is put together. In this specific case, the API is used to find all contacts with the name ‘Bob’ in any name field:

Page 1 of 3 | Next page