When to Not Use Observable in KnockoutJS

I’ve been really busy lately and my list of things to blog on has been getting backed up. One thing that occurred to me while building my new JavaScript course was about how KnockoutJS and Observables actually work. Here’s the deal.

KnockoutJS supports the idea of an observable object. This is similar to WPF/XAML concept of INotifyPropertyChanged interface. Most KnockoutJS dev’s I’ve talked with use KnockoutJS’s observable everywhere. But there are cases when you don’t need it.

The biggest problem I see is that some people think that to get two-way binding you need observable.  For example, here is a JSFiddle with a typical (but simple) KnockoutJS example:

Here you see that the view model (e.g. src) is using an observable to create the properties. In the HTML, we have the name field bound twice...to the input box and to a div. This means than when we change the text in the first input box and that box loses focus, then the div changes as well. This is at the heart of what KnockoutJS's observable does. But in some cases, if you don't need the notification part of the functionality, a simple property is more efficient: In this case, the code is identical but the viewmodel (e.g. src) is just using plain old JS members. While changing the text in the name input field doesn't make the div change (because the notification is missing), it does in fact handle two way binding. You can see this if you click the button (which pops up an alert showing the name in the view model.

For large apps that have a lot of bindings, this efficiency is helpful. Knowing when you can avoid using observable can help improve overall KnockoutJS performance.

What do you think?