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-Cor 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:

Appcelerator Titanium

Appcelerator Titanium was launched with the same promise like PhoneGap, namely to provide web developers, familiar with HTML, CSS and JavaScript, a tool to use these technologies to develop mobile applications on iOS and Android. In a way, Titanium reminds me of J2ME Polish, a library for Java Development on mobile devices that enables the developer tocreate native UI elements and style them using a CSS-like syntax. Similar to PhoneGap, Titanium provides a binding layer that maps JavaScript function calls to natively available APIs. However, here is where the similarities end. The main differences to PhoneGap are:

• Truly native applications. Unlike PhoneGap, Titanium actually translates the code into native application code. The application code, written in JavaScript, is being interpreted during runtime and through a bridge layer, function calls to Titanium.some_function invoke native application code under the hood.
• Just JavaScript, no more HTML & CSS. Previous to version 1.0 (current version is 1.5), Titanium followed a similar approach to what PhoneGap was doing. The application code would consist of HTML, CSS and JavaScript, whereas native device services were exposed using a Titanium specific JavaScript API. With version 1.0, HTML and CSS are gone. Code is written in pure JavaScript, using mainly functions that the Titanium API exposes. Apart from using it to access special device features (such as the camera), it also enables the developer to render native UI elements (such as tables, buttons, native maps etc.).

The obvious advantage of a native application is performance. The UI will perform much better if native OS elements are used, compared to rendering HTML, CSS and JavaScript in a browser instance to e.g. create a button. As a side effect, the native look-and-feel can easily be maintained.

Unlike PhoneGap, building and packaging does not happen inside an IDE, but through a special piece of software calledTitanium Developer. This is the tool to set up new projects, configure, test and package them. Any IDE of your choice can be used to write the application code.

Example

Appcelerator provides a plethora of examples, all bundled up in their Kitchen Sink demo application, which can be downloaded from GitHub. The following example, taken from Kitchen Sink, shows how to hook up an event listener, using the Titanium API, and display an alert window:

Conclusion

Both Phone Gap and Appcelerator Titanium give web developers the opportunity to create mobile applications without the need to learn Objective-C or Java. After the build process, both frameworks provide the developer with a packaged application that can be installed on an actual physical device and published (e.g. using the Apple AppStore).

PhoneGap supports more Operating Systems and lets the developer essentially set up his application project like he would set up a website (e.g. with index.html, css, img and js folder etc.). PhoneGap applications are then wrapped by the framework inside a WebView during build time. This means that, upon execution, the rendering still happens inside a browser instance, which interprets the HTML, CSS and JavaScript. Compared to a truly native application, this likely means slow performance and additional effort to re-create a native experience.

Appcelerator Titanium only supports iOS and Android. Any application code is (as of version 1.0) written in pure JavaScript using mainly Titaniums JavaScript API. It seems more like a native code (Objective-C or Java) abstraction layer than code that resembles anything someone would recognize from the web development world. Unlike with PhoneGap, the developer ends up with a final software product that is truly native to the respective operating system. Because native elements are used for the interface (e.g. buttons, tables, views), the performance is better and no effort needs to be put in to recreate any native experience using HTML, CSS and JavaScript.

Finally, it highly depends on the requirements of the product which framework to go with. If the goal is to support as many operating systems as possible, then PhoneGap is probably the way to go. If true native-ness and performance is important, then Titanium will be the better choice. It is also important to note that only PhoneGap still holds true to their promise that a web developer can quickly jump in and use his skills to develop a mobile app. With Titanium, all the application code will be JavaScript, even the styling of elements happens through function calls (which is, arguably, still better to having to use Objective-C). An important factor for deciding which way to go would also be whether the respective JavaScript API provided offers the functionality needed for the application.