MVVM concept in Web UI using Knockout JS and Angular JS

MVVM stands for Model View – View Model. It’s different but almost similar to MVC, which is Model-View-Controller. MVVM is used up to the UI level only, while MVC is used in the entire front-end and back-end design.

First we will explain MVC.

In a MVC Software design, the View, Control and and Model modules are separated accordingly.

The description are as follows:

1. View – The code that contains what the user sees in the browser. These are composed of CSS, HTML, and JavaScript. Basically this is the front-end side of the code. Colors, format and view are all implemented here. It retrieves data to from Controller, which are needed to be displayed in the browser.

2. Controller – This is the back-end side of the code. This is where all the data retrieval, manipulation, checking and logic happens. Database, Security and HTTP communication is created here. One example of Controller code is the J2EE and Java.

3. Model – The containers / container class of data from the database. The model code usually represents a database table. The model code is also in the back-end side, but is only composed of variable fields, setters and getters. No logic and manipulation is done on the Model. The database itself and the data stored is not considered as a Model.

Why use MVC?

Separation of modules is needed in software design for better quality, maintenance and re-usability.

MVVM explained.

Based on the examples and references, MVVM is only implemented on the “View” module of an MVC. MVVM uses the similar design pattern of “Observer-Observable”. MVVM is another “controller-like” code in the View. Its main purpose is to manipulate the View data on the View level. If there is no MVVM implemented, data changes needs to be manipulated in the back-end Controller level only, which in some cases, becomes difficult or does not give the desired results.

Javascript frameworks such as Knockout JS and Angular JS already provide template solutions to implement the MVVM design. Knockout JS uses the basic Observer-Observable design pattern. Angular JS does not follow the MVVM design but templates the data binding concept (HTML-JS binding) that is needed for Web UI designs.

Angular JS is preferred for modern browsers, while Knockout JS is preferred for IE ( lower versions ) support.

NOTE: MVVM should not be used on a simple Web UI logic/input/output, which will become an overkill, but is highly recommended design for dynamic data changes in the View.

MVVM changes the view as it detects changes on view inputs.

Try the knockout js tutorial here:
http://learn.knockoutjs.com/#/?tutorial=intro

other references:
https://en.wikipedia.org/wiki/Model_View_ViewModel

http://rachelappel.com/comparing-the-mvc-and-mvvm-patterns-along-with-their-respective-viewmodels

http://joel.inpointform.net/software-development/mvvm-vs-mvp-vs-mvc-the-differences-explained/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s