Looking at MVVM

MVVM is a design approach to building software. The name is a little confusing, and it makes you wonder if they were trying to be clear or if they just liked the symmetry that the letters created. The design pattern was used extensively in Microsoft and Apple development products.

MVVM stands for Model View ViewModel.

Let's start with the View. It is where the HTML is converted to Document Object Model (DOM).

The View interacts with an object called a ViewModel. The ViewModel is where the presentation logic is stored. The Model is the part that stores the data and business logic. This is commonly passed to the browser as a JSON object.

Let's clear up a confusing point right now. When charted out, most people draw out the relationship as View-ViewModel-Model, which would be VVMM. Don't get caught up in the semantics; just take a look at the following diagram to understand what they mean by MVVM:

Your data gets stored in the Model, but you do not interact with the data directly. You use the ViewModel to interact with the data. You should also note that you don't need to be an expert with the MVVM pattern, as the concepts in practice are very simple. The evidence of this is the simplicity of binding elements to the ViewModel.