MVVM

When we build an application or a program, it is important to consider a structure and a design pattern.

One of the most famous design patterns is a Model-View-ViewModel(MVVM) pattern.

MVVM was created by Microsoft architects Ken Cooper and John Gossman, and it is widely used in Windows Presentation Foundation (WPF), which runs on Microsoft’s .NET.

MVVM consists of three key components: Model, View, and ViewModel.

First, let's talk about the Model.

The Model:

The model is the domain object that represents and contains the data and information that a program needs.

For example, if you create a model "Home", it may contain the address, the number of floors, and the number of rooms. 

One unique thing about the model is that model does not contain behaviors or services that manipulate the information.

The View:

The view is what the user sees on their screen and where the user interacts with the program.

It is one of the UI components like HTML, CSS, and jQuery. 

The view shows the current state of the program and sometimes the status of models.

Not only that, but a view can also have behaviors associated with it, such as accepting user input such as key presses, mouse movements, and touch gestures which ultimately manipulate the properties of the model.

Especially in the MVVM pattern, the view contains behaviors, events, and data bindings that are related to the model and the view model; however, it still does not know about what the model or the viewmodel does.

The ViewModel:

The viewmodel is a key component of the MVVM pattern.

It separates the view and the model but also connects the two.

The viewmodel has methods, commands, and other tools to manipulate the data in models.

Now, let's move our attention to the view, the viewmodel, and the model communicate and interacts with each other.

The View and the ViewModel:

1. The view and the viewmodel communicate via data-binding, method calls, properties, events, and messages

2. The viewmodel exposes not only models but other properties (such as state information, like the “is busy” indicator) and commands

The ViewModel and the Model:

1. The viewmodel may expose the model directly, or properties related to the model, for data-binding

One key idea you need to know is that the View and the Model do not communicate with each other directly.

They always have to go through viewmodel in order to exchange information or data.

Now you know the basics of what MVVM pattern is.

Later, I will deal with other key concepts and information you need to know in order to implement the MVVM pattern into your application.

References:

https://www.techtarget.com/whatis/definition/Model-View-ViewModel

https://www.guru99.com/mvc-vs-mvvm.html

https://www.zkoss.org/zkdemo/getting_started/mvvm