Front-end framework development process

Generation 1: Pure HTML static (1990s)

Originally the Web was primarily used by a group of scientists to share and transmit information, and there were only a few dozen Web servers around the world. What really made the Web popular was the Mosaic browser, a precursor to the once famous Netscape Navigator. In 1993, Berners Lee founded the World Wide Web Consortium (W3C), which is responsible for developing web-related standards. With the popularity of browsers and the W3C’s push, the resources that can be accessed on the Web are becoming more and more abundant. The main function of the Web at this point is for the browser to request static HTML information from the server.

In 1995, Ma saw the Internet in the United States, and Alibaba’s early yellow Pages was a Web application that presented corporate information in HTML.

The front end of this era was a single HTML page that looked something like this:

Generation 2: Dynamic Content (1993-96)

There was a technology called CGI (Common Gateway Interface: Public gateway interface), such as C, C++ and other languages can be written according to the CGI standard server program, the content to return to the browser to print print output to the Web server, and display to the user dynamic content. There were many such websites in 1993 ~1996, and even many famous large websites in China were still using this technology in 2000.

Here is a rough sketch of the gen 2 framework:

Third generation: WEB programming scripting language ASP/JSP/PHP (1997 ~2000)

Typical technologies of this period include scripting languages ASP, JSP and PHP.

Fourth generation: Distributed Enterprise Computing Platform (2000~2004)

Typical technologies of this era are: Java Servlets, Java Server Pages (JSP), Enterprise Javabeans (EJB), and ASP.net

Generation 5: The era of framework flying: MVC, ORM (2004~2015)

Struts, which appeared in 2004, was a very popular MVC framework for Java Web development. The View is an HTML representation of the data, and the Controller is responsible for responding to requests and coordinating the Model and View. The separation of Model, View and Controller is a typical separation of concerns.

In addition, data access has gradually replaced direct SQL access by object-oriented approach, and the concept of Object Relation Mapping (ORM) has emerged. Hibernate emerged in 2001 is one of the outstanding ones. Has become the main reference and implementation of the Java persistence layer specification JPA. More full-stack frameworks began to appear, such as Spring, the Java development framework that emerged in 2003.

Generation 6: Front-end MVC framework Angular, VUE, React (2015~ present)

In fact, 2015 is not exactly the year, mainly because Angular was called AngularJS before 2015, and the actual Angular2 release was in May 2016.

Meanwhile, VUE exploded in 2015.

Many of these frameworks are also called MVVM frameworks (which is short for Model-View-ViewModel), which is an improved version of the MVC framework.

Generation N: In the future (a bold estimate should be after 2025)

In recent years, there will not be much improvement in the front-end framework, but more improvement and improvement on the existing MVVM framework. The current front-end framework tends to be stable, and basically Angular, VUE, React are the three world situation.

However, the current front-end auxiliary tools, such as packaging tools, operation and maintenance tools, are still not a complete system. For example, from manual compilation of Java in the early stage to various mature development tools now, it takes almost 15 years to settle. Over the next five years, the front-end will need a lot of time to refine the tools and frameworks for compiling classes.

If technology changes too fast in a short period of time, enterprises will pay more costs, which is against conventional development. It is useless for enterprises and talents to keep up with technology updates too fast.

The history of VUE

VUE’s website is cn.VUEjs.org/

Vue.js is a set of progressive frameworks for building user interfaces. Unlike other heavyweight frameworks, VUE is designed with bottom-up incremental development. VUE’s core library focuses only on the view layer and is very easy to learn and integrate with other libraries or existing projects. VUE, on the other hand, is fully capable of driving complex single-page applications developed with single-file components and libraries supported by the VUE ecosystem.

Vue.js is not an all-powerful framework by itself — it only focuses on the view layer. It is therefore very easy to learn and integrate with other libraries or existing projects. On the other hand, vue.js is perfect for driving complex single-page applications when used with related tools and support libraries.

Yuxi discovered that Angular was such a good thing while working at the Google Creative Lab that he began to take away some of the libraries he used in his daily work and package them for his own use. A lightweight framework was developed, initially named Seed.

In December 2013, the seed sprouted and was renamed VUE, version 0.6.0.

On January 24, 2014, VUE was officially released, version number is 0.8.0.

2014.02.25 release 0.9.0, got its own code name: Animatrix, this name comes from the animation version of the Matrix, since then, important versions will have their own code name.

