Vue (1)------Front-end development history

Vue (1)------Front-end development history

1 Overview

• Vue (pronounced /vjuː/, similar to view) is a progressive JavaScript 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, making it easy to integrate with third-party libraries (such as: vue-router: jump, vue-resource: communication, vuex: management) or existing projects.

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

2. Front-end knowledge system

• There is still a long way to go to become a true "Internet Java full-stack engineer", and front-end is a required course that cannot be avoided. The main purpose of this stage of the course is to lead Java background programmers to understand, understand and master the front-end, and take a step forward to become an "Internet Java full-stack engineer".

2.1. Three elements of front-end

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

2.2. Structure layer (HTML)

2.3. Presentation layer (CSS)

CSS cascading style sheet is a markup language, not a programming language, so it cannot customize variables, cannot quote, etc. 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, resulting in the need to write many repeated selectors in modular development;
• Without variables and a reasonable style reuse mechanism, logically related attribute values ​​must be repeatedly output in the form of literals, making it difficult to maintain;
• This resulted in an unreasonable increase in workload at work. In order to solve this problem, front-end developers will use a tool called [CSS preprocessor] to provide a style layer reuse mechanism missing in CSS, reduce redundant code, and improve the maintainability of style code. . It greatly improves the efficiency of front-end style development.

What is CSS preprocessor

• The CSS preprocessor defines a new language. The basic idea is to use a specialized programming language to add some programming features to CSS, and use CSS as a target to generate files. Then developers only need to use this Language for coding CSS. Translated into easy-to-understand terms, it means " using a special programming language to design the Web page style, and then convert 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 through the server, and has powerful functions. High analysis efficiency. need

  To learn the Ruby language, it is more difficult to get started than LESS.

• LESS: Based on NodeJS, processed through the client, easy to use. The function is simpler than SASS, and the parsing efficiency is also lower than SASS, but it is sufficient in actual development, so if our backend staff needs it, it is recommended to use LESS.

2.4. Behavior layer (JavaScript)

• JavaScript is a weakly typed script language. Its source code does not need to be compiled before being sent to the client for running. Instead, character codes in text format are sent to the browser, which is interpreted and run by the browser.

Native native JS development

• Native JS development means that we follow the [ECMAScript] standard development method, referred to as ES. The characteristic is that all browsers support it. Up to now, the ES standard has been released in the following versions: (The difference is that new features are gradually added)
  • ES3
  • ES4 (internal, not officially released)
  • ES5 (full browser support)
  • ES6 (commonly used, current mainstream version: packaged through webpack to support ES5)
  • ES7
  • ES8
  • ES9 (draft stage)

TypeScript Microsoft's 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 Helsberg (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. Therefore, many browsers cannot directly support TypeScript syntax and need to be compiled (compiled into JS) before it can be correctly executed by the browser. .

JavaScript framework

• JQuery: A well-known JavaScript library. Its advantage is that it simplifies DOM operations. Its disadvantage is that DOM operations are too frequent, which affects front-end performance; in the front-end's eyes, it is only used to be compatible with IE6, 7, and 8;
• Angular: The front-end framework acquired by Google was developed by a group of Java programmers. It is characterized by moving the back-end MVC model to the front-end and adding the concept of modular development. It cooperates with Microsoft and adopts TypeScript syntax development; it is friendly to back-end programmers. , not very friendly to front-end programmers; the biggest disadvantage is that the version iteration is unreasonable (such as 1st generation –> 2nd generation, except for the name, it is basically two things;)
• React: Produced by Facebook, a high-performance JS front-end framework; its characteristic is that it proposes a new concept [virtual DOM] to reduce real DOM operations and simulate DOM operations in memory, effectively improving front-end rendering efficiency; its disadvantage is that it is complicated to use , because you need to learn an additional [JSX] language;
• Vue : A progressive JavaScript framework. Progressive means gradually implementing new features, such as modular development, routing, state management and other new features. Its characteristic is that it combines the advantages of Angular (modularity) and React (virtual DOM);
• Axios : front-end communication framework; because the boundaries of Vue are very clear, it is to process the DOM, so it does not have communication capabilities. At this time, an additional communication framework needs to be used 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: Produced by Alibaba, a UI framework based on React
• ElementUI, iview, ice: Produced by Ele.me, a Vue-based UI framework
• BootStrap: an open source toolkit for front-end development launched by Teitter
• AmazeUI: also called "Meizi UI", an HTML5 cross-screen front-end framework

