10 Libraries You Should Use In Your PhoneGap Project

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.

User Interface

JQueryMobile

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.

http://jquerymobile.com/

JQTouch

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.

http://jqtjs.com/

Bootstrap

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.

http://getbootstrap.com/

MVC Frameworks

Backbone

Gives structure to web applications

But why only web applications? This framework works very well within PhoneGap and allows for a cleaner software architecture.
http://backbonejs.org/

AngularJS

HTML enhanced for web apps

Another very valid option, that turns your HTML into dynamic templates.
http://angularjs.org/

Testing

JasmineJS

Behavior-driven development framework

Full featured and easy to use. Even greater when associated with coffeescript.

http://pivotal.github.io/jasmine/

QUnit

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.

http://qunitjs.com/

Other Favorites

LessCSS

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.

http://lesscss.org/

HandleBars

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!
http://handlebarsjs.com/

JSHint

A tool that helps to detect errors and potential problems in your JavaScript code.

Detect errors early, that’s a must too.
http://www.jshint.com/

FastClick

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.
https://github.com/ftlabs/fastclick

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.

More?

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?

I’m a consultant and developer for Mobile, Web, Games and Apps projects. I co-founded Fovea 6 years ago.

Tagged with: ,
Posted in Blog
2 comments on “10 Libraries You Should Use In Your PhoneGap Project
  1. Good list!
    I think it fits the part of User Interface, we are developing a project called FastGap (https://github.com/GustavoCostaW/FastGap) is in beta, but very advanced …

  2. fabian says:

    Very nice list! thanks for sharing =)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>