We are here at FutureRuby 2009 in Toronto. We are here with the guys from the PhoneGap project. Why don't you tell us a little bit about yourself?

Brian: Hi my name is Brian LeRoux, I am a software developer with Nitobi in Vancouver, BC and PhoneGap is one of the projects that I work on there.

Rob: I am Robert Ellis from Nitobi as well, I started working on PhoneGap in August of 2008.

What is PhoneGap?

BRIAN: PhoneGap is a cross platform development tool for building mobile web apps. It targets iPhone, Android and the Blackberry, we are working on support for Nokia devices and Windows Mobile and of course Palm Pre and it's for building apps which use web standards and can access native device features.

So what kind of problem are you solving exactly? Why would I for instance use PhoneGap?

BRIAN: The first problem we are solving is we don't like writing code more than once for more than one platform and on the iPhone you have Objective-C for native development, on Android you have got Java on Blackberry you have a version of Java that can only compile if you have a Windows machine. The whole platform is quite fragmented so the whole idea of mobile development. We have already solved this problem with the web, and so the idea of PhoneGap is that we are going to expose the APIs from HTML 5 back to an instance of a web browser and allow you to build cross platforms apps.

ROB: We in Nitobi are software developers but specifically we are JavaScript HTML developers first I guess. That is a common thread amongst all of us so we were scratching our own itch when we started writing this framework. Then I think it is really compelling from a customer's perspective when they come to us and they are looking for something enterprise like and they want to deploy on multiple platforms. It is really compelling to have one code base that would work everywhere.

Let's look at the technical side of PhoneGap what exactly happens with PhoneGap? So I write an application with HTML 5, and JavaScript, what does PhoneGap do with that? What do I get out of it?

BRIAN: Well you build your app, and you just build a web app, and then you bundle it, in the different SDK platforms, so in the example of the iPhone SDK you have to download it, get XCode and then install PhoneGap; for Android it's the same kind of process and then you just run Build and your web app is running.

That means I get an iPhone application out of it?

BRIAN: Android app and a Blackberry app too.

And these applications can they be published in the app store? Is that legal?

BRIAN: Yes absolutely, there are a lot of apps in the app store that have been some misconceptions about PhoneGap early on that we are still getting over. But basically it boils down to re-naming your application to you actual application name instead of submitting an application that says PhoneGap. And you should be fine.

ROB: Technically what is going on is we are taking UI web view which is a chrome-less browser and we instantiate it when the application loads. Once it loads then it connects to check to see if there are any HTML documents, and it will start that process as well. And then shove them in just like a regular web page. If there is any JavaScript calls, that call the device specific stuff, it grabs that and creates a bridge between the two. And it happens on all three device, all three platforms.

You mentioned device specific features, what would that be?

BRIAN: Geo location is probably one of the most interesting ones that we had implemented quite quickly, and funny enough now it's in a lot of the mobile browsers, we have also got accelerometer support, and sound support, Vibration, contacts API, camera access, basically anything we think is going to be cool, we are going to work on, and anything that we have a need for at Nitobi for our client work that we are doing. What did I miss?

ROB: Also we are looking at other cool things too. I think file access comes to mind, sockets, we are also going to be doing some stuff there hopefully, maybe even Bondi there is some playing with that going on last couple of months.

BRIAN: Bondi is a spec for doing native device access but it hasn't been implemented anywhere so we are looking at adding that kind of spec to PhoneGap's capabilities.

A spec by the W3?

BRIAN: It's actually by a group called OTMP and I am not totally sure but there is a bunch of different large organizations of mobile carriers and vendors working on this spec together, and it's one of those funny things, it's a spec without an implementation. And we have got an implementation which is mirroring HTML 5 spec but it will be pretty easy for us to bolt this type of stuff on top of it.

What's the reason behind the spec? If it doesn't have an implementation why does it even exist?

BRIAN: It's a good question, I don't know, I guess to keep the mobile carrier vendors busy. I am not sure why you would do that.

But you make use of it.

BRIAN: Well, we are looking at it because a lot of people are asking us for it.

ROB: I have nothing to add to Bondi.

BRIAN: HTML 5 is a thing we care about the most, but it is something that we are looking at. You are the one that brought up Bondi.

When you say HTML 5 in my opinion it become reality in the last year with the iPhone and WebKit. What does HTML 5 include nowadays?

