Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to understand the front-end system and the front-end separation of the Vue". In the daily operation, I believe that many people have doubts about how to understand the front-end system and the front-end separation of the Vue. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful for everyone to answer the question of "how to understand the front-end system and the front-end separation of Vue". Next, please follow the editor to study!

Catalogue

Overview

Front-end knowledge system

Front-end three elements

Presentation layer (CSS)

Behavior layer (JavaScript)

JavaScript framework

UI framework

JavaScript build tool

Three-terminal unity

Mixed development (Hybrid App)

WeChat Mini Program

Back-end technology

Mainstream front-end framework

ElementUl

ICE

VantUl

AtUl

CubeUl

Front-end development history

Based on the SPA era brought by AJAX

The MV* mode here is as follows:

The full Stack era brought by NodeJS

Overview

Vue (pronunciation / viu/, is similar to view) is a progressive framework for building a user interface, 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, not only

Easy to use, but also easy to integrate with third-party libraries (such as vue-router: jump, vue-resource: communication, vuex: management) or existing projects.

Front-end knowledge system

There is still a long way to go to become a real "Internet Java full stack engineer", among which "my 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 background programmers to understand the front end, to understand the front end, to master the front end, and to take another step forward to become an "Internet Java full stack engineer".

Front-end three elements

HTML: hypertext markup language (Hyper Text Markup Language), which determines the structure and content of a web page

CSS (presentation): cascading style sheets (Cascading Style Sheets) to set the presentation style of a web page

JavaScript (behavior): 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 web pages.

Presentation layer (CSS)

CSS cascading stylesheet is a markup language, not a programming language, so it cannot customize variables, references, etc., in other words, it does not have any syntax support. Its main drawbacks are as follows:

The syntax is not strong enough, such as the inability to nest writing, resulting in the need to write a lot of repetitive selectors in modular development

Without variables and reasonable style reuse mechanism, logically related attribute values must be output repeatedly in the form of literals, which makes it difficult to maintain.

This has caused us to increase a lot of workload in our work for no reason. In order to solve this problem, front-end developers will use a tool called CSS preprocessor to provide the missing style layer reuse mechanism of CSS, reduce redundant code, and improve the p maintainability of style code. The development efficiency of the front end in style is greatly improved.

What is a CSS preprocessor

CSS preprocessor defines a new language, its basic idea is to use a special programming language, add some programming features to CSS, take CSS as the target to generate files, and then developers only need to use this language for CSS coding. Translated into easy-to-understand words is "using a special programming language, Web page style design, and then converted into a normal CSS file through the compiler for the project to use."

What are the commonly used CSS preprocessors

SASS: based on Ruby, through server-side processing, powerful. The parsing efficiency is high. Need to learn Ruby language, it is more difficult to use than LESS.

LESS: backbone NodeJS, handled by the client, easy to use. The function is simpler than SASS, and the parsing efficiency is lower than SASS, but it is enough in actual development, so we backstage staff recommend using LESS if necessary.

Behavior layer (JavaScript)

JavaScript is a weakly typed scripting language whose source code does not need to be compiled before it is sent to the client to run, but sends the character code in text format to the browser to be interpreted and run by the browser.

Native native JS development

Native JS development, that is, let's develop in accordance with the * * [ECMAScript] * * standard, referred to as ES, is characterized by all

All browsers support it. As of the current blog release time, the ES standard has been released as follows:

ES3

ES4 (internal, not officially released). ES5 (full browser support)

ES6 (commonly used, current mainstream version: webpack is packaged into ES5 support!)

ES7

ES8

ES9

