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.


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.

  • 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 : .

    • David

      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.

  • Alessandro

    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 ;)

  • Mickey

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

  • 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)?


  • Pingback: Building Mobile Apps with HTML and a Local Database()

  • James Wards

    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.

  • Jim


    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?


    • Jim

      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.

    • ali khan

      Ifyou really feel.Your comfortable area need to take from many dependencies, such as how excellent are you aware of e-commerce, the period of your energy and effort are you currently doing company with this company.affair sites

  • Harish kumar

    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

      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.

  • I bought and Android app based in your tutorial. Check it –

  • Pingback: Employee Directory is now available on the App Store | Christophe Coenraets()

  • very blog god

  • Pingback: Wi Fi Horizon, use copoun inside()

  • “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

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

  • Gogo

    I was searching the internet and phonegap I think is the best solution for this. I found out article very ellaborative

    • Peter

      Yeah,thanks GOGO, that article is superb

  • I have been searching this for a long time.

  • You can certainly see your enthusiasm in the work you write.
    The arena hopes for more passionate writers like you who are
    not afraid to mention how they believe. At all times go after your

  • I go to see each day some websites and sites to read posts, but this
    blog presents quality based articles.

  • Pingback: Building Mobile Apps with HTML and a Local Database | Sochinda's Blog()

  • When someone writes an paragraph he/she retains the plan of a user in his/her mind that how a user can understand it.
    Thus that’s why this paragraph is perfect. Thanks!

  • Hey there would you mind stating which blog platform you’re working
    with? I’m planning to start my own blog in the near future but I’m having a hard
    time deciding between BlogEngine/Wordpress/B2evolution and Drupal.

    The reason I ask is because your design seems different then most blogs
    and I’m looking for something unique. P.S Apologies for getting off-topic but I had to ask!

  • These are genuinely great ideas in on the topic of blogging.

    You have touchwd some good things here. Any way keep uup wrinting.

  • Hi, I do think this is a great site. I stumbledupon it ;) I am going to come back once again since I saved
    as a favorite it. Money and freedom is the best way to change,
    may you be rich and continue to guide others.

  • Heya are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and set up my own. Do you require any coding knowledge to make your own blog?

    Any help would be greatly appreciated!

  • Thank you for the auspicious writeup. It iin fact was a amusement
    account it. Look advanced to far added agreeable fom you!

    However, how can we communicate?

  • robert

    The solutions provided by efficient Seo ensure that all the perform of seo being done is efficient and is concentrated on the outcomes of cost-effective seo only. see post

  • Robert

    Auto writing a blog application gets to out onto the Internet and discovers content and video clips that can be lawfully duplicated and which match the search phrases relevant to your market. serruriers

  • ali khan

    This SEO organizations are basically of a few significant types. These will be the international SEO’s along with the local SEO’s depend upon the strategy that’s needed is by the web page being enhanced.

  • ali khan

    The local SEO or else the local online seo makes it possible for in concentrating of the local google to divert their look for for the web page. Exhibition Design In Mumbai

  • Danielgrant

    Agencies when selected should be a unusual gem, so that it helps in enhancing your positions and getting more visibility for their web page. SEO companies always used them for several tasks that can really advantage your web company. visit us

  • Formalarımızda kullandığımız kumaş; birinci sınıf mikro-interlok olup; esnek-fit, anti-bakteriyel, termo-balans ve hemen kuruma özelliğine sahiptir. Futbol maçlarınızda size hareket özgürlüğü sunan bu formalar; günlük olarak giyilebilecek kadar şık tasarlanmıştır. Forma Modellerimiz özel dikim ve Dijital baskılı olarak iki tür üretilmektedir.

  • Excellent article on Backbone.js and on iOs App . Thanks for sharing it It will really help the designers who are into the business of developing IOS APP

  • Exhibition Stand Designer

    Great article!! Sharing this with my developer team for their benifit.

  • Pratik Dharamshi

    Thanks for sharing

  • rohan more

    Thank You for sharing information on it was very helpful on Stall design

  • Vinayak Nambiar

    Thank you for sharing the information really liked it by Best Exhibition Company

  • Vinayak Nambiar

    learn more about our site in Best Exhibition Company

  • Thank You So Much For Sharing information.
    This article is really helpful on to know more Exhibition stall designer in India

  • WonderFul ! Article. Thank you for sharing information. We provide service on Nursery rhymes songs

  • Thanks for posting It’s a informative post.
    Best Regards

  • Vioma Motors


    Thank you for your information it is really helpful.
    best electric scooter in India


  • yuvaraj singh

    Thanks for sharing this informative content , Great work
    Leanpitch provides online training in Devops during this lockdown period everyone can use it wisely.
    Devops Online Training