BRIAN: It is still a bit of a moving target. The main things that we are interested in right now are offline access, the HTML 5 cache manifest, geo location API, there's stuff that HTML 5 doesn't address like they are not thinking about things like phone vibration events, because they are not really working on that yet, but the W3C recently put together a working group called "The device API working group" which will be addressing these native device features in a more interesting way and so if anything I think that that could be the direction the web goes and this is something that PhoneGap can give people now.

So HTML 5 included or used to include video and audio tags? What's your view of that? Will that be in there, should it be in there?

BRIAN: I think it should be in there, I think the codec issues obviously are going to be a mine field, especially a legal mine field, that is something that has to be treaded through carefully, funny enough we have on the regular web the same sorts of problems, where a lot of video is served usually with Flash, and that is also sub-optimal in many ways. I am hoping that they will be able to ratify around some standards, in the meantime we are going to support video and audio on the phone to the best ability that we can with the technology available and in the case of iPhone that means QuickTime. I am not sure what you can do with Android actually. Do you know?

ROB: I think it's similar as well.

BRIAN: Yes, QuickTime. There is a rumor actually, I remember reading somewhere that Flash may be coming to Android so that could be something that we could wrap, but I don't think I would love that personally.

How would I write the video application with HTML 5? Would I just use the video tag? And you could emulate that in some way?

BRIAN: The video tag yes. And yes we can definitely go into the DOM and see if we can find it and then swap it up for sure.

And the same thing with the audio element, the audio tag?

BRIAN: Yes, is it audio tag or is it media and something weird? Media play sound. And we do implement that so we would probably leave it in the PhoneGap source because it is obviously useful. But again HTML 5 is a moving target so we'll just have to keep our eye on it.

At the moment you are targeting smart phones I suppose. Are you interested in moving to the desktop maybe with this in any way?

BRIAN: No, it's much better to have a really focused problem space especially for what we are trying to achieve and we see the future of the web is going to be mobile and it's going to be devices too, it's not necessarily phones, so Nintendo DS has a web browser there are rumors that PSP might soon have a phone, that is really cool tech. So I could see PhoneGap going into those kinds of directions but I doubt they will be going back into the desktop.

Is PhoneGap similar in a way to AIR? I mean AIR also brings HTML 5 to everyone?

BRIAN: Yes, totally. It has got a lot of analogy back to AIR and Titanium, and Titanium has a mobile implementation as well. Some people have also compared it to Prism or XULRunner or Fluid which are site-specific browsers that allow access the desktop. So it's pretty much the same idea except that it's chrome-less and it is running on your phone.

You mentioned a few alternatives like the Titanium. What are these? Could you go into details on these?

BRIAN: Yes sure. So one alternative is Titanium mobile which is done by the Appcelerator guys. It's actually really cool they have done amazing job documenting it and putting the code together really fast. Their approach is to take regular HTML, CSS and JavaScript and render a native UI controls, as opposed to just rendering the DOM, with CSS in the way that we normally would do. There are advantages and disadvantages of this: you are going to have a more native feeling app, but your cross platform compatibility is going to suffer. An iPhone app would look silly on an Android and a Palm app would look silly on an iPhone so there is definitely draw backs with this. Do you have more to add?

ROB: I think once you start developing your app and you need to make changes to the UI you are kind of locked into the API that is provided for you. Not everything is going to translate perfectly and when you want to start tinkering the first thing you do is view source and start modifying elements and attributes. And that is kind of taken away from your little bit. You have got to follow a little bit stricter adhesiveness to getting your app the way you want it to look. And then there may be limitations, I haven't played with it completely, it's pretty new, but that kind of comes to mind as a little bit of a learning curve there.

BRIAN: Yes, it's a possible trade-off. And the other thing with Titanium devices or Titanium mobile is only currently supporting iPhone and Android and I can't remember, is it GPL licensed? So PhoneGap is MIT licensed so you can take the code and you can do anything you want with it, but Titanium licensing isn't as permissive. And the other mobile app framework would be Rhodes which allows you to write embedded Ruby, ERB, to create apps and that is also a compelling choice. It's web-ish but you still calling Ruby so it's not really truly web-ish. And if you are familiar with Ruby this might be a good opportunity for you to check it out and get into mobile dev.

When you write an application with PhoneGap you mentioned operating systems specific GUI and look and feel. How do you write? Do you write it across platform? Can you write it to look native?

