Just like a building requires a solid base, applications require a design/architectural pattern that would make the code base easier to work with as complexity increases. Additionally, incorporating design patterns allows developers to add features to the app and safely append features to features. In this article we will be comparing the Model-ViewModel-Model (MVVM) and Model-View-Controller (MVC) architectural design patterns as well as look at their advantages, disadvantages, and the situations in which you want to use either one. 

Regardless of what design pattern/architecture pattern you use there will always be a view and a model. The difference between these architecture patterns lies in the way the views and the models are wired. In practice, there are two ways in which a view manipulates the model, and that is either with a controller or view model

What is MVC?

Model-View-Controller separates an application into three departments:

Model – It is usually described as the recurring data of you application. For example, a user model which contains information related to you user like, username, email, first name, last name, etc. In addition to the data, the model also keeps into account state, and business logic

View – It is the driver for the model that is presented to the user, it also allows the user to modify, create, and delete (depending on the functionalities of the application) data. 

Controller – Controls the application flow depending on input whether it be from a user or data being received from a server; it is the back-bone of the application. The user uses the controller to manipulate the model, then the model updates the view which the user sees and the cycle continues. 

Advantages of MVC:

  • It supports asynchronous requests which allows for quicker load times and keeps the application refreshed.
  • The model does not depend on the view so any changes to the model will not affect the entire architecture. 
  • Because the model and the view do not necessarily have to know anything about each other, developers can work on various aspects of the application’s components independently
  • Fairly easy to understand in comparison to other design patterns

Disadvantages of MVC:

  • Standard practice calls for each model to correspond to its own controller, and as the application increases in complexity in terms of relationships between models, then controllers have to also grow in complexity to accommodate those relationships.
  • Similarly, controllers are tied to the view, if we change the view, then we would also have to modify the controller

What is MVVM?

Model-ViewModel-Model also separates the application into three components:

Model– Similar to MVC, the model in the MVVM design pattern is the data, business logic, and state:

View– Changes based on changes observed in the view model via data binding. 

View Model – is responsible for gathering the model and presenting it to the view via observers

Data Binding

In MVVM, instead of having controllers as in MVC we have view models which allow the view and the model to communicate directly with one another; a view model binds data between a view and model and the view reacts to the state of the view model via observers.

“Data binding is the key technology that MVVM relies on, to link Views with their View-Models. Data binding provides and maintains the automated Two-Way connection between View and ViewModel…” – MVVMCross

Advantages of MVVM:

  • Isolated unit testing
  • Components can be worked on independently
  • Internal implementation to be changed does not affect the others
  • Components can be swapped
  • It works on observer pattern
  • To increase application testability
  • View components can be worked on independently and allows for a developer-designer workflow. 

Disadvantages:

  • Due to the reliance on data binding, MVVM designed applications require more memory 

Applications:

Facebook is an example of an MVC application. From the outside, it is clearly noted that Facebook is visually a highly complicated app, thus ensuring that dysfunction in one component does not affect the state of the entire website is critical.

Google is a prime example of a MVVM application where it is very simple in design and does not have various components functioning in tandem. 

MVVM works well with single page applications and MVC works well with complex apps such a multi-page applications or applications that utilize various components.

As your application grows both of these design patterns would result in greater complexity, so utilize MVVM if you plan on unit-testing you application. 

There is also the case in which MVVM and MVC can be used in tandem. For example, using MVVM in the cline side and MVC on the server side. I.e Controllers can be used in a MVVM designed application where the controllers handle a processing logic and provide data to the views using a view model.

It can also be the case that you start your application with the MVC architectural pattern, and as your website becomes more complex, and it calls for views to be more responsive to your data, then you might want to switch over the MVVM design. Also, if you want to start to incorporate unit testing in your application, you should consider the MVVM design pattern.

There is really no right or wrong answer. As a developer it is critical that you assess the needs of your application and based on those objectives, implement a design pattern that best fits the goals of your application and workflow. 

RESOURCES:

Difference between MVC and MVVM

https://medium.com/mobidroid/difference-between-mvc-and-mvvm-456ec67181f6

MVC vs. MVVM: How a Website Communicates With Its Data Models

https://hackernoon.com/mvc-vs-mvvm-how-a-website-communicates-with-its-data-models-18553877bf7d

MVC vs. MVP vs. MVVM on Android

https://academy.realm.io/posts/eric-maxwell-mvc-mvp-and-mvvm-on-android/

Data Binding:

https://www.mvvmcross.com/documentation/fundamentals/data-binding