Front-end tiered mode MVC&MVVM

Early

Characteristics

The page is generated by the JSP, PHP and other engineers on the server side

A lot of business code is rubbed in JSP

The browser is responsible for showing what the server is showing and showing the control at the Web Server layer

Advantages

Simple and crisp, local from a Tomcat or Apache can develop, debugging anything is OK, as long as the business is not too complex.

Disadvantages

front end difficult to build local environment

Code reusability, extensibility, low maintenance

Back-end MVC development

Characteristics

• View: Displays the data.
• Model: Used to encapsulate data related to the business logic of an application and how data is processed.
• Controller: Handles user interaction, is responsible for forwarding requests, and processing requests (requesting or sending data to the model)

  Server-side MVC process:

  Client send request, server trigger controller--server to model various Operations server response request, render view-based model data, including HTML for the entire view The client re-renders the entire page, all the CSS has been calculated again, all the JS has been re-executed again, all the resources have been re-requested (although it may have been the cache)

Advantages

Code maintainability has improved significantly

Online template rendering is still done by Java, the formation of the HTML with Dynamic Data, more conducive to SEO

Disadvantages

With the advent of different terminals, the workload of the front end becomes larger. But the front end still relies on the back end (all developed in one project)

Front and back responsibilities still tangled

Front-end separation

Characteristics

Ajax brings a revolutionary change in web development. The front end and the application server are detached, and the front and back end communicate through Ajax.

The front-end division of labor, the frontend using AJAX and back-end data interaction, Operation view, and even control part of the route, the backend to provide services and data.

Advantages

The division of the front and back is very clear

Disadvantages

front-end logic is getting heavier, more complex, and routing poorly controlled. Excessive use of Ajax is bad for SEO. The front end does not hang heavy

This is not very different from the JSP era. Complexity is moved from the server's JSP to the browser's JavaScript, and the browser becomes complex

Front-end tiering

Characteristics

Back-end thinking in front of the application

Front-end code becomes also required to save data, process data, generate views (SPA), which leads to the emergence of the front-end MVC framework

The front-end MVC is just MVC in the back-end MVC view. The front-end MVC is designed to solve the problem of modular JS in complex front-end situations.

The occurrence of an event is such a process:
1. The user interacts with the app.
2. The Controller's event handler is triggered.
3. The controller requests the data from the model and gives it to the view.
4. The view renders the data to the user.

　　Model

All the data objects used to store the app. For example, there may be a user model that holds the list of users, their attributes, and all the logic associated with the model, and wraps the data into model instances when the controller fetches the data from the server or creates a new record. In other words, our data is object-oriented, and any function or logic defined on that data model can be called directly.

　　View

Presented to the user, the user interacts with it. In JavaScript applications, views are mostly made up of HTML, CSS, and JavaScript templates. In addition to the simple conditional statements in the template, the view should not contain any other logic.
Mixing logic into a view is a taboo for programming, not that MVC does not allow visual rendering-related logic to be included as long as it is not defined within the view. We classify visual rendering logic as "View Helper" (helper): Separate gadget functions related to views.

　　Controller

　　The link between the model and the view. The controller obtains events and inputs from the view, processes them (which are likely to contain the model), and updates the view accordingly. When the page loads, the controller adds event listeners to the view, such as listening for form submissions or button clicks. Then, when the user interacts with your app, the event trigger in the controller begins to work.

View in back-end MVC is all of the front-end MCV

The front-end MVC process (the front end is mostly mv+x, not necessarily a controller):

The client modifies the client model, client-side update, and the model-related client model to send a sync request to the server, which only includes what data has changed, whether the server audit data changes are legitimate, just reply to whether the modification is successful- > The client receives the success, does not have to do anything, does not succeed, changes the view which just changed to return, then notifies the user. (Of course, you can also include the audit mechanism in the client model, so that the response to the non-law data faster, but still have to retain the server-side audit)

As you can see, front-end MVC needs to deliver and receive much less data to the server, while the front end waits and renders a lot less work. In other words, it provides faster interaction feedback and also means a better user experience. At the same time, the load on the server side is slightly reduced, because basically only a restful API can be provided on the database.

Advantages

A clear division of labor that allows development to be parallel

The deployment is relatively independent and the product experience can be quickly improved.

Disadvantages

　　Developers make a lot of calls to the same Dom API in their code, handling tedious, redundant operations, and making the code difficult to maintain .

A large number of DOM operations degrade page rendering performance, slow loading, and impact the user experience. When the model changes frequently, developers need to proactively update to view, and when the user's actions cause the model to change, the developer also needs to synchronize the changed data into model, which is not only cumbersome, but also difficult to maintain the complex and changeable data state. MVVM mode

Characteristics

Other frameworks propose the MVVM pattern, which replaces the Controller with the View model.

• Model
• View
• View-model: A simplified Controller that provides data that is processed for View without other logic.

Nature: View binding View-model, which is strongly coupled to the data model. The changes in the data are reflected in real time on the view and do not need to be processed manually.

Advantages　

The complexity of front-end applications has been different, exposing three pain points: developers in the code to call the same DOM API, processing cumbersome, operational redundancy, making the code difficult to maintain.　　A large number of DOM operations degrade page rendering performance, slow loading, and impact the user experience.　　When the model changes frequently, developers need to proactively update to view, and when the user's actions cause the model to change, the developer also needs to synchronize the changed data into model, which is not only cumbersome, but also difficult to maintain the complex and changeable data state.　　Early JQuery was designed for the front-end to operate the DOM more succinctly, but it only solved the first problem, and the other two problems were always with the front end.　　The advent of MVVM perfectly solves the above three problems. The three parts of MVVM: Model layers represent data models and can also define business logic for data modification and manipulation in model; View represents the UI component, which is responsible for transforming the data model into a UI display, ViewModel is an object that synchronizes view and model. There is no direct connection between the View and the Model, but it interacts with the ViewModel. The ViewModel connects the view layer to the model layer through two-way data binding, and the synchronization between the view and model is completely automatic without human intervention, so developers need to focus on the business logic without manually manipulating the DOM, without needing to focus on the synchronization of the data state. , complex data state maintenance is managed entirely by MVVM.

Disadvantages

The code cannot be reused. For example, the backend still needs to do various checks on the data, and the verification logic cannot reuse the browser-side code. If it can be reused, then the back-end data validation can be relatively simplistic.
Full async, bad for SEO. The service side is often required to do the simultaneous rendering of the downgrade scheme.
Performance is not optimal, especially in the mobile Internet environment.

Ref: 51025127

https://github.com/lifesinger/blog/issues/184

Front-end tiered mode MVC&MVVM