Before a while I have started with my Start-Ups mobile clients and was attracted by the “write once, run everywhere” thought of Phonegap. They also offer a build service which will make 5 apps for different platforms like Android, Blackberry or iPhone for you. Phonegap is plain JavaScript/HTML. And another cool thing, it can be combined with jQuery mobile. I wanted to use that, because I already knew jQuery. Now my apps are nearly finished. Time to recall some pretty nasty things I have struggled with.
While some stuff is pretty similar, jQuery mobile is a new framework you need to learn. It can give you some good hell if you don’t. Stop thinking as “just an API extension to jQuery”. The mobile code will enhance your components, like the well known bytecode enhancing in the java world. You should understand what that means, otherwise you get some trouble.
jQuery mobile is pretty nice. You can create several divs in your HTML page, giving them the data-role “page”. These are your pages. You can simply change pages when calling:
$.mobile.changePage("#mainmenu");If you update your lists, you should refresh them afterwards:
$('#myList').listview('refresh');Otherwise your elements are not visible. If you add some buttons to your page or do other stuff which are not releated to ul lists, you even might need to re-create the whole page:
$('#page').page('destroy').page();Don’t forget to destroy it before, as I did it, otherwise you go straight to hell.
If you think this is pain: you should know about the vclick event, which replaces somehow the click event of standard jQuery. In addition I can only recommend to learn what the .live function does:
$('.delete').live("vclick", delete);Some binding need to be done earlier than others. You can bind at the “mobileinit” event of jQuery mobile. do it if you want to initialize your pages before entering them.
As you can see, there is some stuff you really need to know, which is not documented properly. Also the look & feel of jQuery mobile is different on the Android emulator than on the iPhone simulator. A little only, but it is. And after all, as of today I have struggled for many hours with an AJAX problem on Android. So, you cannot rely that every function of phonegap or jQuery mobile is behaving the same.
As of the time of this writing, I simply could not fully understand which event is fired and when. I am talking about the “deviceready” event, which should be fired when - surprise - the device is ready to work with. Meanwhile I have deleted it. I simply could not catch it. I have tried the example from the docs (GONE: http://docs.phonegap.com/phonegap_network_network.md.html).
This line will only work on the Android emulator, but not on the iPhone simulator:
document.addEventListener("deviceready", onDeviceReady, false);Not sure why. Phonegap is a bit of a blackbox for me at the moment. It gives you some good starting points for your project, but somewhere in the middle, you cannot say what is going on.
I took a good while until i recognized that you need to call http://10.0.2.2 and not http://localhost if you want to send a request to your working machine (the machine, which runs the emulator).There is no documentation, just a bug somewhere in the Android project.
This behavior is documented, but I did find it via the bug report. If you read this and if you are curious why your Ajax request does not arrive on your web-server, well, change the URL to 10.0.2.2.
And of course, you need to write a manifest file for android, giving it all permissions you can get. It has been said somewhere that you’ll need all permissions to make it work. So far I cannot agree to that, it works for me with just the internet enabled (I only need that one).
After all you will see the painful slow Android emulator. At one time I had 25 minutes boot time before I cancelled. You can solve this issue with setting your emulator to a low resolution (320x480). I cannot launch from Snapshot, because it will break the startup. Others have said this helps with startup time. When I first saw this low-speed beast, I really was not impressed. The iPhone Simulator is so much better. I remembered the old times when I tried to load a text adventure from tape into my C64. This is real pain.
What you’ll get, once it is running, is a pretty good error console.
BUT at the time of this writing - not all my AJAX requests are fired, even when they should. So far I cannot login with a specific user, with another I can. And then I see completely outdated sets of data. Not sure why. On the iPhone it works pretty well.
And no, the Android animations are slow and ugly. You can even see the .destroy calls of a page.
I am really disappointed of the Android emulator, I need to say it.
The iPhone start logging later than Android, or never. Sometimes I get log messages, sometimes not. Don’t think about using Xcode for JavaScript development. The code formatter is drunken. But I have to admit, the iPhone simulator (compared to the Android one) is a quick beast and joy to work with.
What really bugs me is that I need to pay 99$ a year just to develop on the apple device. I mean what’s going on guys! Developing and deploying to a test device should be free of charge.
My Android app is still not usable. Phonegap/jQuery Mobile is not really platform independent. It is more “write once, debug everywhere” (I heard this about Java in old times).
I am still not sure what I do now, but it seems to me I will start the 0.1 version of my SaaS tool with iPhone first. At the moment my feeling says that I should not invest more money in Phonegap/jQuery mobile but start to develop a native app for Android. Of course the whole benefits of Phonegap/jquery mobile are gone then. But I really cannot give that to my customers.
So cool html/javascript development on mobile is, it is future. Phonegap needs to be 100% platform independent. jQuery mobile and Phonegap need much better docs. Both frameworks need some more cycles to be really good.