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.

  • Paul Ambler

    There is a pair of monitored expenditures in a cash money car loan improvement! Keep in mind, on the off opportunity that you are not cared for to pay this adjustment together with you strike lose your job, the clock does not stop. new york dui law

  • Paul Ambler

    The helpful site, where did u think of the details on this posting? I have actually evaluated a few of the short posts on your internet site currently, and also I absolutely like your design. Many thanks a million and likewise please preserve a reliable work. expert tree service

  • Paul Ambler

    I require to explore your internet site in which you have actually described social media sites. Nowadays the globe is so quick as well as brand-new innovation are coming in a market. Presently, Social media site internet site comes to be a significant system in all over the world. automation security installer

  • tflix

    you can start downloading mp3 videos from any device you want.

  • Paul Ambler

    If it’s not an excessive problem let me know in case you’re looking for a post author for your site. You have some truly extraordinary messages and also I feel I would be a respectable source. In the event that you ever before require to take a percent of the heap off. professional gutter cleaner

  • yuvaraj singh

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

  • yuvaraj singh

    Thanks for sharing this informative content , Great work
    Leanpitch provides online training in Enterprise Agile coaching during this lockdown period everyone can use it wisely.
    Enterprise Agile Coaching