Turning the Big 1.0 - webOS App Development with PhoneGap | webOS Nation

Turning the Big 1.0 - webOS App Development with PhoneGap 10

by Tim Stiffler-Dean Sat, 13 Aug 2011 12:53 pm EDT

Ken Schreihofer is a Systems Developer from New Jersey, he writes about techniques for webOS and PhoneGap development at webOScapades. You can find him kicking around on Twitter at @digitalelph. We've asked Ken to come and share his experiences with webOS and PhoneGap here, so welcome him to PreCentral as he shares his expertise on the topic.

Last November, I happened to find myself sitting in Brian LeRoux's workshop at the HP Developer Day in NYC. His presentation on a platform called PhoneGap seemed to have quite a few people excited. I didn't have the slightest clue what that was, but I was fairly curious about the hubbub. Well, Brian's excellent presentation sated that curiosity, and gave me a hunger for more. That was my first introduction to the power and potential of the PhoneGap framework.

PhoneGap is described by the creators at Nitobi as “a cross platform native development framework that enables you to write phone applications for various mobile platforms using HTML, JavaScript and CSS.” While that's a bit of a mouthful, the role that PhoneGap plays is simple. It erases the traditional lines of mobile development. Instead of learning the native language for each platform, just write your app in HTML and JavaScript. You can port that app to iOS, Android, BB OS, WP7, Symbian, and webOS. In addition to the same code working on different platforms, your PhoneGap application can be deployed simultaneously to devices running webOS 1.x, 2.x, and 3.x. Imagine the possibilities.

A webOS developer might find it difficult to write an A+ app using only PhoneGap. On its own, PhoneGap is a barebones framework – it gives you access to various device APIs and a general structure for building an app. You could think of it like cooking a pie, with PhoneGap being the crust. Just like every delicious pie, it requires multiple ingredients, just the right mixture, and a little bit of love. There's no shortage of tools and libraries out there to help make your perfect app. Sencha Touch, jQueryMobile, jQueryTouch, and Jo are popular options for UI. iScroll 4 works well for inertial scrolling lists. JsOAuth for authentication. New JavaScript libraries pop up so often that you'd have to try hard to not find the right tools. (Tip: To find out about most of them, you can follow @dalmaer on Twitter)

There's been a good amount of discussion in the webOS developer community on the merits of various development paths. On one hand, you have the tried and true Mojo, which is currently deployed on all webOS phones. However, support for Mojo is diminishing and discouraged by HP. Enyo is the new hotness, but is currently limited to the TouchPad with an unclear rollout to current generation devices. There's a third option, and it's a strong contender: PhoneGap. The framework generally provides access to the full capabilities of webOS devices. Current APIs include the accelerometer, camera, gestures, geolocation, network, notifications, orientation and more. The main areas that fall short typically relate to Synergy, such as calendar and contacts integration.

PhoneGap isn't necessarily the right solution for every developer, but it could be for many. It's what finally gave me hope that I could write a webOS app. Personally, I've found it difficult to learn and work with Mojo and Enyo. I have a passing familiarity with JavaScript, and an advanced application in both of the frameworks requires advanced knowledge. PhoneGap just clicks for me at my current experience level. I see the light at the end of the tunnel – I might actually publish my app soon!

This post is being written in celebration of PhoneGap turning the big 1.0. While that version number typically describes unpolished software, it isn't the case here. PhoneGap is a mature and ever improving platform. You know, the allure of PhoneGap for a webOS developer is simple. It delivers on the promise made by Palm so long ago: you can write apps for webOS using only web techniques. There's no need to learn about scenes, assistants, kinds, or anything new at all. Just pure web methods. That lowers the barrier of entry for web developers, and that's just about what we need right now. So, a happy 1.0 to PhoneGap, and a hearty congratulations to the developers at Nitobi. Here's to a bright year of mobile apps!

Find out more at PhoneGap.com


Is that, mayhaps, a webOS toaster amongst the techno-rabble in that picture? (I still haven't given up the dream)!

great now if someone can teach me how to make an application!

I'm itchin to get back into development. Been away far too long. Maybe PhoneGap will help me get over that hump. I thought that PhoneGap was just to port existing apps to other OSes tho. Guess I misunderstood that part.

No, it's not a tool for "porting" apps. Your apps must be written in HTML/CSS/Javascript and designed to use PhoneGap for any system-level calls that are not readily available to a normal website. If you need to go beyond what phonegap provides, you are responsible for writing plugins in the native platform language (and you must do so for each platform you wish to deploy to) and then include those plugins into your app.

Now this is interesting. A framework that is os agnostic. That works for me. Would be great to develop an app that works in webos (1.4.x,2,3) and be able to transfer it to an IPhone or Droid without having to rewrite it. Now the Big question. WHAT THE HECK DO I MAKE A APP FOR? Still figuring that one out.:D

here's a freebie idea; Write an app that shows data reception quality, mmaybe a notifiication when signal strength is optimal or dead, and maybe use gps to show how far away from a tower one is. And maybe a little ticker showing how many devices are logged on the same network. Ok, get started! I'll be waiting in the app catalog with my three dollars and ninety-four cents ;)

