I recently spent some time studying the PhoneGap framework with the purpose of creating content for Android devices. PhoneGap is an Open Source Mobile Framework that allows developers to author native applications with web technologies such as HTML, JavaScript and CSS. PhoneGap currently supports 6 platforms including Android, iOS, Blackberry, Palm WebOS and Symbian WRT (including QT).
Working with the framework made me realize how easy it is for any web developer to target multiple mobile platforms without having to write the native code, and yet achieve cross platform compatibility with the same content.
In other words, the content layouting is flexible and can run across different screen sizes and platforms without having to change the any part of the core code.
The framework usage is very simple and well explained on the website. Once you are setup with the framework within your preferred development environment, the only effort goes in writing your HTML files and compiling the builds with the HTML assets to test on the actual device. PhoneGap also has its own API functions which makes use of features such as Network, Accelerometer, use of Camera, Events, Data Storage etc.
Performance wise, it is good, but animating too many objects around the screen drops the framerate. I tried running a game and got a FPS of around 7-8 on older Android devices and around 12 on the newer ones such as the Nexus One.
Perhaps the biggest challenge was integrating jquery for database interaction, where network calls constantly failed. It was later understood that PhoneGap takes a little time to load, so if the device is not ready and the API calls to the network are made, then the network calls fail.
From the code above it is noticed that in order to use PhoneGap we have to load the phonegap.js script into the HTML file. This is one of the 2 code bases required for calling any PhoneGap functions (the other code base is native and is compiled when building the device build).
When the HTML loads, the first function called is the onLoad() function which checks whether PhoneGap is fully loaded. This check is done using the onDeviceReady event.
When the device is ready, an onDeviceReady event is fired. The next step is to check for network. This too is done using the PhoneGap functions – NetworkStatus. If the network exists, then the network related calls using jquery are used, otherwise an alert is sent to the user informing of no network.
I’ll soon be uploading a PhoneGap Android app, and will share the link for downloading when ready.
Mariam
)!
