Fork me on GitHub

Using MVVM - Model View View Model in Javascript

MVVM is an architectural pattern largely based on MVC and MVP by Microsoft, which is targeted at modern UI development by separating from the business logic and behaviour in an application. MVVM has been implemented in JavaScript in the form of structural frameworks like KnockoutJS, KendoUI MVVM and KnockbackJS.

For this post I’m going to use MVVM framework provided by Kendo but you may use any framework since implementation is going to be similar. To begin, lets put them in an order that makes sense and avoid confusion.

1. Model

Can also be called as Data Model to differentiate from View Model. It is essentially your Model (C# Class) on server.

 public class Person
 {
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string PhoneNumber { get; set; }
    public string StreetAddress { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string PostalCode { get; set; }
 } 

2. View Model

This is essentially a javascript object with only the data required by the view. This can have fields, methods etc. To declare your View-Model use the kendo.observable function and pass it a JavaScript object:

var person = kendo.observable({
    firstName: "Prashant",
    lastName: "Chaudhary",
    fullName: function(){
        return this.get("firstName") + " " + this.get("lastName");
    }
});

kendo.bind($('#demo'), person); 

3. View

The View is the UI (a set of HTML elements) which will be bound to the View-Model.

 <div id="demo">
     First Name: <input data-bind="value: firstName" /><br />
     Full Name: <label data-bind="text: fullName" ></label>     
 </div>

Example:

Advantages & Disadvantages:

Following are some of the advantages and disadvantages as stated by the MVVm creator John Gossman himself.

Advantages:

  • MVVM Facilitates easier parallel development of a UI and the building blocks that power it
  • Abstraction of the View, reducing the amount of business logic or glue code stuck in code-behind.
  • The ViewModel is easier to unit test than code-behind or event driven code.
  • The ViewModel (being more Model than View) can be tested without concerns of UI automation and interaction

Disadvantages:

  • The overhead in implementing MVVM is “overkill” for simple UI operations
  • Whilst data-bindings can be declarative and nice to work with, they can be harder to debug than imperative code where we simply set breakpoints
  • For larger applications, generalizing the View layer becomes more difficult
  • Data binding can create a lot of book keeping. If not managed well, can result in considerable memory consumption in an application

References and Further reading:
Understanding MVVM – A Guide For JavaScript Developers by Addy Osmani
Kendo MVVM Overview

1 note

  1. designwithpc posted this
blog comments powered by Disqus