Sample Mobile / PhoneGap Application with Backbone.js and Ratchet

I continue my experiments with different frameworks and UI toolkits to build mobile and PhoneGap applications. In this post, I use Backbone.js as the architectural framework and Ratchet as the UI toolkit to build my Employee Directory reference application.

You can experience the application below:

Click here to run the app in a full browser window.

Source Code

The source code for this sample application is available on GitHub:


Because there is no overlap, combining Backbone.js and Ratchet is straightforward: Backbone.js focuses exclusively on the architecture, and Ratchet focuses exclusively on the UI (mostly by providing mobile styles).

Ratchet is pitched as a way to “Prototype iPhone apps with simple HTML, CSS, and JS components”. Prototype implies that it might not be everything you need for a production app (It also doesn’t seem to have been under active development after it was first released). But because Ratchet is clean and simple to use, it is indeed a very efficient and useful prototyping tool and potentially more. iPhone means that Ratchet has a distinct iOS look and feel. A Ratchet-based application would look out of place on an Android device for instance.

In my next post, I’ll share the same application built with Backbone.js and Topcoat.

8 Responses to Sample Mobile / PhoneGap Application with Backbone.js and Ratchet

  1. Roland June 4, 2013 at 12:43 pm #

    Thanks for sharing that, it is always insightful.
    By the way I didn’t know the librairies you mention in this blog entry and I found both of them worth of interest.
    Can’t wait your next blog entry ;)

  2. Roland June 4, 2013 at 12:51 pm #

    Do you plan a similar blog entry focusing on Backbonejs + Kendoui?

  3. hungfei June 5, 2013 at 4:45 am #

    Can show all of the staff list when page loaded?
    search: function(event)
    how can i call this when page ready()?
    really want to learn from your coding. Thanks!

    • Super_Hussain October 6, 2013 at 8:41 pm #

      I would really like to know this as well.

  4. Joseph June 7, 2013 at 12:42 pm #

    Good and very useful. Thanks. I will give this a try.

  5. Pierre July 25, 2013 at 10:13 am #

    very informative sample, thank you

  6. John Mayern February 6, 2014 at 1:26 am #

    On 4-inch devices it doesn’t scroll and on iPad fails to adjust the width to 100% and half of the app goes offscreen. Any idea why?


  1. Best of JavaScript, HTML & CSS – Week of June 3, 2013 | Flippin' Awesome - August 1, 2013

    […] Christophe Coenraets posts a sample PhoneGap application for iOS built with Backbone.js and the Ratchet UI toolkit. Sample Mobile / PhoneGap Application with Backbone.js and Ratchet […]

Leave a Reply