@Ken Schreihofer: What framework do you use for the UI? I read in the developer forums that jQuery mobile has problems with scrolling on webOS.

"It delivers on the promise made by Palm so long ago: you can write apps for webOS using only web techniques. There's no need to learn about scenes, assistants, kinds, or anything new at all. Just pure web methods."

That is a pious hope, making a good app requires a lot of knowledge in diffent frameworks. That is not a easy as making a simple website. Sure you could make an App using plain html, javascript and css, but it probably won't be popular at all and get bad rating.

Phone Gap it self doesn't make programming of app easier per se, it is just the case that you could use that code on all other platforms.

To make a great app you have to make a native interface for each platform, and when you use phonegap you can use your unchanged backend with each of them.

Hi StephanP,

Currently, I'm using iScroll 4 for inertial scrolling pages+lists and rolling my own UI for the rest of the app. I've tried jQueryMobile briefly, but it has serious CSS rendering problems on 2.x. This is a problem with webOS, not jQueryMobile. See https://github.com/jquery/jquery-mobile/issues/1337 for more information. Not sure about scrolling problems, but the CSS rendering makes it nearly unusable for me. Sencha is next on my list to try.

Yes, that's correct. PhoneGap just provides the device functions that otherwise wouldn't be accessible in a web app. Even without PhoneGap, you could essentially write an HTML page and turn that into an app using palm-package.

I agree, yes. Unless you're extremely skilled, writing an app with stock PhoneGap will typically have a not-so-pretty result. The UI frameworks do a lot of that heavy lifting to make an appealing app. So yes, using a framework is important. However, I don't think that it's necessary to always run a native UI. There's a certain strength in maintaining a consistent look and feel across platforms.

Ken Schreihofer

The trick to PhoneGap is simple:

1. Most mobile platforms provide in their API a component that a developer can use to display web pages from within their app (WebView in Mojo and Android, UIWebView in iOS, etc). PhoneGap basically gives you an application that displays a native web view component and then run your HTML/CSS/JavaScript application in that component as a web page.

2. PhoneGap comes with some plugins out of the box to allow your javascript to call down to the native OS for certain services via the call/callback metaphor. You call a special method that exposes a service and one of the parameters you pass to that method is the method you want the service to call when the results are ready. This is very similar to how Mojo works.

3. If you need functionality for your platform(s) of choice that is not already provided by PhoneGap, it is then that you roll up your sleeves and write native plugins (you must do this for each platform you wish to support). The good news is that you can search for plugins that the community has already provided and may get lucky.

The good:
Not including games and fully emersive apps, you can really get the vast majority of your work done without having to learn the platform's native language. In some cases it's 100% but it depends on the needs of your app. You can get your app to look almost identical on all platforms (this can be bad as well as I've noted in the downside).

The downside:
You are really just creating a webapp that will run inside of a native shell-app. When it comes to performance, you are at the mercy of how well the web view component of your chosen platform(s) deal with javascript (believe me when I say it's less than pretty on some platforms). Your app looks similar to native (depending on the JS framework you use and how good you are with css, but no matter how hard you try, most users familiar with a specific platform will be able to tell your app is not native. Unless you put in extra work, your app will look almost exactly the same across platforms. Want to piss off an iOS or webOS user? Design your app to look like a native Android app and then deploy it to the app catalog or app store. You can do quite a few tricks to help your app perform well, but yes people, much of webOS' lag IS due to the use of JavaScript as the main development language. And your app will often exhibit this signature lag on all platforms.

We use Sencha Touch combined with PhoneGap for many of our clients and it works well enough.

On a side note, Appcelerator eliminates much of the downsides of PhoneGap. You still write your apps in JavaScript but it is converted to real native applications. They run like native app. They behave like native app. They look like native app. They ARE native app. Appcelerator comes with its own set of downsides as well, but performance and look'n'feel are usually not among them.

Taharka's post is very much on the ball and a great analysis. I had to laugh at your comment about Android. I'm pretty sure that the default thinking of most webOS users is that Android UI stands for "Ugly Interface".

Ken Schreihofer