Using Phonegap for Native Application development [closed]

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 usingThe 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/libraryThere 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.