PhoneGap Fundementals: What You Need to Know

6 Flares Twitter 2 Facebook 0 StumbleUpon 1 Google+ 2 LinkedIn 1 6 Flares ×

PhoneGap is probably the most popular framework for building hybrid apps for mobile devices. It essentially allows you to build the majority of your app using HTML5, CSS and JavaScript and then deploy that app to different platforms with little or no rework. This article discusses what you need to know about PhoneGap when you consider using it. Whenever you start developing an app with PhoneGap you have the choice of developing it in a multitude of different environments, such as:

  • Eclipse or Android Studio (For Android)
  • Visual Studio (for Windows Phone)
  • XCode (for iOS)
  • Web Storm (Device Agnostic)
  • Sublime Text (or any text editor)

Regardless of which method you start with, it is fairly easy to port your code to another platform for example, if you start developing your app for Windows Phone, it is fairly easy to then take your PhoneGap source code and move it into an Android environment.

PhoneGap was originally an open source project that was bought out by Adobe. Since then, Adobe has retained the name ‘PhoneGap’ for its particular commercial offering, but has kept the underlying technology as open source. The underlying open source project is now call Cordova.

How Does PhoneGap Work

Fundamentally PhoneGap allows you to build applications in a device agnostic way, by doing 2 things: phonegap package

Build Applications in HTML5, CSS and JavaScript

Nowadays practically all mobile devices have an web browser and have excellent, standards compliant support for HTML5 in that browser. At its core PhoneGap creates an application that is basically a web browser that hosts your HTML5 application.

I may use the term HTML5 to refer to the combination of HTML5, CSS and JavaScript for brevity.

Its important to understand that the web browser PhoneGap uses is still provided by the operating system, and as such provides the same level of HTML5 support (as the standard OS browser). This means that when developing your PhoneGap application you cannot assume that the full HTML5 specification, provides an excellent resource for listing which devices support what. This means that (depending on what you’re targeting) you’ll probably need to use progressive enhancement when making your app. That said modern mobile devices tend to provide pretty good support for HTML5, so you don’t have to worry about dealing with the nuances of browsers such as IE6/7.

Abstracting the Native Operating System Features

The second really big thing that PhoneGap does is provide a layer of abstraction around the native api. This means you can still call into and utilise native features (like the camera or accelerometer) using JavaScript. The real power of PhoneGap is that the api that it provides to do this is the same for all operating systems – so the code for capturing a picture on iOS, is the same for Android and Windows Phone.

I will put in a caveat here – you still need to account for the fact that not all devices have the all the same features. For example, some devices may not have a camera (its pretty unlikely these days though).

The Key Components

A PhoneGap app generally consists of the following core pieces:

  • Your HTML5, CSS and JavaScript Source Code: This is the actual code your app is built with.
  • A OS Specific Wrapper: This is the bit that’s specific to the OS your building for, that allows PhoneGap to build and deploy your source code.

This means that whilst you are developing in pretty much the same way for any OS, there is an element of the project that will be specific to the OS. This means for example, that if you want to deploy an app that was originally developed in an Android environment, to an iOS environment, you will need to build up the iOS wrapper. This wrapper basically consists of a folder structure, some boiler plater code, a way to compile and various other things related to things like signing etc.

Building up this wrapper is a pretty straight forward process, and the PhoneGap’s tools provide simple command line calls to do this so it isn’t something you worry about. What is important though, is to understand that a part of your project is OS specific, and part of your project is not. That is unless you want to use a service like PhoneGap build.

What is PhoneGap Build

phonegap build

PhoneGap Build is a service by Adobe that can make building and deploying PhoneGap applications to multiple devices simpler. As previously mentioned, building your HTML5 app for a specific environment requires an environment specific wrapper – this can slow down the development process for several reasons:

  • You have to create and maintain that wrapper for each target OS
  • You have to build each OS version independently
  • You may have to maintain a source control structure with linked files

To alleviate this, PhoneGap Build provides a simple to use service that allows you to upload your HTML5 source code and let it doing the building for each different environment. In addition to this, it also provides some cool features for rolling out updates during the development process. This could allow you develop locally with nothing more than a text editor and a web browser, but still build and deploy to multiple devices.

Advantages of PhoneGap Build

There’s a lot great about PhoneGap build:

  • Speed up the building process
  • Simplify your source control structure
  • Simplify your development deployments
  • No need to maintain several different OS wrappers

Disadvantages of PhoneGap Build

That said there are some downsides:

  • PhoneGap build isn’t free (as of writing this it is free for 1 app)
  • The version of PhoneGap used by PhoneGap build tends to lag behind the latest PhoneGap version.(as of writing this PhoneGap is at version 3.3, and PhoneGap Build is supporting 3.1)
  • Deploying a new development version requires a good web connection for both deploying and receiving

I should also mention that Telerik have a similar service call Icenium.


Choosing PhoneGap as your mobile app framework can be a smart move if you want to deploy you app cross platform or you want to leverage existing HTML5 skill set. It is a powerful framework, and can provide a quick way to build and deploy mobile apps. That said it does have down sides such as performance and impaired user experience, so it is certainly not the solution for everyone.

In a future article I’ll get into choosing between PhoneGap and native, and when you might be best selecting one over the other.

What are your thoughts on hybrid platforms? Is it something you’ve considered or used? What were your experiences with them?

The Essential App Marketing Kit
Subscribe To My Newsletter To Get an Entire Chapter From The Book for FREE
Never display this again
6 Flares Twitter 2 Facebook 0 StumbleUpon 1 Google+ 2 LinkedIn 1 6 Flares ×