Domain7

Hello!We'd love to chat. Get in touch at hello@domain7.com or follow us on Twitter, Facebook or LinkedIn or sign up for our Newsletter!

Previous ProjectPrevious Post:
PPC: not as scary as you think!
Previous ProjectNext Post:
Google puts the hammer down
Comments

PhoneGap: where mobile web meets native app

Smartphones and tablets are overtaking traditional computers in sales and usage, so it’s no surprise this consumer shift is driving industry interest in mobile development.

At Domain7, we've taken a stand on the mobile web vs. app debate, and we still believe the web trumps apps in terms of cost, speed and reach.

Every once in a while, however, there’s a use-case that requires native smartphone technology. In these cases, we still think it’s essential to retain those important aspects of openness and cross-platform compatibility.

Enter PhoneGap.

 

PhoneGap is a tool that combines the power of the web with the power of phones and tablets—their hardware (camera, gps, accelerometer, microphone, etc.) and data (contacts, storage, etc). It blends the advantages of both web and native apps by creating a native wrapper around web applications. The wrapper allows access to hardware and data and gives your app a space to store HTML, JavaScript, and CSS right on the device.

Not only is it open source, PhoneGap makes it easy to develop software for several platforms at the same time by taking advantage of developers' experience on the web and extending that with APIs. This ultimately saves money in development by having an easily-written, single codebase.

Domain7 recently used PhoneGap for a custom registration system for a state government department. Here’s what we found:

The Business Case
There’s a certain "me too!" attitude toward mobile apps—it’s tempting to build an app simply to have a shiny new button on your customers' phones. But apps need relevant functionality to truly engage the customer. "Brochure" apps (static information only) only take up space on the mobile device and require overhead to update. Relevant functionality needs to be considered in the mobile context—this can lead to clever uses of the hardware or data on the phone, and it should be a prerequisite to any mobile application. Consider the limitations of mobile devices (small screen, no mouse or keyboard, etc) to create the best possible experience for users on the go.

Challenge: Performance
One of the great things about PhoneGap is the ability to write your UI in HTML and have it render across all platforms fairly consistently. Unfortunately, this also causes the biggest issue raised with PhoneGap: performance. From a theoretical view, PhoneGap can't be as fast as native code for a few reasons:

  • It uses a Web View, which is inherently more complicated for the mobile device to render.
  • Its apps are wired together with JavaScript—an interpreted language, which is slower than compiled (native) languages
  • It has a bit of overhead because you don't use all of its features in every app

However, there are a few things that can be done to improve performance, similar to any web app:

  • Audit your HTML: the more HTML you add on a single page, the more work the rendering engine has to do. Large images and complex CSS can also hurt performance (even if loaded locally)
  • Profile your JavaScript: DOM manipulations (including jQuery animations) can be very slow on mobile devices. Consider using CSS transitions instead. (Use profiling tools in a regular browser, but also test on a couple mobile browsers)
  • Convert slow-running JavaScript code into native code: PhoneGap compiles natively and you can write native extensions for it, exposing them via JavaScript
  • Remove unused code: because PhoneGap is open source, you can streamline some of the JavaScript to make the app load a little faster

And of course, if your app gets too big and complicated for PhoneGap, hopefully your success with the PhoneGap platform will propel you into having the resources to rewrite with a higher-performance platform, treating PhoneGap as a R&D tool. Even if you end up writing a standard native app, you can reuse parts of your PhoneGap-based app inside of "web views" just like PhoneGap does. (This is a case of using native and web.)

Challenge: Look and feel
Another side effect of writing the same HTML UI for all platforms is that your app will look more like a website than a native app. There are ways to work around this, but it may not be the worst thing for the user.

In my early programming years, I tried to make all my Windows apps look like Microsoft Office—the toolbars, the styling, etc. In reality nobody cared if my apps conformed to the Office style guide (and it was a moving target, with new versions coming out regularly). I recognize that Apple has great taste (and a lot of designers approve), but even Apple changes styles and has some inconsistencies.

Flip that around: if you have a good UI designer who has already applied your brand to an existing website, there's a good case for making a UI that reflects your app's brand consistently rather than following the Apple or Google brand.

PhoneGap in the Future
In a presentation by Brian Leroux (a PhoneGap developer), he describes how many of the features in PhoneGap are really just early implementations of what are hoped to be future web standards. This means that as browsers start implementing more device APIs (so that regular web pages can request permission to access your camera, for example), the need for PhoneGap will diminish. PhoneGap will be a great place to incubate and test some of those evolving standards before they are implemented universally. PhoneGap just released version 2.0 and continues to be actively developed.

Other solutions
PhoneGap is not alone in the Mobile Development space. In a future post I’ll look at the spectrum of options in the mobile development landscape. In the meantime, email me if you want to know more about our experience with PhoneGap or take a moment to read our Mobile Manifesto.

 

Human Web Term Reference