Wanna jump right into creating amazing scalable mobile applications?
Need a good and concise walk through on how to get started with phonegap?
Should I stop asking questions and get to the post already?!!

Yes * 3.

The first thing you should know about phonegap is that it isn’t only used to create “iPhone apps” or “Android apps”, it’s designed for mobile device development. PhoneGap was created for devices that use a modern web browser and if they’re not, they should be thrown in a pit of fire. WebKit is the most up to date web browser engine among its peers; it follows the latest standards by the W3C including HTML5 and CSS3.

By exposing the values of the native application programmer using JavaScript, calls to the native device allow for application development using only HTML, JavaScript, and CSS.  With this in mind, PhoneGap makes it possible to develop for mobile technologies that adopt the latest standards in web browsing. Currently, PhoneGap is capable of developing applications for iPhone/iPod touch, iPad, Google Android, Palm, Symbian and Blackberry. Future plans for PhoneGap include support for Nintendo DS and Playstation Portable (and other forward thinking platforms that use web browsers). PhoneGap is free and open source software that is hosted on Github.

Software used to develop apps

The software used to create PhoneGap applications varies depending on which platform you are writing for. For instance when developing for BlackBerry, you need to be using a specific version of Windows with an Integrated Development Environment (IDE) called Eclipse. I was interested in developing for iPhone, so I used an application called Xcode that is freely available through Apple and is exclusively used on Macs. In addition to Xcode, Apple also offers a free piece of software called Dashcode. Dashcode can be used to develop iPhone web applications, which can then be imported into Xcode and complied as a PhoneGap application. An advantage of using Dashcode is that it includes a library of icons and scripts that are common to most iPhone apps.


XUI is an open source JavaScript library developed by the creators of PhoneGap. Taken from the source, the following is their description of XUI:

We hear your words. Why another JavaScript framework?! When development of PhoneGap was under way we noticed slow load times for modern JavaScript frameworks such as Prototype, MooTools, YUI, Ext and (yes) even jQuery. A big reason why these libraries are so big is because is mostly they contain a great deal of cross browser compatibility code. The mobile space has less browser implementations (so far) and different needs. Thus XUI.

XUI strives to be a framework for first class mobile device browsers such as WebKit, Fennec and Opera with future support under consideration for IE Mobile and BlackBerry.

XUI is a lightweight framework (7.8KB minified) whose syntax is similar to the jQuery JavaScript framework.

jQuery Mobile
Oh no they didn’t!
Yes, it’s true. You can use jQuery mobile with phonegap. Check out my jQuery mobile review here!

Writing an app with PhoneGap

PhoneGap has a strict directory structure that when followed correctly, makes developing with it a breeze. When opening a PhoneGap project through your IDE (Xcode, Aptana, etc), PhoneGap has a directory titled www. The files for your project are stored in this directory. There is phonegap.js file (where the magic happens) included that is required for your app to run; it acts as the interface between the device and the web browser. In addition to that, it is also helpful to manually include the XUI or jQuery mobile library for optimal DOM manipulation.

Unlike most common web sites, efficient mobile web development only needs one page: index.htm. This saves multiple trips to the server (or local files) when making a web app (or native application). Each page (represented by a div or section tag) that is visited in your app is accessed through multiple div tags in the index file. This means that an entire mobile application can be built using only one HTML file.


Xcode provides an emulator that simulates the iPhone interface and interactions. This is extremely helpful when testing aesthetics and functionality. The IDE also offers the ability to test the app straight from the device you are developing for. When connected, there is an option to build the app to the device for testing. This is important when working with such functions as the Accelerometer (for X, Y, and Z axis) and vibrating functions.

In addition to the built in simulator, the developers also created their own testing environment called PhoneGap Simulator. This simulator is built with Adobe Air and is freely available for download. The advantage of using the Phonegap Simulator is that it has multiple skins to test your app on. For instance, if you are creating an application that you intend on distributing on multiple devices, using their simulator will help debug and catch any errors across devices. Phones currently supported for simulation include iPhone, Android G1, BlackBerry Storm/Bold, Palm Pre, Nokia N97, and Samsung Epix. To make things even more awesome, they’ve also included FireBug lite (FireBug is a extension for the Firefox web browser that helps web developers debug code on the fly).

Are you ready to create your very own multi-platform application using phonegap?!
Wanna find out even more about how it works? Check this out: http://bit.ly/3Fwc8L

Is this post over?!

Yes. Yes it is. Thank you.