The difference is to gradually add 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 types and class-based object-oriented programming to the language. Led by Anders Hellsberg (father of C #, Delphi, TypeScript; founder of NET).

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

JavaScript framework

JQuery: the well-known JavaScript framework has the advantage of simplifying DOM operations, while the disadvantage is that DOM operations are too frequent, affecting front-end performance: it is only used in front-end eyes to be compatible with IE6, 7, 8:

Angular: the front-end framework acquired by Google, developed by a group of Java programmers, is characterized by moving the background MVC model to the front end and adding the concept of modular development, working with Microsoft to develop using TypeScript syntax; friendly to background programmers, not very friendly to front-end programmers: the biggest disadvantage is that the version iteration is unreasonable (for example: first generation-> second generation, except the name, it is basically two things Angular6 has been launched by the time of publication of the blog)

React:Facebook, a high-performance JS front-end framework: it is characterized by a new concept * * [Virtual DOM] to reduce real DOM operations and simulate DOM operations in memory, effectively improving the front-end rendering efficiency; the disadvantage is that the use is complex, because you need to learn an additional [JSX] * * language.

Vue: a progressive JavaScript framework, which means to gradually implement new features, such as modular development, routing, state management, and so on. It combines the advantages of Angular (Modularization) and React (Virtual DOM).

Axios: front-end communication framework; because the boundary of Vue is very clear, it is to deal with DOM, so it does not have the communication capability, so you need to use an additional communication framework 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 React-based UI framework produced by Alibaba

ElementUl, iview, ice: ele.me, Ul framework based on Vue

Bootstrap:Twitter launched an open source toolkit for front-end development.

AmazeUl: also known as "Girl UI", a HTML5 cross-screen front-end framework

JavaScript build tool

Babel:JS compilation tool, mainly used for new ES features that browsers do not support, such as compiling TypeScript

WebPack: module baler, mainly used for packaging, compressing, merging and sequential loading

Three-terminal unified hybrid development (Hybrid App)

The main purpose is to achieve the unification of a set of codes (PC, Android:.apk, iOs:ipa) and be able to call the underlying hardware of the device (such as sensor, GPS, camera, etc.). There are two main packaging methods:

Cloud packaging: HBuild-> HBuildX,DCloud products; API Cloud

Local packing: Cordova (formerly PhoneGap)

WeChat Mini Program

For details, see Wechat's official website. Here is an introduction to a framework that is convenient for WeChat Mini Programs's UI development: WeUl

Back-end technology

Front-end staff also need to master some back-end technology in order to facilitate development, but we Java background staff know that the background knowledge system is extremely large and complex, so in order to facilitate front-end staff to develop background applications, there is a technology like NodeJS.

The author of NodeJS has claimed to give up NodeJS (saying that the poor performance of the architecture, coupled with the clunky node_modules, may upset the author) and begin to develop Deno with a new architecture.

Since it is a background technology, it certainly requires frameworks and project management tools. The NodeJS framework and project management tools are as follows:

Express:NodeJS framework

Simplified version of Koa:Express

NPM: an integrated project management tool, similar to Maven

An alternative to YARN:NPM, similar to the relationship between Maven and Gradle

Mainstream front-end framework

Vue.js

IView

Iview is a powerful Vue-based Ul library. There are many practical basic components that are richer than those of elementui, mainly serving the middle and background products of the PC interface. Using single-file Vue component development mode based on npm + webpack + babel development, support ES2015 high-quality, feature-rich and friendly API, free and flexible use of space.

Address on the official website.

Github

Iview-admin

Note: it belongs to the front-end mainstream framework and can be considered for use when selecting the model. The main feature is that the mobile terminal supports more.

ElementUl

Element is an open source Vue Ul component library maintained at the front end of ele.me. It has a full range of components and basically covers all the components needed in the background. The documentation is detailed and the examples are rich. Mainly used for the development of PC-side pages, is a high-quality Vue Ul component library.

Note: it belongs to the front-end mainstream framework and can be considered when selecting the model. The main feature is that there is more support on the desktop side.

ICE

Feibing is a React/Angular/Vue-based application solution for Alibaba's team. Within Alibaba, there are already more than 270 projects from almost all BU. Feibing includes a complete link from the design side to the development side to help users quickly build their own mid-background applications.

Note: React is still the main component.

VantUl

Vant Ul is a Vue component library implemented by the like front-end team based on the unified specification, which provides a complete set of Ul basic components and business components. Through Vant, you can quickly build a page with a unified style and improve the efficiency of development.

AtUl

At-ui is a front-end Ul component library based on Vue 2.x, which is mainly used for the rapid development of PC website products. It provides a set of npm + webpack + babel front-end development workflow, CSS style independent, even if the use of different framework implementations can maintain a unified UI style.

CubeUl

Cube-ui is an exquisite mobile component library based on Vue.js developed by Didi team. It supports on-demand introduction and post-compilation, lightweight and flexible, strong expansibility, and can easily realize secondary development based on existing components.

Wait, UI...

The MVC era in which the history of front-end development is dominated by back-end

Initiate a request to the front-end controller (DispatcherServlet)

The front-end controller requests HandlerMapping to find Handler, which can be found according to xml configuration and comments.

Processor mapper HandlerMapping returns Handler to the front-end controller

The front-end controller calls the processor adapter to execute the Handler

Processor adapter to execute Handler

Handler execution completed returns ModelAndview to the adapter

The external adapter returns ModelAndView.ModelAndView to the front controller, which is an underlying object of the SprineMvc framework, including Model and View

The front-end controller requests the view parser to parse the view and resolve it to a real view (JSP) according to the logical view name.

The view parser returns View to the front-end controller

The front controller performs view rendering, which populates the model data (in ModelAndView objects) into the request domain

The front-end controller responds to the result to the user

Advantages

MVC is a very good collaboration model, which can effectively reduce the coupling of code and architecturally let developers know where the code should be written. In order to make View more pure, you can also use template engines such as Thymeleaf and Freemarker to make it impossible to write Java code into the template and make the division of labor between the front and back ends clearer.

Shortcoming

Front-end development is heavily dependent on the development environment, and the development efficiency is low. Under this architecture, there are two modes of front-end collaboration:

The first is to write DEMO at the front end, and then let the back end set up the template. The advantage is that DEMO can be developed locally, which is very efficient, but the disadvantage is that it still needs a back-end set of templates, which may be wrong, and the front end needs to be determined after the set, so the cost of communication and adjustment back and forth is relatively high.

Another collaboration model is that the front end is responsible for all browser-side development and server-side View layer template development. The good news is that the U-related code is written at the front end, and the back end does not need to pay too much attention to it. The deficiency 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 front and back end responsibilities are entangled: the template engine is powerful and can still implement a variety of business logic through the context variables you get.

In this way, as long as the front end is a little weaker, it will often be required by the back end to write a lot of business code in the template layer. And a big gray.

The zone is Controller, page routing and other functions are supposed to be the focus of the front end, but they are implemented by the back end.

Controller itself is often entangled with Model, and the business code that makes people gnash their teeth will appear in the Controller layer. These problems can not all be attributed to the literacy of programmers, otherwise JSP is enough.

Limitations to the frontend: the space for performance optimization in the frontend is very limited, so we often need back-end cooperation, but due to the limitations of the back-end framework, it is difficult for us to use * * [Comet], [BigPipe] * * and other technical solutions to optimize performance.

Based on the SPA era brought by AJAX

Back in 2005, AJAX (Asynchronous JavaScript And XML, asynchronous JavaScript and XML, old technology and new usage) was formally proposed and began to use CDN as static resource storage, and the return of the king of JavaScript appeared.

(before that, JS was used to post dog skin ointment ads on the web.) the era of SPA (Single Page Application) single-page application.

Advantages

In this mode, the division of labor between the front and rear is very clear, and the key point of cooperation between the front and rear is the AJAX interface. It looks so wonderful, but in retrospect, it's not much different from the era of JSP. The complexity moves from the JSP of the server to the JavaScript of the browser, and the browser becomes very complex. Similar to Spring MVC, a hierarchical architecture on the browser side began to emerge in this era:

Shortcoming

Front-end interface agreement: if the back-end interface is a mess, if the back-end business model is not stable enough, then the front-end development will be very painful: many teams have similar attempts to do it through interface rules, interface platform, and so on. With the interface rules precipitated with the back end, it can also be used to simulate data, so that the front end and back end can achieve efficient parallel development after the agreed interface.

Complexity control of front-end development: SPA applications are mostly functional interactive, and it is normal for JavaScript code to exceed 100, 000 lines. It is not easy to organize a lot of JS code, bind to the View layer, and so on. Front-end-oriented MV* era

The MV* mode here is as follows:

MVC (synchronous communication primarily): Model, View, Controller.

MVP (Asynchronous Communication primarily): Model, View, Presenter

MVVM (Asynchronous Communication primarily): 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 layer by type, such as Templates, Controllers, Models, and then split in the layer, as shown below:

Advantages

The responsibilities of the front and back end are clear: the front end works on the browser side and the back end works on the server side. A clear division of labor can make the development parallel, the simulation of test data is not difficult, and the front end can be developed locally. The back-end can focus on the processing of business logic and output RESTful and other interfaces.

The complexity of front-end development can be controlled: the front-end code is heavy, but reasonably layered, so that the front-end code can do its own job. This piece is very interesting, such as the selection of template features, there are a lot of exquisite. It is not the stronger the better, what to restrict, what freedom to leave, how the code should be organized, all of which take the thickness of a book to explain.

Deployment is relatively independent: you can quickly improve the product experience

Shortcoming

The code cannot be reused. For example, the back-end still needs to do all kinds of verification on the data, and the verification logic cannot reuse the code on the browser side. If it can be reused, the back-end data validation can be relatively simple.

All the steps are different, which is bad for SEO. The server side is often required to do synchronous rendering of the degradation scheme.

Performance is not the best, especially in the mobile Internet environment.

SPA can not meet all the needs, there are still a large number of multi-page applications. URL Design needs the cooperation of the back end, and the front end cannot fully control it.

The full Stack era brought by NodeJS

The previous paragraph-based MV* mode solves a lot of problems, but as mentioned above, there are many shortcomings. With the rise of NodeJS, JavaScript began to have the ability to run on servers. This means that there is a new research and development model:

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

Front-end Ul layer handles the presentation logic of the browser layer. Through the CSS rendering style, adding interactive features through JavaScript, the generation of HTML can also be placed on this layer, depending on the application scenario.

Back-end Ul layer handles routing, templates, data acquisition, Cookie, and so on. 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 be regulated freely. The back end can finally get rid of the strong focus on presentation and focus on the development of the business logic layer.

The Node,Web Server layer is also JavaScript code, which means that part of the code can be reused before and after, scenarios that require SEO can be rendered synchronously on the server, and the performance problems caused by too many asynchronous requests can also be alleviated through the server. The deficiency of the former model can almost be solved perfectly through this model.

Compared with the JSP model, the full stack model looks like a return, and it is indeed a return to the original development model, but a spiral upward return.

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

The front end needs to have a better understanding of server-side programming. Such as the mastery of network knowledge such as TCP/IP.

Efficient communication between NodeJS layer and Java layer. In NodeJS mode, it is all on the server side, so RESTful HTTP communication may not be efficient, and communication through SOAP and other ways is more efficient. Everything needs to move forward in verification.

Skilled understanding of deployment and operation and maintenance requires more knowledge and practical experience.

How to make the transition of a large number of problems left over from history. This may be the biggest resistance.

At this point, the study on "how to understand the front-end system and front-end separation of Vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.