Thoughts on PhoneGap

This post is more than 2 years old.

Over the past few days I've had a chance to play a bit with PhoneGap. PhoneGap is a free platform that allows you to use HTML to create mobile native applications for Android, iOS, Blackberry, webOS, Symbian, and Windows 7 (soon). This blog entry will not detail how to work with PhoneGap since they provide excellent documentation already. Rather I'm going to focus on my experience in getting it running.

Getting Started

My experience began with the Getting Started page where - I have to admit - I had massive brain fart. The page talks about iOS when you first land. I thought - at first - that was the only platform they were documenting. Believe it or not it never occurred to me to hover over and click on the Android link. Yeah it's pretty obvious to me now but at the time I just assumed they weren't providing a guide for non-iOS devices.

The guide recommends installing Eclipse Classic. I wanted to use ColdFusion Builder 2 of course. Following the directions I ran into an issue when I was asked to install ADT. I love that Eclipse plugins can so easily tell you what they are missing yet provide so little help in actually getting you to the plugin. Mike Henke helped me out by suggesting I add http://download.eclipse.org/releases/helios/ as an update site. I did that and filtered on GEF once the resources loaded. The resource ADT was complaining about can be fulfilled by adding Graphical Editing Framework GEF SDK

Obvious, right? Install that, then come back and get ADT added. Once done I was able to proceed with the Getting Started guide.

The guide has a few steps of the sort "Copy this file here" and "Modify this line so and so." They all work fine. But whenever I read documentation like this I always get a bit worried. I feel like the guy on the disaster flick who has to land the 747 while air traffic control tells me what buttons and levers to push. Don't get me wrong - it was easy enough to follow (* see the note on the small typo following) but when I don't know why I'm doing something I'm always concerned it will break. Luckily everything worked perfectly fine. The only small issue is that you are asked to copy phonegap.js and the file is actually phonegap.0.9.4.js. Easy enough to figure out.

Running

If you've already set up the Android SDK and created a virtual device, then running your application via Eclipse is pretty trivial. Unfortunately, you now get to experience the massive fail that is the Android simulator. Don't get me wrong - I love me some Android. I love that Android's SDK isn't Mac only like iOS. But the performance of their simulator mimics my old 386 PC from 1991. It's horrible and there is no excuse for it. The last time I googled on the topic I mainly found people saying "Yep, it's slow, deal with it." Anyway, I think my first run took about 4 minutes to actually show up in the simulator. Ticked off - I killed my current VM and made a new one. This time a run took about two minutes. Better, but a) I have no idea why and b) two minutes is hella long to run something.

Luckily there is an alternative. If you have a real Android phone, you can push to it if you have USB debugging turned on. This ran extremely fast. I'd say about 3-5 seconds. What was tricky - for me - was figuring out how to tell Eclipse to go to a real device. When you look at run configurations, you see this:

As you can see, we have two choices - Manual and Automatic. Automatic listed all my VMs. To me, nothing seemed obvious as "real" hardware. On a whim I clicked "Manual" and then run and I saw my device...

And bam - that's it. I don't yet know how to make my Eclipse run button "just do that", but I don't mind that. As I said, from me wanting to run to seeing it on my phone was approximately 5 seconds. That's epic good in my mind.

Testing

So - I got me some HTML on my phone. Cool! But now I wanted to see what I could actually do with the HTML. In my first test I wanted to see if the cross-domain XHR restrictions were in place. This is the security block that prevents you from requesting a JSON packet from some other domain. Here's the code I used:

<!DOCTYPE html> <html>

<head> <title>List Examples - Nesting</title> <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script> <script type="text/javascript" src="jquerymobile/jquery-1.5.1.min.js"></script> <script> $(document).ready(function() {

$("#testBtn").click(function() {
	$("#testDiv").append("Beginning test&lt;p&gt;");
	$.getJSON("http://groups.adobe.com/api/group.cfc?method=getgroup&id=113",{}, function(res,code) {
		$("#testDiv").append("Result = "+res.NAME);
	});
});

}); </script> </head>

<body>

<input type="button" id="testBtn" value="TEST" style="width:100%;height:100px;">

<div id="testDiv"></div>

</body> </html>

I honestly didn't know what to expect here. My understanding is that PhoneGap is essentially wrapping a browser, and browser's have restrictions. But luckily this worked perfectly. Immediately it occurred to me - this is just like building an HTML based Adobe AIR application, and indeed, it turned out to be closer to that then I expected. As you may know, when writing HTML-based AIR apps, your JavaScript can be extended using new built in objects that provide access to things like the file system, web camera, etc. PhoneGap provides a similar system. So for example, I can introspect the device:

