Using Phonegap for Native Application development

I recently came across Phonegap. Have anyone of you tried it. Its an incredible tool which claims that developers can use HTML 5 based framework like Sencha touch and Jquery at the same time having access to native features on phone. Also the code is portable from Android to Iphone with some effort. Before I plunge into it I want to know what is forum's experience with Phonegap. What are the pain points and is it really scalable for enterprise level application development.

I've built a couple of applications using PhoneGap, and for what it provides, it's great. There are a couple of quick notes I would like to point out, which might help you.

Disable device-based features you're not using The accelerometer, geolocation features are by default turned on. If you're not using them, I would turn them off, as your app will load faster (initialize) and run smoother.

onDeviceReady - This is the method that's called once phonegap has loaded and is ready. $(document).ready or whatever you're used to, doesn't really apply here - unless you're only doing interface/hard-coded HTML stuff. If you're interacting with iPhone features, like GeoLocation, you will need to do everything after onDeviceReady has been called.

Pick a UI/library There are a ton of options for the interface/libraries, jquery-mobile, sencha touch, jqtouch, etc.. These each offer a unique approach, and feature-set. Do some research and use one, but avoid combining. You can read about some more options, tools here: http://www.phonegap.com/tool (link updated)

Also, more on just mobile development in general, with PhoneGap If you're looking to build apps, that are distributed through the Android market and iPhone App Store, I would read through their exhaustive lists for guidelines on how to develop your app. For example, in the tools link above, there is a "tool/plugin" called Easy APNS - while this is useful for Android - and technically doable on the iPhone, it violates the development agreement, as it states you must use the Apple notification network, etc.. This is just an example, but reading up on that stuff will save you a lot of headaches, if that's your end goal.

All in all, it's great for lightweight apps, especially if you come from a web development background. LocalStorage, GeoLocation, etc.. works really well. I hope this helps a little... and feel to ask questions.

Additional Edit:

I really think it comes down to what you want to do, and what you know how to do. Matt pointed out that developing native apps, for iOS is better, etc.. Yeah, if you have the time and knowledge to learn that - of course native will be better. But PhoneGap is made for web developers that can take their existing skillset and build apps. Also, PhoneGap allows you to build apps quickly, for iOS, Android, Symbian, Palm, Blackberry. With minor adjustments to your codebase for each.

Here are all the best Performance guides I've read for PhoneGap... there is alot to be wary of to ensure you have solid, stable performance... but you can pick it all up in just one evening of reading.

Here are the best nuggets:

PhoneGap/Mobile Web Performance Tips

• How Diary.com increased the performance of their PhoneGap app running Sencha: http://www.phonegap.com/2011/06/21/building-the-diary-com-ios-app-using-pg-sencha-touch/

• http://floatlearning.com/2011/03/developing-better-phonegap-apps/

• http://jslint.com/ - to debug your javascript

• http://zeptojs.com/ and http://xuijs.com/ - minimal alternative frameworks to jquery and jqtouch

• Disable the accelerometer and location http://blogs.nitobi.com/jesse/2009/10/28/running-jqtouch-in-phonegap/

  • set “EnableAcceleration” to false in PhoneGap.plist
  • set "AutoRotate" to false in PhoneGap.plist

• http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/

• http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone

• Demo: http://cubiq.org/dropbox/clickdelay.html

• FastClick v TouchStart: http://groups.google.com/group/phonegap/browse_thread/thread/f5f5c78e26513821?pli=1

• http://forum.jquery.com/topic/ontouch-instead-of-onclick-event

• http://wiki.phonegap.com/w/page/16494809/Performance-tips-for-device/

• http://www.developer.nokia.com/Community/Wiki/JavaScript_Performance_Best_Practices

• http://evolvingwe.com/building-an-iphone-app-part-3-7-dev-tips/

• http://evolvingwe.com/upgrading-to-phonegap1-0/

• VIDEO Performance Tips for Sencha Touch: http://vimeo.com/17882927

  • It covers performance features in Sencha, which are great principles we can reapply. We may even be able to cut code from certain pieces of Sencha to reapply for Skej.
  • It states that we MUST destroy anything that is not visible on the DOM. And that the DOM must be kept as small as possible at all times, with as few listeners as possible. (I.e attach one listener to the parent item of a list, rather than to each list item.)
  • It also has practical CSS3 tips for me to apply... Basically, dont use many of the new transitions and shadows/round corners because the currently use CPU, and not yet GPU.

• Event Delegation in Sencha Touch: How to design lists with a single listener, and not one on every line. http://www.sencha.com/blog/event-delegation-in-sencha-touch/

