【 introduction 】

In a world where technology is evolving so fast and changing so quickly, developers need more tools to solve different problems. In this paper, React, Vue and Angular frameworks of the mainstream front-end development technology are explored in detail. The purpose is to unlock the veil of these front-end technologies and have a look at their true features.

“React”

React (also known as React. Js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.

React can be used as a basis for developing single-page or mobile applications. However, React is only concerned with rendering data to the DOM, so creating React applications often requires additional libraries for state management and routing. Redux and the React Router are examples of such libraries, respectively.

Basic usage

Here is a simple example of React using JSX and JavaScript in HTML.

The Greeter function is a React component that accepts an attribute greeting. The variable App is an instance of the Greeter component, where the greeting property is set to “Hello World!” . The reactdom.render method then renders our Greeter component into a DOM element (id: myReactApp).

When displayed in a Web browser, the result will be:

Distinctive features

componentization

The React code is made up of entities called components. Components can use the React DOM library to render to a specific element in the DOM. When rendering a component, you can pass in a value called “props “.

The two main ways to declare components in React are through function function components and class-based components.

Functional component

A functional component is declared as a function that returns some JSX.

Class components

Class-based components are declared using ES6 classes. They are also called “stateful” components because their state can be maintained throughout the component and can be passed to child components via props.

Virtual DOM

Another notable feature is React’s use of the virtual document Object model, also known as the virtual DOM. React efficiently updates the DOM displayed by the browser by creating an in-memory cache of data structures that calculates the change differences and renders only the children of the actual change.

Lifecycle approach

Lifecycle methods are hooks handlers that allow code to be executed at specified points during the lifecycle of a component.

  • ShouldComponentUpdate allows developers to prevent unnecessary re-rendering of components by returning false when rendering is not required.
  • ComponentDidMount is called after the component has been “mounted” (the component has already been created in the user interface, usually by associating it with a DOM node). This is typically used to trigger data loading from a remote data source through an API.
  • ComponentWillUnmount is called immediately before the component is disassembled or “unmounted”. This is typically used to clear component resource dependencies that are not simply removed with component uninstallation (for example, remove any setInterval() instances associated with the component, or “eventListener” set on the “document” because of the component’s presence).
  • Render is the most important lifecycle method, and the only one that must exist in any component. It is typically called every time a component’s state is updated.

JSX

JSX, or JavaScript XML, is an extension to the syntax of the JavaScript language. Similar in appearance to HTML, JSX provides a syntax-structured component rendering approach familiar to developers. React components are usually written in JSX, although they don’t have to be (components can also be written in pure JavaScript). JSX is similar to another extension syntax Facebook created for PHP called XHP.

An example of JSX code:

Nested elements

Multiple elements at the same level need to be wrapped in a container element, such as the <div> element in the figure above.

attribute

JSX provides a set of element attributes designed to correspond to those provided by HTML. These custom properties can also be passed to the component, and all properties are received by the component as props.

JavaScript expression

JavaScript expressions (but not statements) can be used inside JSX with curly braces {}.

The code above displays the result:

Conditional statements

If-else statements cannot be used in JSX, but conditional expressions can be used instead. The following example sets {I === 1? ‘true’ : ‘false’} renders as the string ‘true’.

The result would be:

Functions and JSX can be used in conditional expressions:

The result would be:

Code written in JSX needs to be transformed by tools like Babel before it can be understood by Web browsers, typically during software construction and then after the built application is deployed.

Architecture beyond HTML

React’s basic architecture isn’t just for rendering HTML in a browser. For example, Facebook has dynamic charts that can be rendered to a <canvas> tag, while Netflix and PayPal use universal loading to render the same HTML on both the server and client.

React Hooks

Hooks are functions that let developers “hook “React state and lifecycle features from function components. They make code more readable and easier to understand. Hooks do not work inside class components; their ultimate goal is to eliminate class components from React.

React provides several Hooks built in, such as useState, useContext, useReducer, useEffect, and more. They are explained in the Hooks API reference. The most commonly used components are useState and useEffect, which control and detect state changes in React components respectively.

Hooks rules

Hooks also have some rules that must be followed before using Hooks:

  • Hooks can only be called at the top level (not in loops or if statements).
  • The React hook can only be called in the React function component, not in normal functions or class components.

Custom Hooks

Build your own Hooks, also known as custom Hooks, which allow you to extract component logic into reusable functions. A custom hook is a JavaScript function whose name starts with “use “that can call other hooks. The hook rules also apply to them.

The term is commonly used

React does not attempt to provide a complete “application library.” It is designed specifically for building user interfaces, and therefore does not include many of the tools that some developers think are needed to build applications. This allows developers to choose any library to perform tasks such as performing network access or local data storage. As a result, React technology cannot be standardized when creating web applications.

Use of the Flux architecture

To support the React concept of one-way data flow (as opposed to AngularJS/Angular two-way data flow), the Flux architecture is a representative alternative to the popular model-View-Controller (MVC) architecture. Flux features data actions sent to a repository through a central scheduler, and changes to the repository data transmitted back to the view. When used with React, this transfer is done through component properties.

Flux can be thought of as a variation of the observer pattern.

The React component under the Flux architecture should not directly modify any props passed to it. Instead, it should pass callback functions that create data actions sent by the scheduler to modify the repository. A data action is an object whose job is to describe what has happened: for example, a data action describes a user “follow” another user. It may contain the following data:

The user ID,

Target user ID,

And the USER_FOLLOWED_ANOTHER_USER enumeration type.

A storage repository is a data model that can change itself based on the actions of the data received from the scheduler.

This pattern is sometimes expressed as “properties flow down, data actions flow up.” Since Flux’s inception, many implementations of Flux have been created, the most famous of which is Redux, which features a single repository, often referred to as a single source of data truth.

history

React was created by Facebook software engineer Jordan Walke, who published an early prototype called “FaxJS” inspired by PHP’s HTML component library XHP. It was first deployed on Facebook’s News Feed in 2011 and later on Instagram in 2012. Open source at JSConf conference in USA in May 2013.

React Native was announced in Facebook’s React Conf in February 2015 and opened source in March 2015, implementing Native Android, iOS, and UWP development.

On April 18, 2017, Facebook announced React Fiber, a new core algorithm for the React library to build the user interface that will serve as the foundation for any future improvements and feature development of the React library.

React 16.0 was released on September 26, 2017.

React 16.8 was released on February 16, 2019, with the introduction of React Hooks.

Common commands

Create project:

npx create-react-app my-app

Development environment running:

npm start

Production environment packaging:

npm run build

【 Official website 】

reactjs.org/

[Latest version]

16.13.1 on 19 March 2020

“Authorization”

MIT License

“Presents”

Angular (often referred to as “Angular 2+” or “Angular V2 and above “) is an open source Web application framework based on TypeScript, led by Google’s Angular team and a community of individuals and businesses. Angular was rewritten from scratch by the same team that built AngularJS.

The difference between Angular and AngularJS

  • Angular has no concept of a “Scope” or controller. Instead, it uses a hierarchy of components as its main architectural feature.
  • Angular has different expression syntax, focusing on “[]” for attribute binding and “() “for event binding
  • Modularity – Many core functions have been moved to modules
  • Angular recommends using Microsoft’s TypeScript language, which introduces the following features.

(1) Statically typed, including Generics

(2) Notes

  • TypeScript is a superset of ECMAScript 6 (ES6) and is backward compatible with ECMAScript 5 (i.e., JavaScript).
  • Dynamic loading
  • Asynchronous template compilation
  • Iterative callbacks provided by RxJS. RxJS limits state visibility and debugging, but these issues can be addressed with reactive add-ons like ngReact or NGRX.
  • Supports Angular Universal and can run Angular applications on the server.

history

named

Originally, the AngularJS rewrite was called “Angular 2”, but this led to developer confusion. To clarify, the team announced that each framework uses a different term, with “AngularJS “referring to 1.x and “Angular” referring to release 2 and above.

Version 2

Angular 2.0 was announced at the NG-Europe conference on 22-23 October 2014. The drastic changes in version 2.0 have caused considerable controversy among developers.

On April 30, 2015, the Angular developers announced that Angular 2 went from Alpha to developer preview, went into Beta in December 2015, released the first release candidate in May 2016, and released the final version on September 14, 2016.

Version 4

Angular 4 was released on December 13, 2016, bypassing 3 and avoiding confusion caused by the misaligned router package version, which was already released as V3.3.0. The final version was released on March 23, 2017, and Angular 4 is backward compatible with Angular 2.

Angular 4.3 is a minor version that replaces 4.x.x.

Version 4.3 features

  • Introduced HttpClient, a smaller, easier to use, and more powerful HTTP request library.
  • New router life cycle events for guardians and parsers. Four new events. GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd join the existing NavigationStart and other lifecycle event sets.
  • Disable animation conditionally.

Version 5

Angular 5 was released on November 1, 2017. Major Angular improvements include support for progressive Web applications, build optimizers, and Material Design-related improvements.

Version 6

Angular 6 launches on May 4, 2018. This release is less about the underlying framework and more about toolchains and making Angular updates and upgrades easier in the future. For example: Ngupdate, NG Add, Angular Elements, Angular Material+CDK component, Angular Material Starter component, CLI Workspace, library support, tree shake provider, Animation Performance enhancement, RxJS v6.

Version 7

Angular 7 was released on October 18, 2018. The updates cover application performance, Angular Material & CDK, virtual scrolling, improved accessibility to Selects, content projections that now support custom elements using Web standards, And dependency updates for Typescript 3.1, RxJS 6.3, and Node 10 (Node 8 is still supported).

Version 8

Angular 8 was released on May 28, 2019. Differentiated loading of all application code, dynamic import of lazy routes, Web workers, TypeScript 3.4 support, and Angular Ivy configurable as a preview. Angular

Ivy preview includes:

  • The generated code is easier to read and debug at run time.
  • Faster reconstruction time
  • Payload reduction
  • Improved template type checking
  • Backward compatibility

Version 9

Angular 9 was released on February 6, 2020. Version 9 uses the Ivy compiler by default. Angular is compatible with TypeScript 3.6 and 3.7. In addition to hundreds of bug fixes, the Ivy compiler and runtime provide many advantages:

  • Smaller packages
  • Faster testing
  • Better debugging
  • Improved CSS class and style binding
  • Improved type checking
  • Improved build errors
  • Improved build time, AOT enabled by default
  • Improve internationalization capabilities

The characteristics of

componentization

A component example

Html part

Typescript part

routing

Data management

Defining service classes

Invoking the service class

Common commands

Install Angular CLI globally from a terminal:

npm install -g @angular/cli

Create a new Angular CLI workspace with the ng new command:

ng new my-project-name

Development environment running:

ng serve

Production environment packaging:

ng build –prod

【 Official website 】

angular.io/

[Latest version]

9.1.2 on 15 April 2020

“Authorization”

MIT License

【 Vue 】

Vue.js (commonly referred to as Vue; Pronounced /vju curliest, similar to “view”) is an open source Model-view-viewModel JavaScript framework for building user interfaces and single-page applications. It was created by Evan You and maintained by him and core members from companies like Netlify and Netguru.

An overview of the

Vue.js features an incremental architecture that focuses on declarative rendering and component composition. Advanced functionality needed for complex applications, such as routing, state management, and build tools, is provided through officially maintained support libraries and packages, of which Nuxt.js is one of the most popular solutions.

Vue.js allows you to extend the HTML with HTML properties called directives.

history

Vue was created by Evan You. While at Google, he worked on several projects using AngularJS technology before creating Vue. He later summarized his thought process. I thought, what if I could take what’s really good about AngularJS and build something lightweight?” The source submission date for the first version of the project was July 2013, and Vue was first released in February 2014.

The characteristics of

componentization

The Vue component extends basic HTML elements to encapsulate reusable code. At a high level, a component is a custom element that the Vue compiler attaches to behavior. In Vue, a component is essentially a Vue instance with preset options. The following snippet contains an example of a Vue component. This component displays a button and prints out how many times the button has been clicked.

The template

Vue uses HTML-based template syntax to allow binding of the rendered DOM to the underlying data of the Vue instance. All Vue templates are valid HTML that can be parsed by compliant browsers and HTML parsers. Vue compiles templates into virtual DOM rendering functions. The Virtual Document Object Model (or “DOM”) allows Vue to render components in its memory before updating the browser. Combined with a reactive system, Vue calculates the minimum number of components that need to be rerendered and initiates the minimum number of DOM operations when the App state changes.

Vue users can use template syntax, or they can choose to use JSX to write rendering functions directly, which allow applications to be built from software components.

Reaction system

Vue features a reactive system that uses pure JavaScript objects and optimized re-rendering. Each component tracks its reactive dependencies during rendering, so the system knows exactly when to rerender and which components need to be rerendered.

Effect of transformation

Vue provides a variety of ways to deploy transformation effects when inserting, updating, or deleting items from the DOM. This includes the following tools:

  • Classes that automatically apply CSS transformations and animations
  • Integrate third party CSS animation libraries such as Animate. CSS etc.
  • Use JavaScript to manipulate the DOM directly during the transform hooks.
  • Integrate third-party JavaScript animation libraries such as velocity.js, etc.

When an element is inserted or removed from a transformation component, something like this occurs:

  • Vue automatically detects if CSS transforms or animations are applied to the target element. If so, CSS transform classes will be added/removed at the appropriate time.
  • If the transformation component provides JavaScript hooks, these hooks will be called at the appropriate time.
  • If CSS transforms/animations are not detected and JavaScript hooks are not provided, DOM operations to insert and/or remove will be performed immediately in the next frame.

routing

A traditional disadvantage of single-page applications (spAs) is the inability to share links to the exact “child” pages in a particular web page. Because SPA only provides a URL-based server response to the user (it typically serves index.html or index.vue), it is often difficult, if not impossible, to bookmark certain screens or share links to specific sections. To solve this problem, many client routers use “hashbang”(#!) To partition dynamic urls, such as page.com/#! /. However, in HTML5, most modern browsers support routing without hashbang.

Vue provides an interface to change what is displayed on a page based on the current URL path – in a variety of ways (whether by email link, refresh, or in-page link). In addition, when certain browser events, such as clicks, occur on buttons or links, the front-end router can be used to consciously convert the browser path. Vue does not have its own front-end routing. But the open source “Vue-Router” package provides an API to update an application’s URL, support for a back button (navigation history), and support for email password reset or authentication URL parameters for email verification links. It supports mapping nested routines from nested components and provides fine-grained transition control. When vue-Router is added, components only need to map to the route to which they belong, and the parent/root route must indicate the rendering location of the child routes.

The code above:

  • Set a front-end path in websitename.com/user/

    .
  • This will be done in (const User…) Rendered in the User component defined in.
  • Allow the user component to use the params key of the $route object to enter the specific ID of the user: $route.params.id.
  • This template (depending on the parameters passed to the router) will be rendered to
    in the DOM div#app.
  • The resulting HTML will be: websitename.com/user/1:

The ecological system

The tools and libraries that come with the core library are developed by the core team and contributors.

Official tools

  • Devtools – Browser Devtools extension for debugging vue.js applications.
  • Vue CLI – A standard tool for rapid development of vue.js
  • Vue Loader – a Webpack Loader that allows Vue components to be written in single-file component (SFCs) format.

Official library

  • Vue Router – The official Router of vue. js
  • Vuex – Centralized state management of vue.js based on Flux mode.
  • Vue Server Renderer – Server side rendering for vue.js.

Common commands

Installation tools

npm install -g @vue/cli

Create project:

vue create my-project

Development environment running:

npm run serve

Production environment packaging:

npm run build

【 Official website 】

vuejs.org/

[Latest version]

2.6.1 On 13 December 2019

“Authorization”

MIT License

【 summary 】

This paper makes a detailed exploration of the current top front-end technology. A major direction of front-end technology is Single Page Application (SPA). We need to consider the following aspects when selecting the front-end technology for this business:

1. Current skills, this is a very real problem, most programmers will choose the technology they are familiar with. Is the technology you are currently familiar with the best choice?

2. Available learning time. If it is found that the technology to be used requires some time to learn, will the cost of this time conflict with the development schedule?

3. The key factor is whether the complexity of the project can be minimized. Advanced technology is advanced because it allows developers to spend time and energy on real business development. If the technology to be used requires a lot of configuration that is not relevant to the business, the question needs to be asked: Is there a better way?

Finally, I hope this paper can provide guidance or reference for existing or future business development.

Click to follow, the first time to learn about Huawei cloud fresh technology ~