MVVM (MODEL VIEW VIEW-MODEL)

Do you know what an Architectural Pattern is ?

It is basically a reusable solution to a commonly occurring problem in software architecture within a given context. It addresses a variety of issues in the software engineering field. Developers generally use different patterns and tools that help them with the development and testing for various websites and applications. Also, we need something that allows faster reaction to design changes, which MVVM actually does.  MVVM is a software design pattern, separating an application to three main logical components.

Note: Link between Model and View Model is Manipulating Data and between ViewModel and View is 2-way Data Binding.  

View tells the View Model that the user has performed some action and based on that, View Model tells the View how it should update itself.

Example : User pulled the table view and pull to refresh was implemented.

So, the view will now tell the View Model that the user has pulled the table view and hence View Model knows that the service call has to be made, and now View Model will interact with the Network Layer. Network Layer will make the service call, models will be updated with new data.  When the Model will be updated, View Model will let the View know that data is available, update yourself.

DESCRIPTION OF THE MODEL :  

MODEL: ( Reusable Code – DATA ) Business Objects that encapsulate data and behavior of  application domain, Simply hold the data.  

VIEW: ( Platform Specific Code – USER INTERFACE ) What the user sees, The Formatted data.  VIEW-MODEL: ( Reusable Code – LOGIC ) Link between Model and View OR It Retrieves data  from Model and exposes it to the View. This is the model specifically designed for the View.  

FEATURES:  

1. Life Cycle state of Application will be maintained.  
2. Application will be in the same position as where the user left it.  
3. UI Components are kept away from Business Logic.  
4. Business Logic is kept away from Database operations.  
5. Easy to understand and read. 

BASIC EXAMPLE: We want to display Name in Pink Color (not written in proper format,  proper length) or Display Pink Color if Age of a person is > 20 years, Display Red Color if Age of a person is < 20 years, Then the Logic of Red and Pink Color would be present in  ViewModel.  

DIFFERENCES BETWEEN MVVM AND MVC: 

MVVM:  

1. 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  
2. MVVM is relatively a new Model.
3. We are on the client side so we can hold on to objects and do a lot more logic in a non disconnected state  
4. Debugging process will be complicated when we have complex data bindings.
5. MVVM would be easier for separate unit testing and code is event-driven.

MVC:  

1. In this pattern, we have models which are basic objects with no code and just properties,  View’s contribute to presentation items (HTML, WinForms, etc) and Controllers focus on the  logic part. Examples: ASP.NET MVC, Angular  
2. MVC is an old Model.  
3. 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.  
4. MVC is a bit difficult to read, change, unit test and to reuse as well.
5. Model can be separately tested from the user.

ADVANTAGES: 

1. Maintainability – Can remain agile and keep releasing successive versions quickly.  2. Extensibility – Have the ability to replace or add new pieces of code.  
2. Testability – Easier to write unit tests against a core logic.  
3. 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.  

DISADVANTAGES: 

1. Some people think that for simple UIs, MVVM can be overkill.  
2. In bigger cases, it can be hard to design the ViewModel.  
3. Debugging would be a bit difficult when we have complex data bindings.

SUMMARY: From Server, Get Data(available in Model Objects), View Model reads Model  Objects, and then facilitates easy presentation of data on the view.  

We hope you got the idea of what MVVM is and can expect the similar things in your following interviews and daily coding. If you are looking for challenging opportunities at some of the fastest-growing global companies, join Talent500. Sign up here.