Saturday, January 15, 2011

Tips for mobile development using PhoneGap

I've used PhoneGap for some time. It's a nice open source Framework for building cross-platform mobile applications. You can build applications in HTML and JavaScript and still use platform specific features such as Location Services, Address Book, Notification Services and so on. It works for iOS, Android, Palm, Symbian and Blackberry.
I've used it only for iOS (iPhone and iPad) and generally everything worked fine. There are some problems though.
For iPad applications, if you want to refresh a large portion of the screen, there are some performance issues. Using CSS3, which is hardware accelerated, helps a lot, but still there is a significant difference between HTML and native. So stick with Apple recommendations and do not change large portions of the screen.
For iPhone applications the problem I had was that opening a new window with HTML content. I've tried using an iFrame for this, but then the links inside the HTML may be targeted to the top window and if the user clicks on such links the new page will take all the screen, including the navigation bar for instance. So the user is not able to go back to the application. If the iFrame is named "_top" than this particular problem is partially solved, because the links will be targeted to the iFrame. But then some links may be targeted "_parent" for instance, so this doesn't work.
There is a nice plugin for PhoneGap called ChildBrowser for opening URLs in a new WebUI. This solved the problem and all the links are working fine.
For UI layout I used jQTouch and jQuery Mobile, both open source. jQTouch is simple yet good enough for simple applications. It offers native WebKit animations, image preloading, callback events and so on.
jQuery Mobile is a cross plaform framework based un jQuery, very powerful yet somewhat not obvious to skin and to adapt the applications not using a standard navigation.
There is another framework now free, called Sencha Touch. I didn't use it yet but it seems promising.
We have Today a lot of devices, using a lot of screen resolutions and pixel density, so I now plan on building resolution independent UIs. Here is a nice article explaing how to achieve this: http://www.sencha.com/blog/2010/08/23/resolution-independent-mobile-ui/