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.

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

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

  • hungfei

    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!

    • I would really like to know this as well.

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

  • Pierre

    very informative sample, thank you

  • Pingback: Best of JavaScript, HTML & CSS – Week of June 3, 2013 | Flippin' Awesome()

  • John Mayern

    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?

  • Robert

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

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

  • Pingback: Best of JavaScript, HTML & CSS – Week of June 3, 2013 - Modern Web()

  • goood thanks admins

  • goood thanks adminsas

  • haf he he

  • His highest production of our company, we use the sport socks products: cotton, cotton, polyester, nylon and lycra. It includes anti-bacterial.

  • fckj jdkfh kjfghj jdkh kljkjhkfd kjhjh dfhjj klkjhdf kjhkjhdf hkjlhkljhkldf hkjh kljh lkjdfk hkljhklj dfhkl jhklhdf dfh klhkljh df hkj hkdfhlkj hdfh khf hj hdfh kj hdfkjh kldfkjh kjh dfklj h k| interior design services in mumbai dfuh idgh kldgkjhdkh kljh
    gdfi ihdfih ;khdf
    iyh iodfihdfoih

  • This gives you the freedom to move your soccer jerseys of the match; It is designed stylish enough to be worn on a daily basis. curvy bust

  • serdem

    Tubidy is a free, easy to use and basic music client that offers you a completely different feeling while downloading music.