BRIAN: You can yes, so with WebKit, this isn't anything that PhoneGap is doing, but WebKit you have got CSS transitions, transforms and animations. And then you also got the ability to embed fonts, and really those are the two main things that are going to give you the ability to write an app that looks and behaves totally native. And that said if you write an app that looks and feels totally native, and it's for the iPhone it might look a little ridiculous on an Android device. And I think it's a case by case it's one of those "It depends" type of things. When you are developing a mobile app you are going to have a much smaller problem space that you are trying to solve and you are going to have to go boil it down to the simplest thing that could possibly work. And when you do that you might not need as many elements and UI controls as perhaps you would in a big desktop app. What we are seeing too is a lot of people will just add their own branding and theme into the UI control so in a case of maybe a sailing app might have all blue and it doesn't look like iPhone, doesn't look like Android. So you get that flexibility, with CSS.

You depend on WebKit I suppose for your work, or can you work with other browser components as well?

BRIAN: The iPhone currently only supports WebKit and ships with it and that is the only supported API path you can take, it is completely technically feasible to compile Gecko for example for the iPhone, but we don't have a lot of confidence that Apple is going to let that through the store, and what's the story on the other ones?

ROB: That is not entirely true. Our platform works right now with Blackberry and that doesn't work with WebKit at all. There is no plans that we are hearing from them that they are going to add WebKit. So no, it's not WebKit everywhere but it would be nice if it was.

BRIAN: It's web kit mostly everywhere but the problem you run into also is which WebKit are we talking about? So the Symbian S60 phones are using an old fork of WebKit, because you've got the iPhone which is as bleeding edge as it gets, WebKit on Android is actually somewhat crippled and they are using Gears, to achieve a lot of the HTML 5 stuff as opposed to using the native WebKit features, that you find on the iPhone. That is one of those pit falls that we are still trying to figure out how we are going to abstract away from the developers so they can just focus on writing their app. It's something to be aware of for sure.

At the moment are you programming towards some common feature set of HTML components that provide HTML 5 or how do you work around the differences between WebKit and what Blackberry is using?

ROB: That is definitely a good questions and it's a big boiler plate. We don't look at it so much from an HTML 5 forward we are looking at it from the devices specifically what they can do and then try to bring that back into HTML 5. So for example we look at the accelerometer, geo location, camera support, contact support, we were trying to find the eighty percent of features that are on the phones and that would appeal to the largest audience. So of course it's going to be a lot of things that are niche edged that won't appeal to some of the developers.

BRIAN: It all depends on the app you are writing too, so a lot of our development on PhoneGap is driven by our own needs and our own clients' needs. So geo location was an early big win to have that on the phone, but contacts support has taken forever pretty much because it just wasn't a need for us early on.

When I use PhoneGap to deploy the app or to build the app, what exactly do I get out? What stays in the application files? Do the HTML files stay in? Do you do something funky with them or anything like that?

BRIAN: It's a case by case for every platform but essentially we generate the executable for every platform, and then it is up to the end developer to take care of deployment. We definitely want to make those areas easier for them. Right now it will just take your CSS, HTML and JavaScript and wrap it up in a binary and you are off to the races.

ROB: Just to add to that: we are not doing anything fancy at all. The HTML you write is the HTML that is really delivered to the phone and rendered on the UIWebView specifically for the iPhone and it's the same for Android. It's not changed, it's not modified, we don't rearrange it or anything like that. It is as you have written it.

BRIAN: It's up to the developer to write a decent app.

It was actually on iPhone that you installed a kind of URL handler a call back that WebKit calls? Is that true or is that different?

BRIAN: That is basically what it is doing yes we are interpreting a handler but we have wrapped it with JavaScript which we then inject into the DOM of the UIWebView that's running PhoneGap so all of it's transparent to the end developer, so they don't have to like C or anything that is internal, just write in pure JavaScript.

And the HTML and JavaScript they write the APIs are available in some kind of HTML spec, or W3C or devices spec? Could we maybe talk about the devices spec, what is it about?

BRIAN: Yes. So W3C Device API working group I think is a month old right now, there hasn't even been a first meeting, but the group is going to be gathering the next couple of weeks, all the major platforms, all the major telcos and all the major phone manufacturers are on board. And they are looking to specs like Bondi, W3C widget API, and kind of consolidating that into this device API working group. We are really excited about that, we think it's going to be probably the future of the web, so that is cool stuff. But it's new.

