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.
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?
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.
Thanks!
Good and very useful. Thanks. I will give this a try.
very informative sample, thank you
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?