JavaScript build tools

• Babel: JS compilation tool, mainly used for new ES features not supported by browsers, such as compiling TypeScript
• WebPack: module packager, its main function is packaging, compression, merging and sequential loading

Note: The above knowledge points have sorted out all the skills required for WebApp development.

2.5, three ends identical

Hybrid App

The main purpose is to unify a set of codes at three ends (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 applet

For details, please see the WeChat official website. Here is an introduction to a framework that facilitates WeChat applet UI development: WeUI

2.6. Back-end technology

Front-end personnel also need to master certain back-end technologies in order to facilitate development. However, we Java back-end personnel know that the back-end knowledge system is extremely large and complex. Therefore, in order to facilitate front-end personnel to develop back-end applications, technologies such as Node JS have emerged.

The author of Node JS has claimed to give up Node JS (saying that the architecture is not well done and the heavy node modules may make the author unhappy) and start developing Deno with a new architecture

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

• Express: Node JS framework
• Koa: Express simplified version
• NPM: comprehensive project management tool, similar to Maven
• YARN: An alternative to NPM, similar to the relationship between Maven and Gradle

2.7. Mainstream front-end frameworks

Vue.js

View

iview is a powerful Vue-based UI library. It has many practical basic components that are richer than those of element ui. It mainly serves middle and back-end products of PC interfaces. The Vue component development model using a single file is developed based on npm+webpack+babel, supports ES 2015 high-quality, feature-rich and friendly API, and uses space freely and flexibly.

• Official website address: https://iviewui.com/

• Github：https://github.com/iview/iview

• iview-admin：https://www.worldlink.com.cn/en/osdir/iview-admin.html

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

Element UI

Element is a Vue UI component library maintained by Ele.me's front-end open source. It has complete components and basically covers all the components needed in the backend. The documentation explains it in detail and is rich in examples. Mainly used for developing PC-side pages, it is a relatively high-quality Vue UI component library.

• Official website address: https://element.eleme.cn/
• Github：https://github.com/ElemeFE/element
• vue-element-admin：https://panjiachen.github.io/vue-element-admin-site/zh/

Note: It belongs to the mainstream front-end framework and can be considered when selecting. Its main feature is that it has more desktop support.

ICE

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

• Official website address: https://ice.work/

• Github：https://github.com/alibaba/ice

Note: The main components are still based on React. As of the update of the blog on February 17, 2019, the support for Vue is not yet complete and is still in the wait-and-see stage.

VantUI

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

• Official website address: https://youzan.github.io/vant-weapp/#/intro
• Github：https://github.com/youzan/vant

AtUI

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 workflow, CSS style is independent, and a unified UI style can be maintained even if different frameworks are used.

• Official website address: https://at-ui.github.io/at-ui/#/zh
• Github：https://github.com/aliqin/atui

Cube Ul

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

• Official website address: http://www.cubeent.co.kr/

• Github：https://github.com/square/cube

hybrid development

Flutter
Flutter is Google's mobile UI framework, which can build high-quality native applications on Android and iOS in a very short time. Flutter works with existing code, it is used by developers and organizations around the world, and Flutter is free and open source.

• Official website address: https://flutterchina.club/

• Github：https://github.com/flutter/flutter

Note: Produced by Google, its main feature is to quickly build native APP applications. If you are doing hybrid applications, this framework is a must-have.

lonic
Lonic is both a CSS framework and a Javascript UI library. Lonic is currently the most promising HTML 5 mobile application development framework. Build applications through SASS, which provides many UI components to help developers develop powerful applications. It uses JavaScript MV VM framework and Angular JS/Vue to enhance the application. Provides two-way binding of data, making its use a common choice for web and mobile developers.

• Official website address: https://ionicframework.com/

• Official website document: http://www.ionic.wang/js_doc-index.html

• Github：https://github.com/tonib/kaichronicles

WeChat applet

mpvue
mpvue is a front-end framework developed by Meituan that uses Vue.js to develop mini programs. It currently supports WeChat mini programs, Baidu smart mini programs, Toutiao mini programs and Alipay mini programs. The framework is based on Vue.js. The modified runtime framework runtime and code compiler compiler implementation enable it to run in a mini program environment, thereby introducing the Vue.js development experience to mini program development.

• Official website address: http://mpvue.com/
• Git hub：https://github.com/Meituan-Dianping/mpvue

Note: Complete Vue development experience, and supports multi-platform mini program development, recommended.

WeUI
WeUI is a set of basic style libraries that are consistent with WeChat’s native visual experience. It is tailored by WeChat’s official design team for WeChat web pages and WeChat mini-programs, making users’ usage perception more unified. Contains various elements such as button, cell, dialog, toast, article, icon, etc.

• Official website address: https://weui.io/
• Github：https://github.com/Tencent/weui

3. Understand the evolution history of front and rear separation

Why is it necessary to separate the front and back?

3.1. Back-end-oriented MVC era

In order to reduce the complexity of development, the back-end is the starting point. For example, the use of Struts, Spring MVC and other frameworks is the MVC era of the back-end;
take the Spring MVC process as an example:

• Initiate a request to the front controller ( Dispatcher Servlet)
• The front-end controller requests HandlerMappinga search Handler, which can xmlbe searched based on configuration and annotations.
• The processor mapper HandlerMappingreturns to the front-end controllerHandler
• The front-end controller calls the processor adapter to executeHandler
• processor adapter to executeHandler
• HandlerReturn to the adapter after execution is completedModelAndView
• The processor adapter returns to the front-end controller ModelAndViewand ModelAndViewis an underlying object of the SpringMvc framework, including ModelandView
• The front-end controller requests the view parser to perform view parsing and parse it into a real view (JSP) based on the logical view name.
• View resolver returns to front-end controllerView
• The front controller does the view rendering, which populates the fields with model data (in objects ModelAndView)request
• The front controller responds with the results 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 architecturally. In order to make the View more pure, you can also use template engines such as Thyme leaf and Free marker to prevent Java code from being written in the template and make the division of labor between the front and back ends clearer.

shortcoming

• Front-end development relies heavily 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 the DEMO on the front end. After writing it, let the back end apply the template. The advantage is that DEMO can be developed locally and is very efficient. The disadvantage is that the template still needs to be installed on the backend, which may be wrong. After the template is installed, it still needs to be confirmed by the frontend, and the cost of back-and-forth communication and adjustment is relatively high;
  • Another collaboration model is that the front-end is responsible for all development on the browser side and View layer template development on the server side. The advantage is that UI-related codes can be written on the front end, and you don’t need to pay too much attention to the back end. The disadvantage is that front-end development is heavily bound to the back-end environment, and the environment has become an important factor affecting the efficiency of front-end development.

• The front-end and back-end responsibilities are entangled: the template engine is powerful and can still implement various business logic through the obtained context variables. In this way, as long as the front-end is weak, the back-end will often be required to write a lot of business code in the template layer. There is also a big gray area in the Controller. Functions such as page routing should be the most concerned about by the front-end, but they are. Implemented by the backend. The Controller itself and the Model are often entangled, and the business code that makes people grit their teeth often appears in the Controller layer. These problems cannot all be attributed to the quality of programmers, otherwise JSP will be enough.

• Limitations on the front-end: If performance optimization is done only 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] and [Big Pipe] to optimize performance.

