When you start a PhoneGap based project, there are still a lot of technological choice to be done. Do I want my project to be fully HTML based? Do I need an MVC framework? A user interface toolkit? etc.
First I’ll suggest a list of toolkits and library that I like to use in my PhoneGap projects, the choice of which depends on the specific needs of your application. Later, we’ll consider the pros and cons of an hybrid solution.
Touch-Optimized Web Framework for Smartphones & Tablets
It’s extremely complete, but sometime feels too heavy. It’s especially tricky to use with another MVC framework, since JQueryMobile prefers to be in total control of your application.
A Zepto/jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.
Much more Lightweight, it’s main goal being to provide a few widgets and some additional input methods optimized for touch devices.
Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Clean but much more web looking. What I love about it is that you can just use the CSS class that you need, and chose a dedicated MVC framework for the architecture of your app.
Gives structure to web applications
But why only web applications? This framework works very well within PhoneGap and allows for a cleaner software architecture.
HTML enhanced for web apps
Another very valid option, that turns your HTML into dynamic templates.
Behavior-driven development framework
Full featured and easy to use. Even greater when associated with coffeescript.
Powerful, easy-to-use unit testing framework
Used by jQuery, jQuery UI and jQuery Mobile project. Probably the best choice if you use either of those.
Extends CSS with dynamic behavior such as variables, mixins, operations and functions.
I cannot live without it, it fixes most of the flaws of CSS.
Let you build semantic templates effectively with no frustration
Following the idea that your templates should stay as dumb as possible, handlebars forces you to write the intelligence outside of the template, and that is a GOOD thing!
Detect errors early, that’s a must too.
Polyfill to remove click delays on browsers with touch UIs
NEVER develop a PhoneGap app without this (or a similar) library. If you want your app to feel native, you HAVE to get rid of the 300ms delay.
When HTML Is Not Enough
You have to be aware that PhoneGap is not only meant to be used in a purely HTML-based app. You can create PhoneGap sub-views in your native app. It makes a lot of sense: this is how you’ll get an app that uses the minimal amount of nativeness but feel totally native.
There is so much more of those tools you will have to know about if you want your app to look and feel clean and polished, but I guess this is a good getting-started list. Do you have any other favorites?