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.


31 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.

  14. facebook May 22, 2014 at 10:22 am #

    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
    heart.

  15. syntheticvibes.ch June 2, 2014 at 4:19 am #

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

  16. tworzenie stron poznań June 10, 2014 at 6:23 pm #

    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!

  17. online property management June 20, 2014 at 7:02 am #

    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!

  18. rdscomputersolutions.com June 30, 2014 at 9:50 pm #

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

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

  19. floral maxi dress wedding July 2, 2014 at 12:40 pm #

    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.

  20. How to Get Rid of Cellulite July 6, 2014 at 9:08 pm #

    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!

  21. firma transport mutari bucuresti July 9, 2014 at 11:23 am #

    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?

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… [...]

  4. Building Mobile Apps with HTML and a Local Database | Sochinda's Blog - June 3, 2014

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

Leave a Reply

css.php