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.

  • Dora

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

  • Pingback: Employee Directory Sample Application with Ratchet 2.0 ... | application()

  • Pingback: Best of JavaScript, HTML & CSS – Week of February 24, 2014 | Flippin' Awesome()

  • Pingback: Building Mobile Apps for Salesforce.com with Ratchet 2.0 | Christophe Coenraets()

  • SSakSSri

    Thank you for helpful article

  • 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

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

  • Vince K

    Christophe,

    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.

    V

  • 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…

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

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

  • 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.

  • Pingback: Employee Directory Sample Application with Ratchet 2.0 | Christophe Coenraets |()

  • 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

    http://www.sogutmaservisiistanbul.com

  • Pingback: Constructing Cellular Apps for Salesforce.com with Ratchet 2.zero | PakUltimate()

  • Gerald

    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.

  • Pingback: Best of JavaScript, HTML & CSS – Week of February 24, 2014 - Modern Web()

  • Vampires ya da Vampir olarak bilinen bu yaratıklar insan görünümdedirler. Fakat vahşi canavarlardan bile çok çok tehlikedirler. Onları bir an önce durduramazsanız başınız gerçekten büyük belaya gireceksiniz. Vampirlerle yüzleşme zamanıdır.

  • Alfon

    In the sample, while accessing some route and then going back and so on, the views keep being added to the dom, what would be an straight-forward way of avoiding this behaviour?, maybe calling remove() before accesing a new controller?.

    Thanks

  • Gustavo

    The code of my reply its not good. There is a lot of html.

  • Firmamızın en fazla üretim yaptığı, spor çoraplarında kullandığımız ürünler: pamuk ,koton, polyester, naylon ve likradır. Anti-bakteriyel içermektedir.

    Diğer Tüm Modellerimiz için Mağazamızı ziyaret edebilirsiniz. Kendi Forma tasarımınız için bize ulaşınız. Detaylı bilgi almak için bize ulaşabilirsiniz.

  • fazla fazla tesekkur ediyoruz.

css.php