$("#testDiv").append("Phone is "+device.name +" and is a "+device.platform+"<br/>");

And I can search the phone's contact system:

var fields = ["displayName"]; var options = new ContactFindOptions(); options.filter="Adam"; navigator.service.contacts.find(fields, contactSuccess, contactError,options);

Looking at PhoneGap's API, it looks like you have access to basically everything. There seem to be many caveats (ie, this feature does this on iPhone and does this on Android), but in general it feels like you can build something with pretty deep integration.

Finally, I tested jQuery Mobile. I simply copied one of the samples from my presentation and ran it. It worked perfectly. No big surprise here, but it was nice to see.

All in all, I'm pretty impressed with what I see so far. What's even cooler is that they are looking to make this even simpler. The team is currently running a beta called PhoneGap Build, where basically all you do is upload your code. I haven't tried it yet (although I did sign up for the beta and got access) as I wanted to try things the manual way, but this feature could be absolute killer for them. I could easily see paying a yearly subscription for such a service. According to their FAQ the service will be free for OS projects and they will be announcing pricing for commercial apps. I really hope they announce that soon. I can think of a certain other service I liked quite a bit that took forever to decide on a price and once they did - it was far too high.

Sermon

You've been warned, the "review" part of this blog entry is done. ;) I find it sad that some people are so opposed to tools like PhoneGap. There seems to be an attitude that if you make it easy for people to create, they will only create crap. That's truly sad. It's elitist. It's unfair. And it prevents otherwise creative people from sharing their vision with the rest of the world. Don't get me wrong - I appreciate the fact that programming is a science. I can appreciate the skill it takes to create something "important" like, oh, Angry Birds. But not every application needs the skills of a hard core Objective-C coder. Opening the gates and allowing more people to create will result in more crap. I don't deny that. But I'd take a thousand more fart apps if it allows the creation of one gem. I think it's great that organizations like PhoneGap and companies like Adobe are making it easier to build on multiple platforms. I haven't felt this way since I first ran Mosaic and used ed on a Sparc machine to edit an HTML file!

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Rob Barthle posted on 3/23/2011 at 6:16 PM

"There seems to be an attitude that if you make it easy for people to create, they will only create crap."

Sounds a lot like things I have heard said about ColdFusion. That makes me only want to try out PhoneGap more.

Comment 2 by Eric Reeves posted on 3/23/2011 at 6:21 PM

Any idea how PhoneGap compares to Appcelerator? Would that happen to be the "certain other service" you mention?

I currently work for a large corporation building intranet apps and the fact that Appcelerator won't list their prices but has a "Contact Sales" button instead has been enough to scare me away. :)

I'll definitely do some playing with PhoneGap!

Comment 3 by Raymond Camden posted on 3/23/2011 at 6:54 PM

@Eric: I've not looked at Appcelerator. Heard of it of course - just haven't checked it out.

Comment 4 by SuperAlly posted on 3/23/2011 at 6:57 PM

Thanks for pointing this out Ray. I can always rely on you to find more toys to prevent me from getting any sleep :)

I'm definitely going to give this a look.

Comment 5 by Kevin Marino posted on 3/23/2011 at 7:05 PM

Very Nice review. Sermon is spot on. Agree PhoneGap is great especially when you consider companies want to deploy apps for their people and this allows them to leverage their talent pool without having to go to often expensive mobile developers.

Comment 6 by Henrique Feijo posted on 3/23/2011 at 7:14 PM

This is neat Ray. I love when you always discover and share something nice with us. I have some friends developing an application for Android using pure Java. I wanted to help them, I didn't want to spend months training Java again (It's been a while I don't use it). Now I will be able to join them using my expertise (Html, Javascript, Coldfusion).

Comment 7 by Brian Rinaldi posted on 3/23/2011 at 7:22 PM

Most of the fart apps were written in Objective-C - which goes to show, making things more difficult doesn't prevent our unstoppable ability to create crap. :)

Comment 8 by Mike Hodgson posted on 3/23/2011 at 7:28 PM

Thanks for the write-up Ray! I've been using Appcelerator, but may now have to give PhoneGap a look!

@Eric Appcelerator is free for personal and commercial use (see bottom of their Titanium Platform page) but you have to pay for support and their Titanium Plus+ modules.

Comment 9 by Syed posted on 3/23/2011 at 8:01 PM

Nice review. PhoneGap Build looks promising. I wonder if you can make an app on windows os, and have Build to deploy it to ios. Dont we have to "build" the app on ios?

Comment 10 by andy matthews posted on 3/23/2011 at 8:24 PM

It's worth pointing out some pros and cons with Phonegap and Titanium Appcelerator.

