Mobile Dev Alter[native] #3 – PhoneGap

PhoneGap is originally created by Nitobi, but made big headlines recently with it’s acquisition by Adobe. PhoneGap is one of a few products on the market that allows developers to leverage their knowledge of HTML, Javascript and CSS in order to build apps for mobile devices. These HTML based apps are then wrapped with a native wrapper that provides access to native APIs. In PhoneGap’s case, the HTML content is then displayed within a native webview. The fact that Adobe acquired Nitobi and it’s tools isn’t really that surprising given that Adobe’s mandate has always been to build tools that allow content to be deployed across different media types and platforms.

Also it should be made clear that PhoneGap is an SDK for building native app packages, not a web framework that you use to build your app. So web frameworks like jQuery or Sencha Touch can be used when building your app (and are even encouraged), and they will work perfectly fine within the app package that is deployed.

Mobile Platforms:

PhoneGap allows deployment to the major platforms including iOS, Android, BlackBerry as well as others like Symbian, WebOS and Bada.

Dev Environment:

Since a PhoneGap app is entirely written in HTML/Javascript/CSS, any text editor or web authoring tool will do. With the Adobe acquisition, obviously integration with their tools will become tighter, so look for PhoneGap SDK integration in Dreamweaver (already available), Muse and Edge. In fact, Dreamweaver already supports running your app in the iOS and Android emulators.

When writing your app, PhoneGap exposes a Javascript API for integration with native features (described below), which the SDK includes.

Once your web app is ready, there are 2 ways to build your native app package for deployment:

  1. Download the PhoneGap SDK and use it with your dev environment of choice, which depends on what platform(s) you’re building for. There are instructions for doing this for iOS, Android, BlackBerry, WebOS and Symbian on the PhoneGap website.
  2. If you don’t want to deal with manually setting up the SDK, you can use PhoneGap Build, which is an interesting option because it allows you to upload your web app to the cloud, and it automagically converts it to native apps for all of the supported platforms.

App Types:

Since apps are essentially web apps, you can do anything you could with a web app. At the same time, it also means that you don’t have the advantages of a native app in terms of performance, so don’t expect to see 3D games or 2D games using physics engines.

Native UI Controls:

PhoneGap doesn’t support native UI controls, however, frameworks like Sencha Touch have already created styles around their UI controls that match the various device platforms.

Also, there is a third party plugin called NativeControls that adds the ability to include some native controls in your app (see more on plugins below).

Device APIs:

The following device features are accessible through the PhoneGap SDK:

  • Camera
  • Accelerometer
  • Compass
  • Contacts List
  • Geolocation
  • Image Gallery
  • Local Storage
  • Multitouch / Gestures
  • Notifications
  • Orientation
Additionally, PhoneGap plugins allow additional features to be accessed via a Javascript API. Existing examples include:
  • Barcode Scanner
  • Bluetooth
  • File Uploader
  • Power Management
  • SMS
  • Speech Recognizer
and a lot more. See what’s available at the PhoneGap Plugins repository on GitHub.

Cost:

The cost for development depends on the tools/frameworks you want to use to do the HTML development. Cost for PhoneGap Build is free for open source projects, or can cost between $12/mo to $90/mo depending on the number of commercial projects you need to build.

Summary:

I think it’s inevitable that tools like PhoneGap have arrived on the scene, since the HTML/Javascript/CSS stack has such a wide developer base. In that way, it’s a fairly low risk way for devs to enter the app market. And the fact that you can deploy to a number of different platforms makes it VERY¬†desirable.

However, since you are essentially building a web app that runs within the native webview, it just won’t be as performant as a native app. In a lot of cases, that doesn’t matter, so there are definitely some apps that are more suited to this than others. Also note, even though Apple introduced the Nitro Javascript Engine to Safari, which apparently speeds up JS execution 2x, Nitro is NOT available to webviews that are used within apps. So performance can definitely be an issue.

Still, it’s worth checking out if you’re looking for something you can quickly move into if you have an existing web dev skillset.

Resources:

Introduction to PhoneGap Dev
Thoughts on PhoneGap
PhoneGap Wiki
PhoneGap Beginners Guide
PhoneGap Mega Demo

For updates when new articles in this series are posted, follow @philterdesign on Twitter.


No comments yet.

Leave a Reply