• Optimizing DOM Memory Usage in Sencha Touch: Sliding from a List to a Details panel and killing the list, and then sliding from Details to a List and killing the details panel. Minimizing elements on your screen, your DOM. http://www.sencha.com/blog/sencha-touch-optimizing-memory-usage/

• DESTROY ANYTHING THAT IS NOT VISIBLE ON YOUR DOM!

• Use CSS Animations instead of jQuery

• http://nyroo.com/l/B7UN5c

• http://www.ferretarmy.com/css-animation-examples/

  • Be careful... these are tricky when they don't leverage the GPU, and bog down the CPU.

Enabling New Functions

• Enable Retina Display: http://evolvingwe.com/create-retina-display-images-in-mobile-web-themes-and-phonegap-apps/
• Swipe to delete: http://www.codesta.com/blog/2011/5/23/sencha-touchphonegap-tips-and-tricks.html
• Disable accelerometer and location: http://iamcam.wordpress.com/2009/10/29/phonegap-up-to-speed/
• Cut jQuery and Hand-code: http://cubiq.org/do-you-really-need-jquery-for-mobile-dev
• Display Contact List in Mobile Safari: http://cubiq.org/contact-list-on-webkit-for-iphone
• iScroll4: Create a header, scroll within a fixed size div, pinch and zoom, pull up/down refresh. http://cubiq.org/iscroll-4 (Includes tips on rubber-band effect.)
• PhoneGap's GitHub repo: Includes interesting examples like DatePicker, SMSComposer, ApplicationPreferences, Splashscreen, NetworkActivityIndicator... https://github.com/phonegap/phonegap-plugins

Architecture

Architecting your App in Ext JS 4: http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2

Before expressing my opinion of Phonegap, I need to issue a little disclaimer saying that I am, by no means, a web developer. For me, writing JavaScript and CSS is like pulling teeth. That said, I don't like Phonegap.

There are a few very appealing aspects of the framework, mainly the "Write-Once-Run-Anywere" appeal and the "I-Don't-Have-To-Learn-Objective-C?" appeal. The framework can even give you access to some of the hardware features like the accelerometer. All of these are valid, to a certain extent.

That said, none of the great iOS apps are built using any kind of cross platform framework. There are so many subtle and elegant UI interactions that are handled for you by the native UIKit controls that many users and developers take for granted until they're missing, like the slew of incredibly detailed view animation curves and scrolling bounces that aren't there in the web-view based UI. You could toil to reproduce them perfectly, but for that time investment, why not just go native?

A second point to note is that the support community for Phonegap-built iOS applications is drastically smaller than natively developed applications. If you're one to rely on the community during projects, this should also give you pause.

In the end it comes down to the quality of experience you want to deliver. The upper bound is lower with Phonegap. If you're ready to accept a less-than-excellent user experience in exchange for reduced development times and increased portability, than it is a very viable framework.

As subtext for any who are interested, Marco Arment and Dan Benjamin recently discussed this topic. You can listen to it here.

The installation procedure involves a number of packages (Java, Apache Ant, Ruby, iOS SDK, Android SDK and PhoneGap itself), which all have to be correctly installed and set up. This can be a major effort. To be fair, they have something called PhoneGap Build in beta that should make this much easier.

We use it with NS Basic/App Studio to produce apps which qualify for app stores.

if your are not making a game nor widget, just plain nice-looking app then phonegap is your choice.

But you should take care with your JS, avoid doing anything in JS for example if you want to do any animation avoid setting a timer with small intervals (eg. 100 ms), avoid jquery and alike animations. For example instead of animating fade by setting a short-period timer decreasing opacity at each point step by step (this is how jquery fade work), you should use css3 transitions from opacity 1 to opacity 0.

My advice is to go with something like zeptojs.com, after all phonegap won't run ie6 :-)

Check some tutorial on how to make your JS more light

http://bcksp.blogspot.com/

If you don't need any of the hardware features or performance beyond what HTML5 and Phonegap provide, an encapsulated web app (plus some limited access to other features) is a great solution.

Many enterprises deploy large scale web apps. Phonegap (or just a plain web view control with embedded content) will allow you to run these web apps offline (except, of course, for any online data required).

One "pain" not mentioned when deploying among several different devices: The more devices, the greater the learning curve. To deploy to iOS devices with PhoneGap, you'll need to learn the basics of Xcode on a Mac. To deploy to Android, you'll need to install and learn Eclipse, the Android SDK, etc. The other platforms demand their own SDKs be used. Learning some rudimentary Xcode, Javascript, and Java helps me to understand errors and general syntax.

"Create once, deploy everywhere" leaves out a LOT of steps!