Phonegap
------------
- PRO: write once, build to 5 different OS
- PRO: It's JavaScript, leverage existing code
- CON: code remains javascript, runs in a WebView component

Titanium
-----------
- PRO: Write once, submit to 2 different OS, with a 3rd in beta testing.
- PRO: JavaScript
- CON: requires custom classes and IDs (AFAIK)
- PRO/CON: Your code is compiled into native Java or Objective-C code and is truly a native app

Comment 11 by Jesse Archer posted on 3/24/2011 at 1:16 AM

Not sure if you've seen "Sencha Touch" - from the reviews I've read, it looks better than using jQuery Mobile and PhoneGap together.

Worth googling.

Comment 12 by Raymond Camden posted on 3/24/2011 at 1:20 AM

I'm aware of Sencha Touch. It's not free though, right? Not saying that is a barrier of course. I pay for CF. ;)

Comment 13 by Glyn Jackson posted on 3/24/2011 at 1:36 AM

Ray, Android's SDK is slow stating, however just use snapshot to solve this. Enable snapshot and it will start up from the last point without all that bootup crap.

Also give Titanium a go. Is so MUCH better than phonegap! phonegap is missing a LOT of the API functions. Titanium is compiled to native Java or Objective-C. Phonegap is just a wrapper, cool tho.

Comment 14 by Raymond Camden posted on 3/24/2011 at 1:49 AM

Well hell, that's a lot better. Not quite as fast as getting it to the real device, but shoot, I'd call it usable now for sure. Thank you very, very much. This tip is useful for anyone using the simulator.

Comment 15 by Glyn Jackson posted on 3/24/2011 at 1:58 AM

Glad it helped Ray :)

I know you are busy man, but I would love to hear your opinions on Titanium. It's worth it vs phonegap. Give it a go and let us know how you found it. ;)

Comment 16 by Eric Reeves posted on 3/24/2011 at 2:43 AM

Sencha Touch is cool, but it's the same basic principle as jQuery Mobile (a JavaScript library aimed at mobile devices). PhoneGap could be used with Sencha Touch in the same way.

Comment 17 by Kerr posted on 3/24/2011 at 8:24 AM

Grr - I tried posting a couple relevant links, but "Your comment has been flagged as spam."

Comment 18 by Kerr posted on 3/24/2011 at 8:25 AM

I believe Sencha Touch, even the commercial license, is free. {{link removed}}

One of the latest Sencha blogs is about integrating Sencha Touch with Phonegap. {{link removed}}

Ok, so apparently, I cannot post URLs in comments? Both of these resources are easy to find on the Sencha site.

Comment 19 by Raymond Camden posted on 3/24/2011 at 3:06 PM

You _can_ post links most of the time. I use a pretty aggressive anti-spam engine here. Sorry.

Comment 20 by Hugo Zapata posted on 3/27/2011 at 11:32 PM

I'm happy to find that phonegap has potential for some people, i have good javascript knowledge and is great to be able to use it to build phone applications, i'm really not interested in going back to java right now , or learn objective-c

Comment 21 by Yogesh posted on 4/11/2011 at 9:05 AM

Thanks for the helpful review, Ray.

About Titanium: just a short while ago I came across a comprehensive account of one developer's experience and comments on that (Jacob Singh's blog), at http://www.jacobsingh.name/.... Seems like Titanium has problems. I'd be intersted in other views.

Comment 22 by Mike Hodgson posted on 4/11/2011 at 3:24 PM

@Yogesh That review is quite out of date, I downloaded Titanium two months ago, and have had no problem generating Android apps.

The latest Android SDKs move adb to a different directory, but that's easily remedied by creating a symbolic link to the executable.

Comment 23 by Tawl posted on 4/15/2011 at 2:40 AM

Hi all

Looks like there are some very knowledgeable mobile developers commenting on this forum. As an experienced web and desktop application developer with an urgent requirement to get into mobile development, what route would you guys advocate?

I came across both Phonegap and Appcelerator Titanium whilst searching for x-platform frameworks, and based on the marketing bumph Titanium had the edge due to its greater native support, but I've seen so many complaints about the Android support now that I've been frightened off.

@mike hodgson, you seem to believe that these Titanium issues have been resolved. Can anyone else back this up as I've seen some pretty horrific posts about the lack of Titanium support and lack of recognition of the Titanium issues by Appcelerator themselves.

Does anyone have any advice on platforms, frameworks, dev resources etc for an accelerated foray into mobile development?

Thanks,

Tawl

Comment 24 by Tawl posted on 4/15/2011 at 2:41 AM

Sorry, I meant lack of Android support and lack of recognition of the Android issues.