“What is PhoneGap?” & Other Common Questions

Posted byandrew 11 Comments on “What is PhoneGap?” & Other Common Questions

While looking at the analytics for my blog, I’ve recently started to see a lot of search phrases similar to “what is phonegap?”, “how does a phonegap app look?”, “how to get started in phonegap?”, among many, many others.   In this post, I hope to shed some light on some basic questions to help you understand and start working with PhoneGap.

In case you don’t feel like reading the whole thing, here are quicklinks to each question:

What is PhoneGap?

PhoneGap is an application framework that enables you to build natively installed applications using HTML and JavaScript.  The easiest way to think of PhoneGap is a web view container that is 100% width and 100% height, with a JavaScript programming interface that allows you to access underlying operating system features.  You build your user interface using traditional web development skills (HTML, CSS, & JavaScript), and use the PhoneGap container to deploy to different application ecosystems and devices.  When packaged for deployment, the PhoneGap application is a binary distributable file that can be distributed by the “normal” application marketplaces (iTunes, Google App Market, Amazon Market, etc…).

PhoneGap is 100% open source, and also goes by the Apache name “Cordova”.  You can read more about Apache Cordova project status at: http://incubator.apache.org/projects/callback.html

PhoneGap can be used to build applications that target multiple platforms, including Apple iOS, Google Android, Windows Phone, BlackBerry, HP WebOS, Symbian, and Bada.

You can read more about the supported platforms and their supported features at http://phonegap.com/about/features

How does a PhoneGap application typically look?

Since the UI rendering engine is the mobile device’s web browser, PhoneGap applications can literally look like anything.   You can use standard HTML & CSS to make it look like a normal web page, you can use a UI framework like jQuery UI, Kendo UI, Sencha, Twitter Bootstrap, or Skeleton (or any other HTML/CSS/JS user interface framework). You can also use CSS styles/themes to make your web content look like native apps, such as iUI to mimic iOS or Android, or bbUI  to mimic BlackBerry.

PhoneGap applications can have static UIs based on normal HTML, or can have dynamic & interactive experiences developed using JavaScript.   It depends upon the specific application, user experience design, target audience, and use cases to dictate how a PhoneGap application will appear.

PhoneGap applications can use pinch/zoom gestures to zoom in & out, or you can lock the viewport scale using the viewport metadata tag.   You can have the page scroll using normal browser behaviors, or you can use a library like iScroll to enable touch-based scrolling of specific container elements.

There really are lots of ways to create a user interface with HTML, CSS & JavaScript, so there really isn’t any “typical” look.   If you do not apply any CSS styles at all, then all user interface elements will use the operating system/browser default for that specific platform.   This includes buttons, links, and color/highlight states.   This behaves in the exact same manner as the operating system’s default web browser.

How do I get started in PhoneGap?

Getting started in PhoneGap is easy.   For 90% of a PhoneGap application, all you need is a text editor.  PhoneGap also integrates with device-specific development environments very easily.   You can view “getting started” guides for all application platforms at the links below:

When developing PhoneGap applications, just keep in mind that you are running code inside of a web browser instance.   You develop your applications using HTML and JavaScript, not native code, so you don’t need anything special.   In fact, I personally do most of my development on the desktop using an HTML editor and the Chrome browser.  When I need device-specific functionality, or I need to test on a device, then I switch over the the device-specific environments.

How do you debug PhoneGap applications?

Debugging PhoneGap applications can sometimes be the trickiest part of development.   If you are testing on a physical device, you can’t always get access to JavaScript exceptions when they happen.   There are a few strategies for debugging PhoneGap applications.

Develop as much as possible on the desktop browser

Since PhoneGap applications are written with HTML, CSS, and JavaScript, you can develop most of them using any HTML editor and debug them within a desktop web browser.  The latest versions of all major web browsers (including Chrome, IE, Firefox, Opera and Safari) provide rich debugging features. In the developer tools for the browsers, you can inspect HTML DOM elements, inspect CSS styles, set breakpoints in JavaScript, and introspect into memory & JavaScript variables.   You can learn more about the desktop browser development tools at:

Once you build the main aspects of your application using desktop tools, you can switch over to a device-specific environment to add device-specific behavior and integrate with PhoneGap APIs.

It is imperative that you test your applications on actual devices!   Actual devices will have different runtime performance than desktop browsers and simulators, and may unearth different bugs/issues including API differences and different UX scenarios.

Debug With debug.phonegap.com

PhoneGap provides a hosted service that allows you to perform remote, on-device debugging through debug.phonegap.com.  This uses the Weinre (Web Inspector Remote) debugging tool to allow you to remotely inspect the DOM, resource loading, network usage, timeline, and console output.   If you have used any of the developer tools listed above, this will look very familiar.  You will not be able to set breakpoints on the mobile device, but it is certainly better than nothing at all.

