Detailed explanation of Vue's front-end system and front-end and back-end separation

Overview

Vue (pronounced /viu/, similar to view) is a progressive framework for building user interfaces, released in February 2014.

Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries (such as: vue-router:跳轉, vue-resource:通信, vuex:管理) or existing projects.

Official website: https://cn.vuejs.org/v2/guide/

Front-end knowledge system

There is still a long way to go to become a true "Internet Java full-stack engineer", among which "I am a big front-end" is a compulsory course that cannot be avoided. The main purpose of this stage of the course is to lead my Java backend programmers to recognize, understand, and master the front end, so as to take another step forward in becoming an "Internet Java full-stack programmer."

Three elements of the front end

• HTML (Structure): Hypertext Markup Language, which determines the structure and content of a web page
• CSS (expression): Cascading Style Sheets, which sets the presentation style of a web page
• JavaScript (behavior): is a weakly typed scripting language whose source code does not need to be compiled but is interpreted and run by the browser to control the behavior of the web page.

Presentation layer (CSS)

CSS is a markup language, not a programming language, so you cannot customize variables or reference them. In other words, it does not have any syntax support. Its main flaws are as follows:

• The syntax is not powerful enough. For example, it cannot be nested, which results in a lot of repeated selectors in modular development.
• There is no variable or reasonable style reuse mechanism, so logically related attribute values ​​must be repeatedly output in the form of literals, making it difficult to maintain;

This has resulted in a lot of unnecessary extra work for us. To solve this problem, front-end developers use a tool called a CSS preprocessor to provide a style layer reuse mechanism that is missing from CSS, reduce redundant code, and improve the maintainability of style code. Greatly improves the front-end development efficiency in terms of style.

What is a CSS preprocessor?

CSS preprocessor defines a new language. The basic idea is to use a special programming language to add some programming features to CSS, use CSS as the target to generate files, and then developers only need to use this language to do CSS coding. To put it in layman's terms, it means " using a specialized programming language to design the web page style, and then converting it into a normal CSS file through a compiler for use in the project."

What are the commonly used CSS preprocessors?

• SASS: Based on Ruby, processed by the server, powerful. High parsing efficiency. You need to learn the Ruby language, which is more difficult to get started than LESS.
• LESS: Based on NodeJS, processed by the client, easy to use. The functions are simpler than SASS, and the parsing efficiency is also lower than SASS, but it is sufficient in actual development, so our backend staff recommends using LESS if necessary.

Behavior layer (JavaScript)

JavaScript is a weakly typed scripting language. Its source code does not need to be compiled before being sent to the client for execution. Instead, the character codes in text format are sent to the browser for interpretation and execution.

Native JS development

Native JS development means that we develop according to the **[ECMAScript]** standard, abbreviated as ES, and its feature is that all browsers support it. As of the time of this blog post, the ES standard has released the following versions:

• ES3
• ES4 (internal, not officially released). ES5 (supported by all browsers)
• ES6 (commonly used, current mainstream version: webpack packages into ES5 support!)
• ES7
• ES8
• ES9

The difference is the gradual addition of new features.

TypeScript Microsoft Standard

