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

If you just want to try the application in your browser, click here. The data is based on Dwight’s original org 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 iphone directory.


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

  1. Davy March 28, 2012 at 6:54 pm #

    Great tutorials !

    Downloaded one of your samples to quick-start PhoneGap and was immediately confronted with the issue (the master / detail solution is implemented by passing an id query param in the detail page. This is failing on Honeycomb / ICS devices. (Works fine on < Android 3.0).

    The issue is described here : http://code.google.com/p/android/issues/detail?id=17535 .

    • David March 29, 2012 at 10:38 pm #

      Christophe
      You really need to check out the Sencha Touch 2.0 libraries, they’re much better than anything I’ve seen , far superior to jQuery Mobile. And, it’s as MVC as you’ll find using JavaScript.

      And, you’ll see many similarities to the Flex model.

  2. Alessandro April 4, 2012 at 1:07 am #

    Great work! Congratulations.
    It would be very nice if the App had local storage but also was able to check the server for an update version of data (mysql db)…maybe on next version?!

    Thank you
    Ale ;)

  3. Mickey April 6, 2012 at 3:56 pm #

    Thanks so much! I have been searching for this kind of samples for a long time!

  4. Juri April 10, 2012 at 6:38 am #

    Did you try using Bootstrap for mobile/tablets as well??

    ‘Cause we’re currently using JavaScriptMVC and would like to create apps with Bootstrap for desktop browsers but also for tablets and mobiles (as with the v2.0 it also includes responsive design) with the option of compiling them with PhoneGap.

    Do you have any experiences with that already? Might Bootstrap fit the needs of mobile apps (with some customization)?

    Thx

  5. James Wards April 25, 2012 at 1:00 am #

    Hi, I tried to view this site on an iPhone and also on Android device. The page shows up fine and also the transition from page to page are also fine but you cannot do vertical scroll on the employee lists. Thus I can only view the top portion of the list that the screen can fit and the rest is not visible. What is the solution to this problem. Thanks.

  6. Jim May 14, 2012 at 4:54 pm #

    Christophe,

    Awesome blog! I tried this app and compared it to the jQuery Mobile version that you published just before and found that the jQM app just felt sluggish and did not animate page transitions nearly as well as this version. I’m not as concerned about “pixel perfection” or slavishly copying the iOS motif, so the jQM approach appeals to me as it offers the potential for better cross platform deployment. Do you have any thoughts as to why this version of your employee app feels so much more snappy than the other? Is it that the jQM framework is inherently slower due to it’s design goal of running everywhere?

    Thanks,
    Jim

    • Jim May 14, 2012 at 6:02 pm #

      I just re-read the Chee-Aun and Wesley Hales articles that you linked to, and I guess those pretty much answer my question. Thanks.

  7. Harish kumar May 15, 2012 at 12:37 pm #

    Hi,
    I used your iphone application and when i hosted it on my server to run it from my iphone mobile ,
    when i open the 1st search page and search for “K” it shows me 2 records when i delete the “K” from search box then it shows me more then 10 records on my phone but after that to see the last record the when i try to scroll the page down the Page scroll is not working ,
    Is this any kind of bug in your application? because i am not able to scroll down to see the last record.

    • Harish kumar May 15, 2012 at 12:51 pm #

      Sorry For my last post,
      I am using the Android phone’s inbuild browser ,
      I my iphone the “APPLICATION IS WORKING FINE” :) , but in my android the page scrolling is not working , May you tell me the problem why your iphone app is not working properly on android device.
      Thanks

  8. Jônatan Fróes June 26, 2012 at 4:51 pm #

    I bought and Android app based in your tutorial. Check it – https://play.google.com/store/apps/details?id=com.guialins.android

  9. sohbet odalari December 21, 2012 at 12:11 am #

    very blog god

  10. Samual February 27, 2013 at 12:17 am #

    “Crafting Native Looking iOS Apps with HTML, Backbone.

    js, and PhoneGap | Christophe Coenraets” lordmichaelhunt ended up being a very good post and also I personally ended up being quite
    happy to read it. Thanks for your time,Bernard

  11. mjmp.in June 27, 2013 at 6:30 am #

    You ought to take part in a contest for one of the best sites online.
    I am going to recommend this site!

  12. Gogo June 29, 2013 at 7:04 am #

    I was searching the internet and phonegap I think is the best solution for this. I found out http://www.chillgeeks.com/2013/06/develop-ios-android-and-windows-applications-using-html-part-1.html article very ellaborative

    • Peter August 28, 2013 at 4:40 pm #

      Yeah,thanks GOGO, that article is superb

  13. Pratik Tarifler July 25, 2013 at 9:10 am #

    I have been searching this for a long time.

Trackbacks/Pingbacks

  1. Building Mobile Apps with HTML and a Local Database - April 11, 2012

    [...] my recent post, Crafting Native Looking iOS Apps with HTML, a number of you have asked for an offline version that would use a Local Database (instead of the [...]

  2. Employee Directory is now available on the App Store | Christophe Coenraets - November 16, 2012

    [...] The styling and skinning of the application is documented in another post: Crafting Native Looking iOS Apps with HTML, Backbone.js, and PhoneGap. [...]

  3. Wi Fi Horizon, use copoun inside - February 25, 2013

    [...] Your Price: $119.00- Kindle Paperwhite, 6 World’s most advanced e-reader – high resolution, high contrast touchscreen with built-in light and up to 8-week battery life, even with the light on at setting 10. Details: http://coenraets.org/blog/2012/03/crafting-native-looking-ios-apps-with-html-backbone-js-and-phonega… [...]

Leave a Reply

css.php