On the thinking of MVC and MVVM

Foreword: Recently the company gave me a Web project, its framework is Java Zkoss, it is not used in my usual MVC, it uses the MVVM pattern, because previously only understand MVC, often use such as SPRINGMVC, Struts2 and other frameworks, There is more understanding of the MVC pattern, and this zkoss framework is not used, it is AJAX-based, and it uses the MVVM pattern (which, of course, also provides the MVC pattern, if you want to use it). Today I want to talk about the pros and cons of the MVC and MVVM patterns and how to use them in your project.

This blog directory:

One: MVC pattern

Two: MVVM mode

Three: Advantages and disadvantages of the MVC and MVVM patterns

V: summary

One: MVC pattern

1.1:MVC is a classic software construction model, it is mainly divided into three layers, respectively, model, view, controller, the meaning of the expression is the mode layer, view layer, control layer, wherein the three layers can be abstracted out of many layers. But the main idea is to change, like our usual framework springmvc, STRUTS2, etc. are the MVC framework in the Java Web, followed the design paradigm of MVC. MVC pattern of the entrance on the view, the views layer is the page we usually see, such as a button, an input box, a link, etc. can be considered as part of the view layer, and then the view layer directly with the controller, a Web site is the most fundamental to achieve data transmission and circulation, And then return it to the page. When the view layer greeting controller, this time the controller goes to the model layer to get the packaged data model for data assembly, if it involves data crud, we need to re-partition the control layer, common such as: Service, Dao, Controller, The service layer is primarily about encapsulating the attributes of the business logic, and the DAO layer is dealing with the database. The ultimate goal of these re-partitioning is also to better implement business logic.

1.2: To give a very simple example, the user first by clicking on the Web page of an input box, for example, we often use the internet scene is to open Baidu, Baidu entered a keyword, then Baidu will appear according to the keyword query out the results of the page (we have to do is to display the value of a P tag), What did Baidu's website do? Baidu backstage how to achieve it? Let's do a simple simulation (of course, the real Baidu may not be the case, here is just an example):

<action= "search"><type= "text"  /><type= "Submit"/></  form>
<div>
<p id= "P1" ></p>
</div>

This is a simple form form, when the user clicks the Submit button, the form will be submitted to the server, where it will take seacrh this action, that is, a request to our server, if we are using the SPRINGMVC framework, Then there will be a controller to receive: The general situation will be as follows

@Controller
public class searchcontroller{

@RequestMapping ("Search") public String dosearch (@requestParam string Input,model Model) {       String result=dosearchservice.search (input);

       Model.serattribute ("userinput", result);
       return  "Searchres";   }
}

The controller typically maps the search request, gets the requested parameters, calls the service to query, and returns the result directly to the Searchres view, which accesses the model object and returns the results to the page based on the values entered by the user. This, in turn, uses JavaScript to pass the value to the P tag by asynchronously requesting Ajax, changing its innerhtml to complete the assignment process. (This step is temporarily omitted)

Two: MVVM mode

2.1:MVVM mode, words too literally, it is mainly divided into model, view, ViewModel. That is, the data model, views, views + model layers, note that it is not four layers but three layers. Many front-end frameworks adopt this mode, such as: Angular.js, Konckoutjs, etc., its biggest advantage is that it can implement automatic binding, the data is bound to the component UI, when the value in the UI changes, the corresponding model of the value of the following changes, This is the two-way binding mechanism, because it implements a binder between the view layer and the data model layer, which can manage two values, it listens to the value of the component UI, and as long as it changes, it transfers the value in the past to change the value in the model. The binder is flexible and can be one-way bound.

2.2: Let's follow the MVVM pattern to emulate the example of a search under the MVC structure, with the Zkoss framework as a demonstration:

<textbox value= "@binding (VM. Userinput) "/>

This is a view layer, the Zkoss is called Zul, which has a TextBox component, which is an input box, and its value value is bound to a field in ViewModel by @binding annotations called Userinput, This annotation is automatically implemented when the user enters a value, it binds the value to the Userinput field, and the value of the component in the front-end UI changes as the value of the field changes in ViewModel userinput. This indirectly saves a lot of programmer work, such as in the servlet we also need to use string Uivalue=request.getparamter ("Userinput"), in order to get its value.

Next, we need to use this value and then query. Here we can adopt the MVC pattern, think of the value of MVVM as a model, and then let MVC query, after the query we only need to assign the result to this userinput, it can automatically complete the binding, then we see in the page is the changed value.

 Public class searchviewmodel{

public string userinput, @RequestMapping ("Search") public string Dosearch (@requestParam String input) {       string result=dosearchservice.search (input);
       Userinput=reslut;         }}

Three: Advantages and disadvantages of the MVC and MVVM patterns

Advantages of 3.1:MVVM

3.1.1:MVVM automatic binding mechanism can greatly reduce the number of code we write, very convenient, everything tends to automation, data follow the page UI changes. In MVC, you need to go through the method to get the value of the component. Reduced our code volume to a certain extent, improving programming efficiency

3.2.2:MVVM data is more consistent because in the MVC model it is likely that an error occurs when a component gets a value, and there is no problem with MVVM, and the value and component bindings guarantee that the obtained values are reliable and consistent.

3.2.3:MVVM easier to understand, programmers have lower learning costs (but the internal package is more complex than the MVC pattern) and easier to learn.

Disadvantages of 3.2:MVVM

3.2.1: What is called the more automatic things have the probability of error, MVVM automatic binding mechanism, occasionally there will be an inflexible phenomenon, data binding will fail, I have met this phenomenon

The program built by 3.2.2:MVVM is bloated in the VM, because all the logic is concentrated in the VM, and there is no such problem in MVC. And the methods in the VM cannot be reused, you must re-copy the original method properties to

3.2.3:MVVM the robustness of the program is not as flexible as MVC,MVC, the operability is strong, and MVVM in meeting some complex components, whether flexibility or execution is not as MVC, which I have deep experience, in the framework of Zkoss use, When I met some of the more complex business logic, I realized that I couldn't do it with MVVM and had to switch to the MVC pattern.

Advantages of 3.3:MVC

3.3.1:mvc as a classic web framework model, it constructs the program is stable and reliable, and has a high degree of stratification, we often think of MVC is the business layer, the logical layer, the DAO layer, this distinct layered architecture to the program brings a highly reusable benefits, and clear hierarchy, Easy to build large applications

3.3.2:MVC is more operational for components, is adept at controlling various components, and organizes a wide range of relational data into a highly controllable package

3.3.3:MVC is more flexible, there are many implementations for the same business scenario, and MVVM is relatively single.

Disadvantages of 3.4:MVC

3.4.1:MVC mode is more code than MVVM, and the code is less readable and easier to read than MVVM.

3.4.2:MVC mode is generally more complex to implement, and not as relatively lightweight as MVVM.

The 3.4.3:MVC model strictly adheres to this pattern, resulting in smaller programs that have to be implemented in accordance with its layering requirements, which are more complex than a smaller application, and he requires that applications of both sizes must strictly adhere to the layered structure (and, of course, self-willed or non-compliant). Small service can be used without MVC mode, can choose MVVM faster and more convenient

On the thinking of MVC and MVVM