TypeScript is a free and open source programming language developed by Microsoft. It is a superset of JavaScript and essentially adds optional static typing and class-based object-oriented programming to the language. Led by Anders Hejlsberg (father of C#, Delphi, TypeScript; founder of .NET).

The characteristic of this language is that in addition to the features of ES, it also incorporates many new features that are not within the scope of the standard, so many browsers cannot directly support TypeScript syntax and need to be compiled (compiled into JS) before they can be correctly executed by the browser.

JavaScript Frameworks

• jQuery: A well-known JavaScript framework, its advantage is that it simplifies DOM operations, but its disadvantage is that DOM operations are too frequent, affecting the front-end performance: in the eyes of the front-end, it is used only for compatibility with IE6, 7, and 8:
• Angular: A front-end framework acquired by Google, developed by a group of Java programmers. Its features include moving the backend MVC model to the frontend and adding the concept of modular development. It cooperates with Microsoft and uses TypeScript syntax for development. It is friendly to backend programmers but not so friendly to front-end programmers. Its biggest disadvantage is the unreasonable version iteration (e.g. 1st generation -> 2nd generation, basically two different things except for the name; Angular 6 has been launched by the time of posting this blog)
• React: Produced by Facebook, a high-performance JS front-end framework: Its feature is that it proposes a new concept **[Virtual DOM] to reduce real DOM operations, simulate DOM operations in memory, and effectively improve the front-end rendering efficiency; its disadvantage is that it is complicated to use because it requires learning an additional **[JSX]** language;
• Vue: A progressive JavaScript framework. The so-called progressive means gradually implementing new features, such as modular development, routing, state management and other new features. Its feature is that it combines the advantages of Angular (modularity) and React (virtual DOM);
• Axios: Front-end communication framework; because Vue has a clear boundary, which is to process DOM, it does not have communication capabilities. At this time, an additional communication framework is needed to interact with the server; of course, you can also directly choose to use the AJAX communication function provided by jQuery

UI Framework

• Ant-Design: A UI framework based on React from Alibaba
• ElementUl , iview , ice : produced by Ele.me, based on Vue's Ul framework
• Bootstrap: An open source toolkit for front-end development launched by Twitter.
• AmazeUl: also known as "Girl UI", an HTML5 cross-screen front-end framework

JavaScript build tools

• Babel: JS compilation tool, mainly used for new ES features that are not supported by browsers, such as compiling TypeScript
• WebPack: module packager, the main function is to package, compress, merge and load in sequence

Three-terminal unification

Hybrid App

The main purpose is to unify three terminals (PC, Android: .apk, iOs: ipa) and be able to call the underlying hardware of the device (such as sensors, GPS, cameras, etc.). There are two main packaging methods:

• Cloud packaging: HBuild -> HBuildX, produced by DCloud; API Cloud
• Local packaging: Cordova (formerly PhoneGap)

WeChat Mini Program

For details, please refer to the WeChat official website. Here is a framework that facilitates the development of WeChat applet UI: WeUl

Backend Technology

In order to facilitate development, front-end personnel also need to master certain back-end technologies, but our Java back-end personnel know that the back-end knowledge system is extremely large and complex, so in order to facilitate front-end personnel to develop back-end applications, technologies such as NodeJS have emerged.

The author of NodeJS has announced that he will give up NodeJS (the poor architecture and the cumbersome node_modules may have made the author unhappy), and started to develop Deno, a new architecture.

Since it is a backend technology, it definitely requires a framework and project management tools. The NodeJS framework and project management tools are as follows:

• Express: NodeJS framework
• Koa: Express Simplified
• NPM: Comprehensive project management tool, similar to Maven
• YARN: An alternative to NPM, similar to the relationship between Maven and Gradle

Mainstream front-end frameworks

Vue.js

iView

iview is a powerful Vue-based UI library with many practical basic components that are richer than elementui components. It mainly serves the mid- and back-end products of PC interfaces. Use the single-file Vue component development model based on npm + webpack + babel development, support ES2015 high-quality, feature-rich and friendly API, and use space freely and flexibly.

• Official website address.
• Github
• iview-admin

Note: It is a mainstream front-end framework and can be considered when selecting. Its main feature is that it supports more mobile terminals.

ElementUl

Element is a Vue Ul component library maintained by Ele.me's front-end open source. It has a complete set of components, basically covering all the components required for the backend. The documentation is detailed and the examples are rich. It is mainly used to develop PC pages and is a high-quality Vue Ul component library.

Note: It is a mainstream front-end framework and can be considered when selecting. Its main feature is that it supports more desktop terminals.

ICE

Feibing is the Alibaba team's mid- and back-end application solution based on React/Angular/Vue. Within Alibaba, more than 270 projects from almost all BUs are using it. Feibing includes a complete link from the design end to the development end, helping users to quickly build their own mid- and back-end applications.

Note: The main components are still based on React

VantUl

Vant Ul is a Vue component library implemented by Youzan's front-end team based on Youzan's unified specifications, providing a complete set of Ul basic components and business components. With Vant, you can quickly build pages with a unified style and improve development efficiency.

Ut

at-ui is a front-end UI component library based on Vue 2.x, mainly used for rapid development of PC website products. It provides a set of npm + webpack + babel front-end development workflows, with independent CSS styles, and can maintain a unified UI style even if different frameworks are used.

CubeUl

cube-ui is a sophisticated mobile component library developed by the Didi team based on Vue.js. Supports on-demand introduction and post-compilation, lightweight and flexible: strong scalability, can easily achieve secondary development based on existing components.

Wait for the UI…

Front-end development history

The MVC era dominated by the backend

• Initiate a request to the front controller ( DispatcherServlet )
• The front-end controller requests HandlerMapping to find Handler , which can be found based on xml configuration and annotations
• The handler mapper HandlerMapping returns Handler to the front controller
• The front controller calls the processor adapter to execute Handler
• Processor adapter to execute Handler
• Handler execution completes and returns ModelAndview to the adapter
• The external processor adapter returns ModelAndView.ModelAndView to the front-end controller. ModelAndView is an underlying object of the SprineMvc framework, including Model and View
• The front-end controller requests the view resolver to perform view resolution and resolves the logical view name into a real view (JSP)
• The view resolver returns View to the front controller
• The front controller performs view rendering, which populates the request field with model data (in the ModelAndView object)
• The front controller responds to the user

advantage

MVC is a very good collaboration model that can effectively reduce the coupling of code and allow developers to understand where the code should be written from an architectural perspective. In order to make the View more pure, you can also use template engines such as Thymeleaf and Freemarker to prevent Java code from being written into the template, making the division of labor between the front-end and back-end clearer.

shortcoming

• Front-end development is heavily dependent on the development environment and has low development efficiency. Under this architecture, there are two modes of front-end and back-end collaboration:
  • The first is to write a DEMO on the front end, and then let the back end use the template. The advantage is that DEMO can be developed locally, which is very efficient. The disadvantage is that the backend needs to apply the template, which may be wrong. After the application is completed, the frontend needs to confirm it, and the cost of communication and adjustment is relatively high.
  • Another collaboration mode is that the front end is responsible for all browser-side development and server-side View layer template development. The advantage is that all U-related codes only need to be written by the front-end, and the back-end does not need to be paid too much attention. The disadvantage is that the front-end development is heavily bound to the back-end environment, and the environment becomes an important factor affecting the efficiency of front-end development.
• The responsibilities of the front-end and back-end are unclear: the template engine is powerful and can still implement various business logics through the context variables obtained.
  

In this way, as long as the front end is a little weak, the back end will often require it to write a lot of business code in the template layer. There is also a big gray

The zone is the Controller, and functions such as page routing should be the most concerned by the front-end, but they are implemented by the back-end.

The Controller itself is often entangled with the Model, and the business code that makes people grit their teeth will appear in the Controller layer. These problems cannot be attributed entirely to the programmer's quality, otherwise JSP would be enough.

• Limitations of front-end performance: If performance optimization is only done on the front-end, the space is very limited, so we often need back-end cooperation. However, due to the limitations of the back-end framework, it is difficult for us to use technical solutions such as **【Comet】, 【BigPipe】** to optimize performance.

The SPA era brought by AJAX

Back in 2005, AJAX (Asynchronous JavaScript And XML) was officially proposed and CDN was used as static resource storage, which led to the return of JavaScript.

(Before that, JS was used to post dog-skin plaster ads on web pages) The SPA (Single Page Application) era.

advantage

In this mode, the division of labor between the front-end and back-end is very clear, and the key collaboration point between the front-end and back-end is the AJAX interface. It looks so wonderful, but looking back, it is not much different from the JSP era. The complexity has moved from the JSP on the server to the JavaScript on the browser, making the browser side very complex. Similar to Spring MVC, a layered architecture for browsers began to emerge in this era:

shortcoming

• Agreement on front-end and back-end interfaces: If the back-end interface is a mess, and if the back-end business model is not stable enough, then front-end development will be painful: Many teams have also made similar attempts, using interface rules, interface platforms, etc. With the interface rules deposited together with the backend, they can also be used to simulate data, so that the front-end and back-end can achieve efficient parallel development after agreeing on the interface.
• Complexity control of front-end development: SPA applications are mostly functional and interactive, and it is normal for the JavaScript code to exceed 100,000 lines. The organization of a large amount of JS code and its binding with the View layer are not easy tasks. The era of MV* dominated by front-end

The MV* mode here is as follows:

• MVC (mainly synchronous communication): Model, View, Controller.
• MVP (mainly asynchronous communication): Model, View, Presenter
• MVVM (mainly asynchronous communication): Model, View, ViewModel

In order to reduce the complexity of front-end development, a large number of front-end frameworks have emerged, such as Angular]s , React , Vue.js , Ember]s , etc. The general principle of these frameworks is to first layer by type, such as Templates , ontrollers , Models , and then split within the layer, as shown below:

