More on MVVM with Backbone Stickit plugin

In my last post, I mentioned about two way binding a.k.a MVVM in Backbone using Backbone.Stickit plugin. The Stickit plugin does provide awesome two way binding, but in addition it includes several features that are very much apt when modifying state of model or the view. I've been using these features in my project regularly.

MVVM in BackboneJS using Backbone.Stickit

I have been looking into various design patterns and trying to architect client side applications using it. More often than not the MVC pattern fits the requirement in most of the applications. However, I have found myself using MVVM (Model View - View Model) pattern along with MVC. I use MVVM pattern particularly when I have to maintain the state of the model on the client side. AngularJS provides great support by allowing you to extend the markup and tying the model right within the view (the markup). It also provides components that can be used to structure the application the MVC way and hence it's appropriately termed as MVW or MV* framework. However, I use BackboneJS in most of my applications and I have been able to maintain the state of the model using the Backbone.Stickit plugin.

Win a Free e-Book copy of my book - 'Instant Kendo UI Mobile'

I'm giving away two copies of my book 'Instant Kendo UI Mobile'. All you need to do is to send me a message through the 'Contact Me' form, let me know how this book will benefit you and whether you can post a review as well. You can also message me on Twitter or Facebook.

You can find out about the book here -

My first book titled 'Kendo UI Mobile' is here!!

The title says it all. I had posted a couple of entries on Kendo UI earlier and was approached by Packt publishing to write on 'Kendo UI Mobile'. Writing a book was both a personal and a professional goal that I had set for myself. Today I have realized it and I feel accomplished. For almost everyone, first things are very special. Be it their first job, paycheck, girlfriend\boyfriend, marriage, first kid and anything that happens for the first time in their life. This is my baby and I'm going to celebrate my win today.

If you are planning to build a mobile website or an app using Kendo UI Mobile, this book should get you up and running. Here's the link to the page, from where you can learn about the book and buy it -

Backbone Collections do not emit 'reset' event after fetch

I recently upgraded my Backbone application to the 1.0 version of the library. When I ran the application, the Backbone View was not rendering anything on the browser screen. I noticed the XHR request being sent in the Network tab of Chrome Dev Tools. This meant that the Collection was fetching the data from the server. However, the 'render' function defined in Backbone View was not being called, which was attached as a callback handler for the 'reset' event on the Collection.

Para - Para - Parallax

I was listening to ColdPlay while developing a Parallax scrolling application and hence the title. Anyway, I was very much intrigued by the parallax scrolling model and wanted to try my hand on building one. The idea here was to show images of different transparency levels in such a way that when the user scrolls, one image would blend over the previous one.

Take a look at the application here.

WebRTC experiment - Recognizing hand gestures

I have created a web application that recognizes hand gestures using WebRTC's getUserMedia API. Here's how it works: when you launch the application the browser will prompt you for the permission to access the camera. Click on 'Accept',and then swipe your hand from right to left and vice versa. You would see that the next image  (or the previous image if you swipe from left to right) in the gallery slides through.

You can access the application here.

Please note, I have tested this application on Chrome only and not on other browsers. Also, I have used five images in this demo and it is obvious that no image would be shown if you swipe from right to left when the last image is being shown or when you swipe from left to right when the first image is shown. I have codenamed this application as 'Gesto' and hence the name in the URL of the application.

Client side MVC: Using Publisher - Subscriber event model to build decoupled components

I've been really busy these days writing client side MVC code. A few months back I explored using Require and Backbone to build the frontend MVC structure. Since then I've been working on improving the structure of my client side code. One approach that I've used is to decouple the components. When I say decouple, the components that I build should not directly alter or affect the behavior of some other component in the page. By decoupling the components, we can ensure that these set of components can be reused and tested in isolation.