[ Way to Structure Code ]
Note : Link between Model and View Model is Manipulating Data and between ViewModel and View is 2-way Data Binding.
DESCRIPTION OF MODEL :
MODEL: ( Reusable Code – DATA ) Business Objects that encapsulate data and behavior of application domain, Simply holds the data.
VIEW: ( Platform Specific Code – USER INTERFACE ) What the user sees, The Formatted data.
VIEWMODEL: ( Reusable Code – LOGIC ) Link bewteen Model and View OR It Retrieves data from Model and exposes it to the View. This is the model specifically designed for the View.
- Life Cycle state of Application will be maintained.
- The application will be in the same position as to where the user left it.
- UI Components are kept away from Business Logic.
- Business Logic is kept away from Database operations.
- Easy to understand and read.
We want to display Name in Purple Color (not written in proper format, proper length) or Display Purple Color if Age of a person is > 18 years, Display Pink Color if Age of a person is < 18 years, Then the Logic of Purple and Pink Color would be present in ViewModel.
From Server, Get Data(available in Model Objects), View Model reads Model Objects and then facilitates the easy presentation of data on the view.
DIFFERENCES BETWEEN MVVM AND MVC:
| The Model is somewhat similar to MVC but here we have ViewModels which are passed to the view and
all the logic is in the ViewModel and hence no controller is there. Example: Knockout.js
| In this pattern, we have models which are basic objects with no code and just properties, View’s
contributes to presentation items (HTML, WinForms, etc) and Controllers focuses on the logic part.
Examples: ASP.NET MVC, Angular
|In MVVM your DeletePerson would be called off of your view model||We have a PersonController with an Action DeletePerson that creates a person|
| We are on the client side so we can hold on to objects and do a lot more logic in a non-disconnected
| MVC is typically used when things are transactional and disconnected as is the case with server-side
web. In ASP MVC we send the view through the wire and then the transaction with the client is over.
- Maintainability – Can remain agile and keep releasing successive versions quickly.
- Extensibility – Have the ability to replace or add new pieces of code.
- Testability – Easier to write unit tests against a core logic.
- Transparent Communication – The view model provides a transparent interface to the view controller, which it uses to populate the view layer and interact with the model layer, which results in a transparent communication between the layers of your application.
- Some people think that for simple UIs, MVVM can be overkill.
- In bigger cases, it can be hard to design the ViewModel.
- Debugging would be a bit difficult when we have complex data bindings.
- Model-View-Controller(MVC) architecture for Node applications
- Spring MVC with JSP View
- Laravel | View Basics
- How to Setup View Engine in Node.js ?
- HTML | view Event Property
- Reader's View of a GeeksforGeeks webpage
- How to insert HTML into view from AngularJS controller?
- Different ways for passing data to view in Laravel
- How to Setup Handlebars View Engine in Node.js ?
- How to define additional details that the user can view or hide?
- How to place the image above the slider in mobile view in bootstrap?
- How to set the view-port meta tag for iPhone that handles rotation properly ?
- CSS | Box model
- JSP Access Model
- p5.js | model() Function
- Client-Server Model
- Page Object Model (POM)
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.