Remote Web Inspector Through iOS 5

There is a little known undocumented API introduced in iOS5 that allows you to perform remote debugging through the iOS5 Simulator.  You just need to enable remote debugging
[objc]- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// Uncomment to enable remote debugging
[NSClassFromString(@"WebView") _enableRemoteInspector];
…
}[/objc]

Then launch the application in the desktop iOS Simulator. Once the app is running, open a local Safari instance to: http://localhost:9999/. This will launch the remote debugger, complete with breakpoints and script introspection.

More Debugging Info

You can also read more about debugging PhoneGap applications at:

How do you architect PhoneGap applications?

You generally architect PhoneGap applications the same way that you create mobile web experiences. The difference is that the initial HTML assets are available locally, instead of on a remote server.   The PhoneGap application loads the initial HTML, which can then request resources from a server, or from the local environment.   Since PhoneGap is based in a browser, it behaves exactly as you would expect a web browser to behave.  You can load multiple pages; however, keep in mind that once you load/unload a page you may lose any data that is stored in memory via JavaScript.   PhoneGap also supports the single-page web experience model. I strongly suggest using the single-page architecture approach.

Single-Page Architecture

A single-page architecture refers to the practice of having a single HTML page that dynamically updates based upon data and/or user input.  You can think of this as closer to a true client/server architecture where there is a client application (written with HTML & JS) and a separate server structure for serving data.  All client-side application logic resides in JavaScript.  The client application may request data and update its views without reloading the current web page.

Using a Single-Page architecture allows you to maintain data in-memory, in JavaScript, which allows you to have a stateful, yet dynamic user interface.   You can read more about single-page architectures at: http://en.wikipedia.org/wiki/Single-page_application

PhoneGap applications can be architected with any of the common JS architectural frameworks, including Angular, Ember, Backbone, Mustache, etc…   Fellow Adobe evangelist Christophe Coenraets has some great content on these topics.

How do you get PhoneGap apps on devices and into application ecosystems?

PhoneGap applications can be deployed using the same guidelines for native applications for each given platform.   You must follow the rules of each hardware platform/vendor, and there is no way to get around that.     You can compile the executables for each platform yourself using each platform’s specific build process, or you can use build.phonegap.com to compile them for you.   build.phonegap.com is a hosted service that will compile platform-specific application distributable files for you.   In either case, the output of the build process is a platform-specific binary file: IPA for iOS, APK for Android, etc…   You can read more about distributing to various application ecosystems, and each system’s signing/certificate requirements at:

What is the difference between PhoneGap and AIR?

The most fundamental differences between PhoneGap and AIR is that you develop AIR applications using tools rooted in the Flash Platform (Flex, Flash, ActionScript, MXML), and you develop PhoneGap applications using HTML, CSS, & JavaScript.   AIR applications use the AIR runtime, which allows you to have a single code base, with the exact same expected behavior across all supported platforms.   PhoneGap applications run inside of the native web browser component for each supported platform.  For this reason, a PhoneGap codebase may behave slightly different between separate platforms, and you will need to account for this during your development efforts.

Air applications can be built for iOS, Android, BlackBerry Playbook, and the desktop (mac and windows), with future support for Windows Metro (Windows 8 mobile interface). You can read more about AIR’s supported platforms at: http://www.adobe.com/products/air/tech-specs.html

PhoneGap applications can be built for iOS, Android, BlackBerry, Windows Phone 7, HP WebOS, Symbian, and Samsung Bada. You can read more about PhoneGap’s supported platforms at: http://phonegap.com/about/features

ActionScript has strongly-typed objects and supports classical inheritance programming models. AIR applications can also be built using the Flex framework, which allows you to rapidly build enterprise-class applications.   Components in AIR applications are logical objects that have behaviors, properties, and a graphics context.

JavaScript-based applications support prototypal inheritance, and have numerous open-source frameworks/tools that can be used.   HTML/JS applications are all visualized through HTML DOM elements.  HTML interfaces can be created through basic string concatenation or JavaScript templating, but in the end you are really just creating DOM elements that have properties and styles.

There are some fundamental difference in the syntax of building these applications, however the basic concepts of interactive design and interactive development are identical.   Both platforms have valid strengths, which I could write about ad nauseum… I’ll save that for another post.

Where to go next?

Go download PhoneGap and get started at: http://phonegap.com/ or check out what other people have been building in the PhoneGap showcase at: http://phonegap.com/apps

11 replies on ““What is PhoneGap?” & Other Common Questions”