Model-View-ViewModel Pattern explained
Understanding how MVVM works
What is the Model-View-ViewModel pattern?
The Model-View-ViewModel(MVVM) pattern is a software architecture pattern which is a variant of Model-View-Controller(MVC) framework. Like MVC, the intent for this pattern is to separate the domain logic from the presentation logic. On top of it, it also separates the domain data from the view state. The MVVM architecture is commonly used in web development, especially for Single Page Applications. There are a few components in MVVM, namely the View, Model, and the ViewModel:
Model: Model holds the application’s business logic and the domain data.
View: View contains only the UI elements. The view interacts with the ViewModel via data binding, commands and notifications.
ViewModel: ViewModel encapsulates the presentation logic and data for the view. The ViewModel contains the state of the view and uses commands, data binding and notifications to communicate with the view.
The binding between the View and ViewModel is done allowing the View to observe the ViewModel. Whenever the ViewModel is updated, the View is synchronized with the ViewModel reactively.
Application of the MVVM pattern
Let’s consider an example of a blog application which employs an MVVM architecture and an user interaction which involves changing of our username. The diagram below outlines the interaction between the components in the MVVM architecture for this example.
When the user wants to change his username, he will key in the new username in the settings page, which is in View. The View will forward the action of changing the username to the ViewModel, where the ViewModel will send a request to update the username. When the Model has successfully changed the username, the ViewModel will then be notified. Subsequently, the ViewModel retrieves the updated data and updates their internal view state, which is an observable field of username. The View observes that the ViewModel has been modified and updates itself reactively using its own presentational logic.
Conclusion
The benefits of using MVVM as compared to the traditional MVC, is that developers are not required to know how the UI elements in the View work, they only need to handle the Model dealing with domain data and business logic and the View Model that deals with the state of the view. If the application needs to support many view representations of the same state, this pattern may help to manage the complexity of development.
However, because MVVM relies on data binding, the ViewModel consumes a considerable amount of memory as compared to MVC, which means huge applications that use the ViewModel regularly may become harder to run. The performance of MVVM applications would rely on the support of underlying technology.
I hope that you have gained better insight on MVVM from reading this article. Thank you.
