what is MVVM, and should we use it? [closed]

Question

I've been looking at the MVVM pattern, specifically knockoutjs, and mostly it just makes me cringe. I won't go on a long rant about the benefits of keeping structure, presentation and display separate, I'll just ask (as an example): What's the difference between

<button data-bind="click: someJavaScriptFunction">Something</button>

and

<button onclick="someJavaScriptFunction();">Something</button>

and should we be putting so much behavior control into the markup? As clean and as minimalistic as this is, it seems to go against every web programming tenet I've ever heard about.

Am I wrong?

Answer 1

Here's a more direct answer to your question.

In the second example, you are referring to a function that has to be in the global scope (i.e. a property of the window object).

In the first example, you are referring to a property of the current view model.

Yes, it's a subtle distinction, but it is an important one. If you use on-event attributes you can only refer to things that exist in the global scope. This means you have to put everything you want to access in the global scope, which leads to very messy code.

If you use declarative bindings, the exact meaning of the bindings instead depends on the context.

It helps to think about the HTML markup as more coincidental. What you are really looking at is structured access to the view model. Think of with and forEach as nested contexts and of the other bindings as their attributes. The relationship between the declarative bindings and the underlying HTML suddenly feels more like working with XSLT.

The two examples look very similar. But the underlying concepts are vastly different and are what makes data binding so powerful and on-event attributes so obnoxious.

The reason on-event attributes are frowned upon isn't just that they mix logic with structure. It's that they're a weak attempt to bolt arbitrary JavaScript code to HTML elements which prevents proper encapsulation of application logic. On-event attributes are low-level "hooks", bindings extend the behaviour of elements.

All that said, it is likely possible to do the same horrible things people have done with on-event attributes by using declarative bindings. The difference is in what else you can do with them. You shouldn't always judge technologies by how they can be abused -- we're all adults here.

Answer 2

Your only using one part of MVVM - specifically the View - in that code example you gave above. The reason to use Knockout (or any other MVVM library) is to make it easy to bind your views to a Model - a View Model - thus allowing you stop writing a lot of boilerplate code just to return values from your view.

I see a lot of wonky javascript/jquery code where people go and use something like this:

var ex = {
   some1: $('#textbox1').val(),
   some2: $('#textbox2').val()
};

The problem with this is that it is literally littered throughout the web application and it becomes extremely tedious to maintain. I know with Knockout, whenever my View is updated, my View Model will be updated as well.

It's not needed for every application, and you shouldn't use it just because it's whats "cool" to use. There obviously needs to be a reason to use it, my example above is one reason and im sure there are more.