Version 0.12.0, code-named Dragon Ball, was released on June 13, 2015. In this year, VUE ushered in a big explosion.

In the same year, VUE released several core libraries, vuE-Router (2015-08-18), VUEx (2015-11-28), and VUE-CLI (2015-12-27), marking VUE’s evolution from a view-layer library to an incremental framework. Many front-end students have also become VUE users since this version.

Ghost in the Shell, version 2.0.0 of VUE, is the second major milestone, incorporating the React Virtual Dom solution and supporting server-side rendering.

Just a little while ago, VUE released 2.6.0 Macross, which is a continuation of the past.

3.0 should follow soon

VUE installation and use

VUE officially provides a variety of installation methods.

See also: cn.VUEjs.org/v2/guide/in…

First VUE example

For a quick start, the examples before VUE used routing were straightforward

For the first VUE example, you need to do the following:

• Download the vue.js file and place it in your project;

• Create HTML pages and import vue.js;

The directory in which vue.js is placed is: /js/vue.js

Create HTML page source code: VUE sample.html

Here is the first vUE sample HTML code:

<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First vUE example</title>
<script src=".. /js/vue.js"></script>
</head>

<body>
<div id="app">
    {{msg}}
</div>
<script>
let vue = new Vue({
    el:"#app".data: {msg:"First VUE example"}});</script>
</body>
</html>
Copy the code

Running results:

Key points:

• The introduction of VUE. Js
• Create an HTML root element, such as< div id = "app" >;
• Create VUE instance, new VUE (can be assigned to a variable for debugging purposes);
• Mount the VUE instance to a Dom element, such as el: “#app” (there are several ways to mount it);
• Create MSG variable in VUE instance and assign value;
• Use curly braces to bind data directly, but only within the mount element.

VUE life cycle

BeforeCreate: After the instance is initialized, this points to the created instance and cannot access methods and data on data, computed, watch, and methods. Often used to initialize non-reactive variables.

Created: The instance is Created, and methods and data on data, computed, watch, and methods can be accessed. However, the instance is not mounted to the DOM, and the el attribute, EL attribute, EL attribute, and ref attribute contents are empty arrays. Often used for simple Ajax requests, page initialization.

BeforeMount: called before the mount begins, beforeMount the corresponding tempiate is found and compiled into the render function.

Mounted: The instance is mounted to the DOM. You can use the DOM API to obtain the DOM node and access the $ref attribute.

BeforeUpdate: Called when responsive data updates occur before the virtual DOM is patched. It is a good idea to access the existing DOM prior to updating, such as manually removing event listeners that have been added.

Updated: When the virtual DOM is rerendered and patched, the component DOM is Updated to perform DOM-dependent operations, avoiding the possibility of an endless loop in this hook function to manipulate data.

BeforeDestroy: Called before instance destruction, at this stage the instance is still fully available and this still gets the instance. It is used to destroy timers, unbind global events, and destroy plug-in objects.

All objects indicated by the VUE instance are unbound, all time listeners are removed, and all subinstances are Destroyed.

In addition, there are several important parameters:

Methods: Event method definition

Watch: Listens for a change in a value and executes the corresponding function.

Computed: Calculates attributes, that is, relies on other attributes to calculate the final value.

Activated and deactivated: The lifecycle hook functions activated and deactivated are executed when a component is switched in keep-alive (note: These two functions do not work if the keep-alive tag is not referenced).

VUE instance parameter complete writing method

<head>
<script src=".. /js/vue.js"></script>
</head>
<body>
<div id="app">
    <span>{{msg}}{{price | RMPPrice}}</span>
</div>
<script>

// Inside the braces are the places defined by the VUE instance parameter filter
Vue.filter("RMPPrice".value= > {
    value = value.toFixed(2);
    return value+"Yuan";
});

let vue = new Vue({
    el: "#app".data: {
        price: 5985200.65500.msg: "人民币："
    },
    // After the instance is created, the general data is initialized here
    created() {
        this.show();
    },

    // When the instance is mounted, general DOM access can be done here. For example, $ref accesses attributes
    mounted(){},// Define the location of the method
    methods: {
        show() {
            console.log('This is the show function.')}},// Evaluates the location defined by the attribute
    computed:{
    },

    // Listen on the location of the definition
    watch: {}});</script>
</body>
Copy the code