Developing Native Looking iOS Apps with HTML, Backbone.js, and PhoneGap

---

Crafting Native Looking iOS Apps with HTML, Backbone.js, and PhoneGap

by Christophe Coenraets on March 28, 2012 in Backbone.js, iOS, iPhone, PhoneGap

If you just want to try the application in your browser, click here. The data is based on Dwight’s originalorg chart :)

I’ve been blogging a lot about Backbone.js recently. Backbone.js is a lightweight architectural framework that brings structure to your Web applications. Backbone is not, however, a user interface framework that helps you with the way your application looks.

So, where do you turn to for help when you need to make your application look good? 

For traditional web apps (delivered through a browser), Twitter Bootstrap can help (read here). But what about Mobile apps? I explored Backbone.js + jQuery Mobile here. Depending on what you are looking for, it may or may not be the right solution: jQM provides mobile skins, but they don’t look native. It’s also more of a full stack framework than a lightweight UI toolkit that you can easily layer on top of your app.

The alternative to using an existing UI toolkit is to roll your own styles to make your application look and behave like a native app. Sounds easy enough, but when you consider all the details and want to achieve “pixel perfection”, it becomes a daunting task.

As I was getting ready to tackle the challenge, and build a new native looking version of my Employee Directory app, I came across this great blog post by Chee Aun where he documents the process he went through to build his own Hacker News mobile app. His post is a real gem, and I ended up reusing a lot of the Hacker News app styles.

Compared to the Hacker News app, the Employee Directory page flow is more random. Here are a few examples:

1. SearchPage -> EmployeePage -> ReportsPage -> EmployeePage -> …
2. SearchPage -> EmployeePage -> EmployeePage (manager) -> Reports -> …
3. SearchPage -> EmployeePage -> EmployeePage (manager) -> EmployeePage (manager’s manager) -> …

As you can see, the page flow includes “same page transitions”, when the user navigates from one employee to his/her manager. To accommodate the Employee Directory page flow requirements, my Backbone.js infrastructure creates and destroys pages as needed with the appropriate slide-in/slide-out transitions. The implementation of these transitions was inspired by Wesley Hales’ article.

PhoneGap

Even though you can run this application in a browser (here), I built it with the intention of packaging it as a native app with PhoneGap so that you could start it like any other app from your iPhone home screen. If you are not familiar with PhoneGap, I’ll provide more details on packaging this app as a native app in my next post.

Source Code

I updated the backbone-directory GitHub repository to include this version: It is available in the iphonedirectory.

---
copied from: http://coenraets.org/blog/2012/03/crafting-native-looking-ios-apps-with-html-backbone-js-and-phonegap/
---