MVVM pattern

What is M-V-VM pattern?

M-V-VM stands for Model-View-ViewModel, which is a software architectural design pattern invented by Microsoft. The purpose of using MVVM is to separate the design of User Interfaces (UI) to the development of the business logic (or the back-end data models). By such separation, the developers of different teams can work freely on their own stuffs.

For example, the UX team can design, implement and customize the UI on the front-end to whatever they want while the Dev team can develop the codes on the back-end without worrying about the UI, and in the mean time, the Testing team can execute the tests on the completed stuffs on both ends at the same time. The only thing that ties those teams together is that they need to know what are the data being sent from the Model to the View, and how it is formatted. Here comes the ViewModel. Then what exactly means by MVVM?

• The M for Model: is the layer of real data model of the application, which are stored in a Database Engine. The Dev team will write codes to read all the necessary data from database and store it to a variable on back-end code. They may also need to process data into a specific format, then pass it to the client-side ViewModel. The model is solely responsible for handling information, but not the behaviors.
• The V for View: is the presentation of data in a user-friendly and interesting appearance. While the model works with information, the view should only display the data and handle user's behaviors. View is something that users see and interact with.
• The VM for ViewModel: (or simply model on the view) resides on client-side and can be considered as the Controller in the View. Model passes data to ViewModel in the format of JSON or XML (the most common formats). The ViewModel handles data changes on client-side and updates the View in real-time manner. All the changes in data will then be sent to server-side to update the Model. The communication between Model and ViewModel is done via AJAX calls, which send requests to the server-side to invoke some method and get back the server response.

The below diagrams demonstrate the basis of MVVM pattern and a simple Client-Server communication.

In the early time, MVVM was integrated mainly in some .NET systems, however, it is being utilised recently and developed by many client-side Javascript Frameworks. Some of the most popular Javascript frameworks include ReactJS, Angular JS, Vue.JS, KnockOut.JS and EmberJS.

What is the difference between M-V-VM and M-V-C?

M-V-C is a short-hand denotion of Model-View-Controller. MVC is also a tructural design pattern that was first introduced in the 1970's and has then been emerging since the 1980's. There are, nowadays, a lot of variants of MVC pattern such as Model-View-Adapter (M-V-A), Model-View-Presenter (M-V-P) and M-V-VM, etc. MVC allows the development processes to be simultaneous (eg. different people can work on different features at the same time), and helps increase the reusability, maintainability and modifiability of the source code. In order to achieve such advantages, MVC aims to increase the cohesion (the methods of a certain controllers are effectively grouped together, no logics of this controller can be found in another one), and decrease the coupling of the components (each component should be designed to handle its own tasks and only dependent on other components as fewer as possible).

Despite of many benefits that MVC can offer, there are some disadvantages and the most noticeable one is Code navigatability. In fact, it would be hard, even impossible, to switch to another framework or programming language once the development process has started. Even updating to the newer version of the same programming language or framework could also be a headache to the developers if the framework does not properly support updating. Other factors could be: (1) developers need to be expertise in multiple technologies to work in MVC, and (2) developers should regularly refactor the source code, which is contributed by many people, to maintain the level of cohesion and coupling.

So, we can see MVC and MVVM are having the M (model) and the V (view) in common. Basicly the MVVM is an improved variant of the MVC to serve in some specific purposes of software design and architecture. The difference between the Controller and the ViewModel, can be understood as:

• The ViewModel is managed by Javascript on client-side while the Controller is implemented by some programming language on server-side. Both of them handle data, but the ViewModel keeps the records of data in browser's session data and send back to some method on server-side to update model, while the Controller gets data from model and passes data to view without storing any records of data.
• The View in MVC also contains server-side programming language which read the data that are passed in to populate it on the layout. In contrast, the View in MVVM is purely HTML and Javascript. AJAX gets data from server-side and stores it in ViewModel. It then uses a technique called "two-ways data binding" to display data in the layout. Interestingly in MVVM on server-side, the logics could also be designed in MVC structure with the Controller passing data to an AJAX call from the ViewModel.
• The Controller in MVC never knows the state of the View. It just selects a view and passes data in. Whenever some change ocurs to the data, such changes will be sent to the Controller to update the model immediately and the view will re-rendered (reloaded). Meanwhile the ViewModel is bounded to the view, it keeps track of the view's state. Any changes will be updated in the view right away but may not have been updated in the server-side model.

The model data and ViewModel are required to be formated as closely as possible, so that the confusions between different development teams can be lowered and communication is easy. Other than that, there are some other advantages of MVVM:

• All those advantages that are offered by applying MVC pattern on server-side source code.
• Fasten the development processes by allowing parallel feature implementations.
• Elegant, modern and interactive UI with real-time updates on every user interaction.
• Server-side framework and programming language can be changed or updated without worrying.
• Client-side can be built on any platforms (web, computers, mobile...) and communicate to only one server-side API service.
• In terms of testing, tester can generate sample data to test the view and the business logics separately.

M-V-VM disadvantages

While some people may argue that they can create a website with those real-time updates without the aid of MVVM, just using Javascript, JQuery and AJAX. Well, they may also need think of how much of efforts and time they will need to invest in the project for implementation, testing, modification and maintaining, how good and stunning the features would be, and how hard for themselves or someone to get their codes after a time of leaving. Therefore with M-V-VM design pattern, they can not only make their codes clean, bug-free and maintainable, but they can also enable the project to be extendable with ease in a time later. Although the advantages are undeniable, MVVM also has some implicit disadvantages:

• Security: Since all data are saved on client-side Javascript (ViewModel or Session Data) before being sent to the server, attackers can perform some kinds of Cross-Site Scripting, Cross-Site Request Forgery or File Inclusion on the website without paying much efforts.
• Bad Coding Practice: It is required that the developers should own a deep knowledge in Javascript and conform to the best practices to handle all coding situations properly. A memory leak may render the website to be slow down significantly even on flag-ship hardwares.
• Javascript Disabled: Client's browser must enable Javascript to run the website.
• MVVM Overhead: This is a criticism that comes from John Gossman, the inventor of MVVM himself. Accordingly, in the large-scale projects, it is difficult for developers to generalize the ViewModel and generate the exact model data format. Besides, storing large amount of data (photos, sounds...) on client's web browser may lead to large memory consumption, resulting in bad user experience (lag, slow responding, app crashed...)

This post reflects my researches about MVVM. To find out more, please click on YUGIOH Mini Deck Demo to take a look at MVVM as a single-page application.