advantage

• The responsibilities of the front-end and back-end are very clear : the front-end works on the browser side, and the back-end works on the server side. A clear division of labor allows for parallel development, making it easy to simulate test data, and the front end can be developed locally. The backend can focus on processing business logic and output RESTful and other interfaces.
• The complexity of front-end development is controllable: the front-end code is heavy, but reasonable layering allows the front-end code to perform its respective functions. This is quite interesting. Even something as simple as choosing template features requires a lot of consideration. It is not the case that the more powerful the better. What to restrict, what freedom to leave, how the code should be organized, all these designs would take a whole book to explain.
• Relatively independent deployment : can quickly improve product experience

shortcoming

• The code cannot be reused. For example, the backend still needs to perform various checks on the data, and the verification logic cannot reuse the browser-side code. If it can be reused, the back-end data verification can be relatively simplified.
• Fully asynchronous, not good for SEO. Often the server is also required to implement a downgrade solution for synchronous rendering.
• Performance is not optimal, especially in mobile Internet environments.
• SPA cannot meet all needs, and there are still a large number of multi-page applications. URL Design requires cooperation from the backend and cannot be fully controlled by the frontend.

The full-stack era brought by NodeJS

The MV* model, which focuses on the front part, solves many problems, but as mentioned above, it still has many shortcomings. With the rise of NodeJS, JavaScript has the ability to run on servers. This means there is a new model for R&D:

