PhoneGap: Mobile Development Made Easy

PhoneGap: Mobile Development Made Easy
Mobile development is as much about UI artistry and screen flow as technical programming. This premium on presentation means that the most important skills for building mobile apps are more likely to be found in your Web developers than your Objective-C coders.

PhoneGap -- now officially an Apache Software Foundation Incubator project named Cordova -- lets you leverage Web development skills in the mobile domain by combining HTML, CSS, and JavaScript with an API for tapping native device hardware and functionality. PhoneGap gives Web programmers the means to tap contacts and files, manipulate local storage, work with sensors (camera, GPS, and such), and facilitate data exchange directly from their HTML-derived mobile UIs.

[Also on InfoWorld: 10 programming languages that could shake up IT | 11 programming trends to watch | 12 programming mistakes to avoid | Keep up on key application development insights with the Fatal Exception blog and Developer World newsletter.]

Best of all, a single PhoneGap app can be deployed across the widest range of devices you can imagine: Android, iOS, Windows Phone, BlackBerry, Symbian, WebOS, and Bada. Naturally, there's a cost to PhoneGap's ease and cross-platform compatibility -- PhoneGap creates Web apps that seem native, but don't really qualify.

When you build an Android app, for example, PhoneGap wraps your HTML, JavaScript, and CSS in a WebView container, relying on the underlying WebKit rendering engine for execution and thereby inheriting the browser's processing limitations. As a result, PhoneGap will not be the best choice for processor- or graphics-intensive applications.

But if you're looking to extend data-driven Web applications to a broad range of mobile devices, PhoneGap strikes an excellent balance between developer effort and application functionality. It lets you create capable apps that can be extended with plug-ins to mimic native UI look and feel, or to add functionality such as push notification or PayPal integration, but without the skills and effort associated with native coding. And it's free.

PhoneGap: Mind the gap

Note that the PhoneGap SDK is a bare-bones framework. You'll find no prefab code widgets or bells and whistles for user interface development. Nor does PhoneGap provide middleware for connecting devices with back-end servers, such as the enterprise-level sync infrastructure offered by Rhomobile.

You'll need to use a native tool chain to code your app. For Android, you install Eclipse, the Android SDK, and the Android Development Tools (ADT) plug-in. You may also install Git if you want to target specific platforms and minimize the footprint. If you want your app to run on iOS, Windows Phone, and BlackBerry as well, you can use Adobe's PhoneGap Build cloud to create packages for all of these and other supported platforms. PhoneGap Build is free for open source projects, and it starts at $12 per month for private applications.

Getting started with the Android SDK required a bit of code tweaking: defining an Android project, importing the PhoneGap libraries, pointing the starting Java file to PhoneGap, and modifying the base class to extend DroidGap. You also have to change setContentView to load the URL of your app's HTML-based home screen, which also must be manually created.

If any of that seems off-putting, you might consider using one of the PhoneGap-based IDEs, such as AppMobi or Tiggzi, which put a visual front end on the framework. Adobe Dreamweaver CS 5.5 also works well with PhoneGap.

Using PhoneGap with Xcode on the Mac is more seamless, with Xcode generating all assets and providing a graphical front end to help configure options like splash screens and device orientation. Still, it was easy enough to configure my target Android device (Android version, screen resolution, storage device, and so on) in Eclipse, and I could stub out a basic app pretty quickly. The API methods are well documented and peppered liberally with example code snippets.

Eclipse sets up a central folder that becomes the primary repository for your project images, HTML, and JavaScript. Developing your app -- whether you're using Eclipse's text editor or Dreamweaver's PhoneGap plug-in -- is just like building a standard Web page. And while you can't directly access native interface elements, you can make use of third-party UI kits such as JQuery Mobile, Sencha Touch, and XUI. You can use CSS3 to create effects as well.

In addition to easing development, PhoneGap's browser-based approach offers the advantage of delivering more predictable results across varying device form factors and pixel densities. On the downside, there's still a lot of hand coding involved that isn't managed by Xcode or Dreamweaver. This is where cloud-based tools like Tiggzi come in handy. In addition to supporting drag-and-drop interface construction, Tiggzi provides a graphical interface for wiring service calls, mapping these calls to the UI, and testing the results. In PhoneGap, all of this is done by typing in code.

PhoneGap: A tool on the move

As terrific as PhoneGap is, it could always do more. For example, I'd like to see better tools for manipulating data, as well as deeper support for Android standards like intents, which provide a means of handling messaging events such as an incoming call, the arrival of an email, or the completion of a file transfer. In some cases, a plug-in is available (such as WebIntent for using intents), but these run into reliability and compatibility issues whenever PhoneGap revs. Rather than relying on plug-ins for these native functions, they should be managed by PhoneGap.

PhoneGap maintains an aggressive release schedule with new updates pushed nearly every month. Although developers looking for hot, new features will appreciate the quick release cycle, the fast pace inevitably brings with it bugs and code reorganization to which early adopters and plug-in developers must be mindful. From a management perspective, I'd prefer to see less frequent and more significant releases.

Adobe PhoneGap
Just into production is the cloud-based PhoneGap Build service, which takes your project files and kicks out a targeted binary ready for deployment. Although I found Build to be a little sluggish, it can be a real timesaver when contending with keys and certificates -- even if you're building for just one platform. But the big advantage is that Build sidesteps the need to maintain multiple development platforms for compilation. You can upload the code you built with the Android tools and kick out binaries for iOS, BlackBerry, and Windows Phone too.

Not every mobile project requires a native application or an enterprise infrastructure. If you're looking to extend a Web app to mobile devices, PhoneGap offers a fast, familiar, and cost-effective way forward, tapping native device features on every mobile platform that matters without requiring native programming. PhoneGap may be the fastest and easiest way to build data-driven mobile apps today.

This article, "PhoneGap: Mobile development made easy," originally appeared at InfoWorld.com. Follow the latest news in programming and mobile technology at InfoWorld.com. For the latest business technology news, follow InfoWorld.com on Twitter.

Read more about application development in InfoWorld's Application Development Channel.

For comprehensive coverage of the Android ecosystem, visit Greenbot.com.

Subscribe to the Daily Downloads Newsletter

Comments