Note: During this period (before 2005), including early JSP and PHP, it can be called the Web 1.0 era. I want to say something here, if you are a Java beginner, please stop taking some old technologies seriously, such as JSP, because times are changing, technology is changing, and everything is changing (quoting Zuckerberg (A well-known saying: the only constant is change itself); contemporary college students are still learning some old things in class and regard this knowledge as the key point. In fact, this is not the case. It can only be said that the dry information in your cognition is for the market. It’s just that it’s outdated a long time ago

3.2. The SPA era based on AJAX

Time goes back to 2005 AJAX(Asynchronous JavaScript And XML, asynchronous JavaScript and XML, old technology and new usage) was officially proposed and CDN began to be used as static resource storage, so the return of the JavaScript king appeared (before this, JS was used on web pages (Single Page Application) SPA (Single Page Application) with dog-skin plaster advertisements on it.

advantage

• In this mode, the division of labor between the front and back ends is very clear, and the key collaboration point between the front and back ends is the AJAX interface. **It looks so wonderful, but looking back, it's not much different from the JSP era. The complexity has moved from JSP on the server side to JavaScript on the browser, and the browser side has become very complicated. Similar to Spring MVC, the browser-side layered architecture began to appear 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 very painful; many teams have made similar attempts through interface rules, interface platforms, etc. With the interface rules precipitated together with the backend, it can also be used to simulate data, so that the front and back ends 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 JavaScript code to exceed 100,000 lines. The organization of a large amount of JS code, binding to the View layer, etc. are not easy tasks.

3.3. Front-end-oriented MVC era

The MVC pattern here is as follows:

• MVC (mainly synchronous communication): Model, View, Controller
• MVP (mainly asynchronous communication): Model, View, Presenter
• MVVM (mainly asynchronous communication): Model, View, View Model In order to reduce the complexity of front-end development, a large number of front-end frameworks have emerged, such as: , , , etc. The general principle Angular JSof Reactthese Vue.jsframeworks Ember JSis to layer them by type first, such as Templates, Controllers, Models, and then split within the layer, as shown below:

advantage

• The front-end and back-end responsibilities 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 parallel development, the simulation of test data is not difficult, 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 duties. This is quite interesting, as simple as the selection of template features, there are many details to pay attention to. The more powerful the better, what are the restrictions, what freedoms are left, how the code should be organized, all this design, it would take a book to explain.
• Deployment is relatively independent : product experience can be quickly improved

shortcoming

• Code cannot be reused. For example, the backend still needs to perform various verifications 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 simple.
• Fully asynchronous, bad for SEO. It is often necessary to implement a downgrade solution for synchronous rendering on the server side.
• Performance is not optimal, especially in a mobile Internet environment.
• SPA cannot meet all needs, and there are still a large number of multi-page applications. URL Design requires the cooperation of the backend and cannot be fully controlled by the frontend.

3.4. The full-stack era brought by Node JS

The front-end-oriented MVC model solves many problems, but as mentioned above, there are still many shortcomings. With the rise of Node JS, JavaScript has begun to have the ability to run on the server side. This means there could be a new R&D model

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 perform their respective duties:

• The Front-end Ul layer handles the presentation logic of the browser layer. Render styles through CSS, add interactive functions through JavaScript, and HTML generation can also be placed in this layer, depending on the application scenario.

• The Back-end Ul layer handles routing, templates, data acquisition, cookies, etc. Through routing, the front-end can finally control URL Design independently, so that whether it is a single-page application or a multi-page application, the front-end can freely control it. The backend can finally get rid of its strong focus on presentation and can instead focus on the development of the business logic layer.

Through Node, the WebServer layer is also JavaScript code, which means that some codes can be reused front and back, scenes that require SEO can be rendered synchronously on the server side, and performance problems caused by too many asynchronous requests can also be alleviated through the server side. The shortcomings of the former 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 return to the original development model, but it is a spiral return.

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

• The front-end needs to have a better understanding of server-side programming. For example, mastery of network knowledge such as TCP/IP.

• Efficient communication between Node JS layer and Java layer. In Node JS mode, everything is on the server side. RESTful HTTP communication may not be efficient. Communication through SOAP and other methods is more efficient. Everything needs to be verified.

• A proficient understanding of the department and operation and maintenance levels requires more knowledge points and practical experience.

• How to transition a large number of historical issues. This is probably the biggest obstacle.

3.5. Summary

To sum up, there is no good or bad model or technology, only whether it is suitable or not; the development idea of ​​front-to-back separation is mainly based on SoC (the principle of separation of concerns). The above models all allow the front-end and back-end Responsibilities are clearer and division of labor is more reasonable and efficient.