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:
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.
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.
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: