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.

10 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?

  7. Robert January 6, 2015 at 7:00 am #

    It will also take up more of your energy and attempt. It is very essential to prevent the application from publishing instantly. serruriers

  8. konveksi baju February 12, 2015 at 12:08 pm #

    very thanks you. i like make app mobile with phonegap..


  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