Level up your Vue App with MVVM

Vue.js is a progressive framework for JavaScript used to build interfaces and SPAs. Let’s have a closer look at what fires up the engine of this framework.

If Vue.js is the earth, the ViewModel (VM) layer of MVVM is the sun it revolves around. Think of MVVM as a 3 people organization.

• Model (M) is the talented person, who is highly skilled in storing data, but doesn’t know how to use it.
• View (V) is another talented person, who knows how to put some data in front of the end user, but doesn’t know what that exact data is. He can also listen to the user-actions like click or touch, but again is unaware of what to do with them.
• ViewModel (VM) comes to their rescue. He is that super talented guy with a binder that establishes the 2-way-communication between View and Model.

In the world of Vue, Model is the data access layer. It solely holds the data that is presented to the user, with the help of View. It is not aware of how to generate or save or process this data. All these business logics are known only to the ViewModel layer, which retrieves this data, manipulates it and defines a state.

A very apt example of manipulation would be date. The date may be stored in the Model in the unix time format, but the end user needs to see it in a more conceivable manner like, dd-mm-yyyy format.

View represents this state and defines its structure, layout and appearance i.e how will it be presented on the screen. It can also intercept the user’s interactions for ex.: when the user clicks, or reloads a page, or say, taps a screen, but doesn’t know how to handle them. So, after intercepting them, it passes on the information to ViewModel , which in turn decides how to respond to these user-actions.

This is what we popularly call two way data bindings. Let’s checkout a simple implementation of this.

Interactions between View and Model

Now let’s try to understand the above mechanism with the help of this example,

1. Here, the ViewModel is bound to the View ‘div’ with the id of ‘app’ and it supplies the View, with ‘name’ data from the Model. This is an example of ‘data-binding ’,where the data-properties are synced with the appropriate element in the View. As a result, the user sees this text on the screen - My name is vue.
2. Now, when the user clicks on the span, the click action is intercepted by the View, and passed on to the ViewModel’s ‘onClick’ method, which updates the ‘name’ data in the Model. This is a classic example of vue ‘directives’ (v-on). This change in the data, is watched by the ViewModel, which updates the state for the View. So, now the text that the user sees is - My name is mvvm.

Generally, in a real life SPA (Single Page Application) we add a lot more options to our Vue Instance (ViewModel) . We can add,

1. Router — We already break our View into Components. In an SPA, we would need to map these components to exact routes (paths, query params, etc). Vue-Router is popularly used for this.

2. Store — Since we break our application into components, most of the time, we would need to share some data between the components. And we are not always lucky to have a parent-child relation between them, where the data can be passed via props. So, we use a single centralized store for data, which is shared by all components of that app. Vuex is the popularly used package for this.

3. Component Frameworks — Sometimes, developer wants to take the help of existing component Libraries like Vuetify. We can pass them as an option too.

References

1. Vue.js official Site | https://vuejs.org/
2. MVVM | https://www.wintellect.com/model-view-viewmodel-mvvm-explained/