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: http://github.com/ccoenraets/directory-backbone-ratchet

Notes

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.