Front-end framework, understanding of vue3

Front-end framework, understanding of vue3

The first question, how did the front end do it before there was no framework?

Earlier, I used Dreamweaver to write html static pages, and then deployed them to a computer's IIS (Internet Information Services). When this page is requested, return this html file.
The specific process is:
first, the browser parses the html file to build a DOM tree, and then parses the CSS file to build a rendering tree. After the rendering tree is built, the browser starts to lay out the rendering tree and draw it on the screen. In addition to performance, we also need to interact with the page, so JS is inseparable, and the parsing and running of JS is done by the JS engine in the browser. The most famous one is V8 released by Google in 2008.

Therefore, the code running in the browser is nothing more than these three types: HTML + CSS + JS.

• The full name of HTML (HyperText Markup Language)
  is Hypertext Markup Language. It is not a programming language, but a markup language used to tell browsers how to organize pages. It consists of a series of elements (elements) that can be used to surround different parts of the content to make it appear or work in a certain way.

• CSS (Cascading Style Sheets) stands for Cascading Style Sheets, which are used to style and layout web pages - such as changing the font, color, size and spacing of web content, dividing content into multiple columns or adding animations and other decorations type effect. It selects the above-mentioned HTML elements through a selector, and then adds colors, spacing, etc. to the selected elements.

• JS (JavaScript) is a lightweight, interpreted programming language with functions first. It can make the page move, so that the user can interact with the front end, and the front end can interact with the back end.

At this point, we can build a front-end page where we can see the news. Every time the web page is refreshed, the whole process will go through it again and then perform a global rendering. Even a small data request needs to be rendered globally.

Ajax, born in 2005, promoted the separation of front and back ends. Can achieve brushless update.

The second question, what improvements did the birth of the front-end framework make to the page layout?

Before the birth of the framework, web pages needed to be created through the repeated combination of HTML + CSS + JS. Each page and even the layout modules in it required many files to be combined together, which inevitably highlighted the cumbersome files when the project was too large , Low code reuse characteristics.

Framework 1.0, the MVC pattern

View: User Interface

Controller (Controller): business logic

Model (Model): data model

View acts as a user interface, sending instructions to Controller, Controller requires Model to change state, and Model sends updated data to View to give feedback to users.

At the core of the MVC model is that all communication is one-way.

In life, the design idea of ​​MVC is reflected in many places. Taking the household microwave oven as an example, it can also be understood as a three-layer structure. The appearance of the microwave oven and the operation buttons on it are the "view layer" (view), while the magnetron, the microwave generating device inside it, is the "data layer" (Model). The "data" here can be understood as the "core function" . It is the circuit board of the "controller layer" that converts the instruction of operating the button into the operation of the magnetron. If you now want to replace the microwave oven with a trendy casing, or replace it with a more powerful magnetron, it can be achieved without changing other layers.

Each layer is independent, which is the biggest advantage of the MVC pattern.

Framework 2.0, MVVM pattern

MVVM is also a software architecture pattern, which evolved on the basis of MVC, removed the Controller in MVC, and added two-way binding of data.
The most representative framework is Angular launched by Google. Its style belongs to the enhancement of HTML language, and its core concept is two-way data binding.

The characteristics of angularJS are as follows:
　　　　1. Good application structure
　　　　2. Two-way data binding
　　　　3. Instruction
　　　　4. HTML template
　　　　5. Embeddable, injectable and testable
　　　　
Advantages:

1. The template is powerful and rich, and comes with extremely rich angular instructions.
2. It is a relatively complete front-end framework, including services, templates, data two-way binding, modularization, routing, filters, dependency injection and other functions;
3. Custom instructions, after custom instructions can be used multiple times in the project.
4. The modularization of ng boldly introduces some things from Java (dependency injection), which can easily write reusable code, which is very helpful for agile development teams.
5. AngularJS is developed by Internet giant Google, which also means that he has a solid foundation and community support.

shortcoming:

1. It is easy to get started with angular, but there are many concepts after in-depth study, which is difficult to understand during learning.
2. There are very few documentation examples, and the official documentation basically only writes api, without a single example. Many times, how to use it is from google, or directly ask the author of misko, angular.
3. Compatibility with IE6/7 is not particularly good, but you can use jQuery to solve some problems by handwriting your own code.
4. There are few best practice tutorials for the application of directives. Angular is actually very flexible. If you don’t read some author’s usage principles, it’s easy to write different codes. For example, there are many dom operations in js like jQuery.
5. DI Dependency Injection if code minification requires explicit declarations.

Framework 3.0, MVVC pattern

advantage:

1. Simple: The official documentation is very clear, easier to learn than Angular.
2. Fast: Update the DOM in asynchronous batch mode.
3. Composition: Compose your application with decoupled, reusable components.
4. Compact: ~18kb min+gzip, and no dependencies.
5. Powerful: expressions & computed properties without declaring dependencies.
6. Friendly to modules: it can be installed through NPM, Bower or Duo, which does not force all your code to follow the various regulations of Angular, and the usage scenarios are more flexible.

shortcoming:

1. Newborn: Vue.js is a new project, not as mature as angular.
2. The influence is not very big: after google, there is a diversity or richness of Vue.js that is less than some other famous libraries.
3. IE8 is not supported:

The third question, why learn vue3?

Technical advantages

• Lightweight framework: only focus on the view layer, which is a collection of views to build data
• Easy to learn: Chinese development, Chinese documents, no language barriers, easy to understand and learn;
• View, data, and structure separation: make data changes easier,
• There is no need to modify the logic code, and only need to operate the data to complete the relevant operations;
• Virtual DOM: no longer use native dom operation nodes, greatly liberating dom operations
• Run faster: Compared with react, vue has great advantages

Compared with React, it is about 35kb after compression; Angular is about 60Kb after compression; and Vue is about 20kb after compression, so it is lighter.
And it is a progressive framework: it means that you don't need to learn all the knowledge of Vue, and
you can learn what you can use when you are working on a project.
The responsive update mechanism means that when our data is updated, the view will be automatically refreshed. We don't need comentupdata like React to perform a performance optimization. Our responsive update mechanism has already helped us deal with these things at the bottom.
The cost of learning Vue is low, because one of its template syntax is based on HTML. If you have a foundation in HTML, you can quickly get started with the Vue framework.

The fourth question, what foundations are needed to learn vue3?

The advantage of the framework is that it writes a lot of well-defined APIs for you, and you only need to call and use them, which only improves the convenience of your work.
So you still have the foundation you should have,

The basic layout of HTML + CSS + JS still needs to be learned, the creation process and syntax of the Ajax brushless asynchronous update interface, the webpack JavaScript module packager, and the npm package management under nodejs.

There is a long way to go, the front end is a post that keeps up with the times, and lifelong learning is unavoidable...

What is needed from 0 to 1 is a breakthrough, emphasizing the upgrade of one's own bottom layer, and the accumulation required to go from 1 to 100 focuses on the opening of one's own structure and capabilities.