How does PhoneGap bridge the gap between the difference in the devices and what do you do with the HTML interface, the JavaScript interface?

ROB: With your web application if you were to just take it and not bundle it up, and compile it, it wouldn't work on the web. You could view it, it wouldn't self destruct but obviously because there is no device bridge available it is not going to work. Only where it is built into the native HTML spec and it works already in the browser. But that is not the case yet with all the features. So what we do is when you call a PhoneGap specific command, it's treated almost like a URL, and it is passed through the URL query string with using a special schema, and PhoneGap picks it up interprets it to the appropriate command. It usually gets mapped to an object and method in Objective-C or C.

BRIAN: Or basic JavaScript.

ROB: Absolutely. So the bridge happens through the URL, for the iPhone and we natively bind all of the Java objects for the Android and surprisingly everything goes through the cookie handler. It's a huge hack, it works great.

You mentioned something about the caching manifest in HTML 5. Maybe you can talk about that?

BRIAN: Yes sure, the cache manifest is just another attribute that you add to your HTML document, which points to a file of your naming which is the cache manifest. You basically give it URLs to static assets and it will cache them on the phone. I don't know what the upper limit is for how many assets you can cache on WebKit, but it is usually a good practice, to just load a shell page that will then go off and see if it is online or not it will go off the web it will grab its resources, it will pull them down and then it will rehydrate on the spot. It allows you to do offline apps but also allow you to do self updating apps which is pretty fantastic.

It will be self updating because the manifest is some kind of...?

ROB: Yes you could change the manifest or you could have the skeleton app be quite dumb and all it does is go off to the web and grab some JavaScript, chuck it in the local SQL store, eval it and next time it loads it checks if there is a new version. Still really new territory the only people I know that are doing this right now are Gmail mobile.

So that works mostly on the latest iPhones and Android? Basically you have been building applications for your own company with PhoneGap. Are there other people, are there example applications that you could mention?

BRIAN: There is one really cool one, I think and it's not super compelling use of PhoneGap but it's just super well executable BlockBuster and it uses the accelerometer and it's kind of like a Tetris game, and you tell your phone you are basically taking out chunks of blocks and touch events and it is all built in PhoneGap it's quite cool. What else is there Rob?

ROB: There's tons, hundreds arguably. Another really neat one is a card that'll show, an app that would show all your cards in your wallet and you can thumb through them even on the bar codes so you can have save and more card and people have them scan it. It is kind of cool. But there are quite a few we have got a gallery on our website, showcasing a lot of them.

And these are 3rd party apps essentially?

BRIAN: Yes, we didn't build any of those.

What other APIs or frameworks have you added to PhoneGap that users can use?

BRIAN: Right. In the course of developing PhoneGap we have found doing mobile apps development very difficult. It's a lot of work and the hardest part about it is doing JavaScript development because we are used to having nice frameworks like JQuery, Prototype or Mootools or YUI whatever, to help us do our development faster, and all these frameworks,while they're great they don't work so well on mobile because they have huge footprint and the phone just doesn't have the space to store and interpret that much JavaScript. We looked at it and we thought let's see how we can fix this problem, initially we wanted to just hack up JQuery and just use that because that's what we like the most, but getting JQuery to be mobile friendly was proving to be way more difficult than we'd hoped so we created a framework from scratch which is XUI it's inspired by JQuery syntax, it's only 2k as opposed to 40k which leaves you plenty of room to write your own applications. You can find it at XUIjs.com. Do you have anything to add about XUI since you wrote it?

ROB: So specifically we only have about 25k available on the phone after that 25k is used, everything else gets written to disc and that's a lot slower retrieving information and processing it, it goes outside the buffer, and there is not enough resource available to handle it. So the goal of XUI was to keep it within that and then some it's roughly 6k uncompressed we got it down to 2k. It's pretty sweet and it handles anything, it's got XHR, it's got animation, it's got full CSS, full DOM support, just about everything that you would probably use in JQuery. And the reason we were able to get it so small is because we are really only targeting WebKit specifically right now and taking out all the other browser support, related, nuances, that kind of stuff. There are other mobile frameworks, Dojo has got a mobile one, it's exactly 25k from what I understand compressed.