In this R&D model, the responsibilities of the front-end and back-end are very clear. For the front end, the two UI layers have their own responsibilities:

• Front-end Ul layer handles the presentation logic of the browser layer. Styles are rendered through CSS, interactive functions are added through JavaScript, and HTML generation can also be placed at this layer, depending on the application scenario.
• Back-end Ul layer handles routing, templates, data acquisition, cookies, etc. Through routing, the front-end can finally control the URL Design independently, so that whether it is a single-page application or a multi-page application, the front-end can adjust it freely. The backend can finally get rid of its strong focus on presentation and instead focus on the development of the business logic layer.

Through Node, the Web Server layer is also JavaScript code, which means that some codes can be reused before and after. Scenarios that require SEO can be rendered synchronously on the server side, and performance issues caused by too many asynchronous requests can also be alleviated through the server side. The shortcomings of the previous model can almost be perfectly solved by this model.

Compared with the JSP model, the full-stack model seems to be a regression, and it is indeed a regression to the original development model, but it is a spiral regression.

The full-stack model based on NodeJS still faces many challenges:

• The front end needs to have a deeper understanding of server-side programming. For example, mastering network knowledge such as TCP/IP.
• Efficient communication between NodeJS layer and Java layer. In NodeJS mode, everything is on the server side, RESTful HTTP communication may not be efficient, and communication through SOAP and other methods is more efficient. Everything needs to be verified before proceeding.
• A proficient understanding of deployment and operation and maintenance requires more knowledge points and practical experience.
• How to transition through a large number of historical issues. This may be the biggest obstacle.

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!