Implementation differences between MVC and MVVM Design Patterns

Implementation differences between MVC and MVVM Design Patterns

MVC and MVVM both are loosely coupled architectures and belong to the MV(x) family and fall under Structural Design Patterns Category.

M: stands for Model (an object of data model class).
V: stands for View (an object using which the user interacts with the system).
C: stands for Controller.
VM: stands for View-Model.

A Controller In the MVC is responsible for:
1. Business logic: All the business logic is written in the controller part so sometimes the controller becomes too massive to handle.
2. Communication: View and Model both interact with each other via Controller.

Structure of MVC Design Pattern

A View-Model In the MVVM is responsible only for communication between view and model.

Now it’s Confusing….Where would I write my Business Logic???

The solution is to divide Business Logic into 2 parts
1) Domain logic
2) Application logic

Domain Logic: All the domain-related logic will be written in the Model classes.
e.g We are developing an application for the education domain and here is an entity named Student, then we will write student-related logics only in the Student Model class.

Application Logic: All the application logic will be written in the Application service layer classes through which our View-Model will communicate. E.g. A DBManager class, responsible to handle DB-related operations, A networking class handling network calls, An API handler class handling responses from the network layer…. Many more depending on the requirement but no business logic will be written to View-Model class.

The architecture of MVVM will look like the following:

Structure of MVVM Design Pattern

In the above diagram we can see that:

1. View-Model communicates with one or more Application service layers (API, Network, and Database Manager layers), Data model objects, and View Layer itself.
2. Model (Data model) objects responsible for the Domain Logics only. While some may have the JSON serialization capability.
3. The view is responsible to interact with the user and send the user action to View-Model and the result back to the user in the user’s understandable formats.
4. Application layers are responsible for Application Logic and also can contact each other because they follow the Chain-Responsibility principle. As in the above diagram API/Webservice Layer takes input data from View-Model and decides to call web service accordingly and also provides the parsed/understandable data back to View-Model or Error in case of failure.
   The Network Service layer is responsible for checking the network connection and takes input from the API layer which contains the information like request URL, request body, request header, request type (POST, GET, PUT, etc.) then creates a network call and returns the response to API layer with data or error.

Note: This Article suggests the basic concept for the implementation of the MVVM approach and some basic differences between MVVM and MVC design patterns.