Employee Directory Sample Application with Ratchet 2.0

After this week’s double announcement that Ratchet 2.0 is available and is now part of the Bootstrap organization, I decided to update the Ratchet/Backbone version of my Employee Directory application with Ratchet 2.0 and see how it looks.

You can experience the application in the phone “simulator” below (type a few characters in the search box), or click here to run the app in a full browser window.

Platform-Specific Themes

Among other new features, Ratchet 2.0 has a new base theme that you can overlay with optional themes for iOS and Android.

iOS theme

Here is the exact same app with the iOS theme:

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

Android theme

And here is the same app with the Android theme:

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

Source Code

The source code for the application is available on GitHub: http://github.com/ccoenraets/directory-backbone-ratchet

Wrapping Up

After a long wait, it’s great to see this new version of Ratchet, and it’s going to be interesting to see how the project evolves and how active it will be in its new home.

Ionic (built on top of AngularJS) has a lot of momentum in this space right now. It’s good to have options, especially if you are using another architectural framework. You can read about the Ionic/AngularJS version of the same application in this post.

17 Responses to Employee Directory Sample Application with Ratchet 2.0

  1. Dora March 1, 2014 at 3:58 am #

    Sorry for this dummy question: Is it possible to make a .apk app based on the source code above?

  2. SSakSSri March 25, 2014 at 1:04 am #

    Thank you for helpful article

  3. Jony April 7, 2014 at 10:34 am #

    How can your website clickable with mouse in desktop browsers. I think Ratchet doesn’t support desktop browser click functioins.
    Can you explain it to me?

    • Jens May 2, 2014 at 9:00 am #

      Ratchet using fingerblast.js to make the touch events work for demonstration in the browser. look into the docs/assets/js directory…

  4. Vince K April 11, 2014 at 5:23 pm #


    I’m using your example to build out an app, can you tell me how to add the ratchet javascript methods into my app? I want to use the modals and popovers etc. but I can seem to access them inside BackBone view.js files.

    Obviously I’ve already included the ratchet.js file into the index.html.

    Great work, love all your example apps.


  5. Gabriel May 5, 2014 at 10:50 am #

    Hi Christophe,

    Thanks for this interesting app using Ratchet.

    I have one question though :
    I tried your app you used for the LXJS workshop video (phonegap-day-eu-master), it feel very fun and unpleasant on a android device : Odd touch feeling, strange blue background.
    I was beginning to think PhoneGap app could not feel like native app and was very worried of the future of PhoneGap in my organization…
    I tried this app (directory-backbone-ratchet) : it feels much better ! But it’s still slow in page translation, is that due to the touch event ? could fastclick be a solution ?

    The “Hide HTML Beheviors” item of the LXJS workshop seems to be a serious issue…

  6. eplanetplus.com June 1, 2014 at 10:41 am #

    Write more, thats all I have to say. Literally, it seems as though you relied
    on the video to make your point. You definitely know
    what youre talking about, why waste your intelligence on just posting videos to your site when you
    could be giving us something enlightening to read?

  7. sbobet wap June 1, 2014 at 4:00 pm #

    This post is worth everyone’s attention. How can I find
    out more?

  8. Bilal Öztürk July 13, 2014 at 8:55 am #

    Elma Pastası uygulamasında dilediğiniz gibi skor kazanmak ve mükemmel derecede eğlenebilmek için oldukça hızlı olacaksınız. Diğer yandan oyunumuzda bütün kontroller sizlerin yararına olduğu için Türkçe olarak güncellenmiştir. Uygulamada bu sayede size verilecek olan tüm talimatları en iyi şekilde görebileceksiniz. Kısa sürede popüler olan bu oyunumuzda kahramanımızla beraber diğer içerikler de olduğu gibi talimatları yerine getirebilmek amacıyla ( Fare ) kullanacaksınız. Bu imgesel araca sadece ve sadece ( Sol Click ) yaparak dilediğiniz her kontrolü yerine getirebileceksiniz. Sizlere iyi şanslar dileriz. http://silahlioyun.net/ hemen tıkla ve sende en güzel Silah Oyunları yani Gun Games adında maceralara ortak ol. Daha fazla beklemek istemiyorsan bir tıklamayla ulaşabileceksin.

  9. klima October 13, 2014 at 4:54 am #

    Elinize sağlık arkadaşlar süper bir şey olmuş. Klima için bilgi ve destek almak istiyorsanız da aşağıdaa ki linkte görebilirsiniz


  10. Gerald December 14, 2014 at 10:09 pm #

    Hi, I hope you could advise me on the right direction. I need to make some changes, specifically when loading the app. Is it possible to display the list of employees straight away once the app loads? If so, which file do I need to make changes on? Thank you very much.

  11. Ioannis Karavasilis March 16, 2014 at 3:40 pm #

    I forgot that you have to add the android platform, so right after creating the “employee-ratchet” project, perform:

    $cordova platform add android


  1. Employee Directory Sample Application with Ratchet 2.0 ... | application - March 3, 2014

    […] Visit link: Employee Directory Sample Application with Ratchet 2.0 … […]

  2. Best of JavaScript, HTML & CSS – Week of February 24, 2014 | Flippin' Awesome - March 4, 2014

    […] Rachet is a set of components for mobile apps and Christophe Coenraets shows how to use it with Backbone in his sample app. Employee Directory Sample Application with Ratchet 2.0 […]

  3. Building Mobile Apps for Salesforce.com with Ratchet 2.0 | Christophe Coenraets - March 5, 2014

    […] my previous post, I shared a sample mobile application built with the freshly released Ratchet 2.0. Ratchet is a UI […]

  4. Employee Directory Sample Application with Ratchet 2.0 | Christophe Coenraets | - July 15, 2014

    […] Curated from coenraets.org […]

  5. Constructing Cellular Apps for Salesforce.com with Ratchet 2.zero | PakUltimate - October 24, 2014

    […] my previous post, I shared a pattern cellular software constructed with the freshly launched Ratchet 2.0. Ratchet is […]

Leave a Reply