Detailed explanation of the three major front-end technologies of React, Angular and Vue

1. 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 usually requires the use of additional libraries for state management and routing. Redux and React Router are examples of such libraries.

Basic Usage

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

The Greeter function is a React component that accepts a prop greeting. The variable App is an instance of the Greeter component, with the greeting property set to "Hello World!". Then, the ReactDOM.render method renders our Greeter component in the DOM element (id is myReactApp).

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

Notable Features

Componentization

React code consists of entities called components. Components can be rendered to a specific element in the DOM using the React DOM library. When rendering a component, it can pass in values ​​called "props".

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

Functional components

Functional components are declared with a function that returns some JSX.

Class Component

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

Virtual DOM

Another notable feature of React is that it uses a virtual document object model, or virtual DOM. React creates an in-memory data structure cache, calculates the difference in changes, and only renders the subcomponents that have actually changed, thereby efficiently updating the DOM displayed by the browser.

Lifecycle methods

Lifecycle methods refer to hooks processing functions that allow code to be executed at set points during the lifecycle of a component.

• shouldComponentUpdate allows developers to prevent unnecessary re-rendering of components by returning false when rendering is not necessary.
• componentDidMount is called after the component has been "mounted" (the component has been created in the user interface, usually by associating it with a DOM node). This is often used to trigger data loading from a remote data source via an API.
• componentWillUnmount is called immediately before a component is torn down or "unmounted". This is typically used to clean up resource dependencies of a component that are not simply removed when the component is unmounted (for example, removing any setInterval() instances associated with the component, or eventListeners set on the document because of the component's existence).
• Render is the most important lifecycle method and the only method that must exist in any component. It is usually called every time the component's state is updated.

JSX

JSX, or JavaScript XML, is an extension to the JavaScript language syntax. JSX is similar to HTML in appearance, providing a way to structure component rendering using a syntax familiar to developers. React components are often written using JSX, although it doesn't have to be (components can also be written in pure JavaScript). JSX is similar to another extension syntax created by Facebook for PHP called XHP.

An example of JSX code:

Nested Elements

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

property

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

JavaScript Expressions

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

The display result of the above code is:

Conditional Statements

If-else statements cannot be used in JSX, but conditional expressions can be used instead. The following example renders { i === 1 ? 'true' : 'false' } as the string 'true' when i is 1.

The result will be:

Functions and JSX can be used in conditional expressions:

The result will be:

Code written in JSX needs to be converted by tools such as Babel before it can be understood by web browsers. This processing is generally performed during the software build process, and then the built application is deployed.

Architecture Beyond HTML

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

React Hooks

Hooks are functions that let developers "hook into" React state and lifecycle features from function components. They make the code more readable and easier to understand. Hooks do not work inside class components, and its ultimate goal is to eliminate the existence of class components in React.

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

Rules for Hooks

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).
• Hooks can only be called in React function components, not in normal functions or class components. Custom Hooks

Building your own Hooks, also known as custom Hooks, allows 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 same rules for hooks apply to them.

Common terms

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 they need to build applications. This allows developers to choose any library to accomplish tasks such as performing network access or local data storage. This situation also determines that the standards for React technology cannot be unified when creating web applications.

Use of Flux architecture

To support React's concept of unidirectional data flow (in contrast to AngularJS/Angular's bidirectional data flow), the Flux architecture is a representative alternative to the popular Model-View-Controller (MVC) architecture. The characteristic of Flux is that data actions are sent to a storage warehouse through a central dispatcher, and changes to the storage warehouse data are transmitted back to the view. When used with React, this transfer is done via component props.

Flux can be considered a variation of the Observer pattern.

React components in the Flux architecture should not directly modify any props passed to it, but should pass callback functions that can create data actions sent by the dispatcher to modify the store. A data action is an object whose job is to describe something that has happened: for example, a data action describes a user "following" another user. It may contain data such as:

User ID,

Target user ID,

And the USER_FOLLOWED_ANOTHER_USER enumeration type.

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

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

history

React was created by Jordan Walke, a software engineer at Facebook, who released an early prototype of React 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. It was open sourced at the JSConf conference in the United States in May 2013.

React Native was announced at Facebook's React Conf in February 2015 and open sourced in March 2015, enabling native Android, iOS, and UWP development.

On April 18, 2017, Facebook announced React Fiber, a new core algorithm for the React library for building user interfaces. React Fiber will be the basis for any future improvements and feature development of the React library.

On September 26, 2017, React 16.0 was officially released.

On February 16, 2019, React 16.8 was officially released, which introduced React Hooks.

Common commands

Create a project:

npx create-react-app my-app

Development environment operation:

npm start

Production environment packaging:

npm run build

【Official website】

http://reactjs.org/

【Latest version】

16.13.1 on March 19, 2020

【Authorization】

MIT License

Angular

Angular (often referred to as "Angular 2+" or "Angular v2 and above") is an open source TypeScript-based web application framework led by the Angular team at Google and a community of individuals and companies. Angular was rewritten from scratch by the same team that built AngularJS.

Difference between Angular and AngularJS

• Angular has no concept of "scope" or controllers, instead it uses a hierarchy of components as its primary architectural feature.
• Angular has different expression syntax, focusing on "[]" for property 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) Static typing, 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
• Iteration callbacks provided by RxJS. RxJS limits state visibility and debugging, but these issues can be solved with reactive add-ons like ngReact or ngrx.
• Supports Angular Universal, which allows you to run Angular applications on the server.

history

name

Initially, the rewrite of AngularJS was called "Angular 2", but this led to confusion among developers. To clarify, the team announced that different terminology would be used for each framework, with "AngularJS" referring to versions 1.X and "Angular" referring to versions 2 and above.

Version 2

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

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

Version 4

Angular 4 was released on December 13, 2016, skipping 3 to avoid confusion caused by the misalignment of the router package version. The version released at that time was v3.3.0. The final version was released on March 23, 2017. Angular 4 is backward compatible with Angular 2.

Angular 4.3 version is a minor release which is a drop-in replacement for the 4.xx version.

Version 4.3 introduces HttpClient, a smaller, easier to use, and more powerful HTTP request library. New router lifecycle events for keepers and resolvers. Four new events. GuardsCheckStart, GuardsCheckEnd, ResolveStart, and ResolveEnd join the existing set of lifecycle events such as NavigationStart. Conditionally disable animations. Version 5

Angular 5 was released on November 1, 2017. The main improvements of Angular 5 include support for progressive web applications, build optimizer, and improvements related to Material Design.

Version 6

Angular 6 was released on May 4, 2018. In this version, the focus is not on the underlying framework, but more on the tool chain, and making it easier to update and upgrade Angular in the future, such as: ngupdate, ng add, Angular elements, Angular Material+CDK components, Angular Material starter components, CLI workspaces, library support, tree shaking providers, animation performance improvements, and RxJS v6.

Version 7

Angular 7 was released on October 18, 2018. The updates cover application performance, Angular Material & CDK, virtual scrolling, accessibility improvements for Selects, support for content projection using web standards for custom elements, 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. Features differential loading of all application code, dynamic imports for lazy routing, web workers, TypeScript 3.4 support, and Angular Ivy is available as a preview. Angular

Ivy preview includes:

• The generated code is easier to read and debug at runtime.
• Faster rebuild times
• Reduced payload
• Improved template type checking
• Backwards 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 software package
• 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

Componentization

A component example

Html part

Typescript part

routing

Data Management

Defining Service Classes

Calling service class

Common commands

From the terminal, install the Angular CLI globally:

npm install -g @angular/cli

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

ng new my-project-name

Development environment operation:

ng serve

Production environment packaging:

ng build --prod

【Official website】

https://angular.io/

【Latest version】

9.1.2 on April 15, 2020

【Authorization】

MIT License

3. Vue

Vue.js (often just called Vue; pronounced /vjuː/, like "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 is maintained by him and core members from various companies including Netlify and Netguru.

Overview

The characteristic of Vue.js is that it adopts a progressive architecture and focuses on declarative rendering and component synthesis. Advanced features required for complex applications, such as routing, state management, and build tools, are provided through officially maintained support libraries and packages, with Nuxt.js being one of the most popular solutions.

Vue.js allows you to extend HTML using HTML attributes called directives.

history

Vue was created by Evan You. While working at Google, he participated in the development of multiple projects using AngularJS technology, and later created Vue. He later summarized his thought process. "I thought, what if I could take the really great parts of AngularJS and build something lightweight?" The first source code commit to the project was in July 2013, and Vue was first released in February 2014.

Componentization

Vue components extend basic HTML elements to encapsulate reusable code. From a high-level perspective, components are custom elements that the Vue compiler attaches behavior to. In Vue, a component is essentially a Vue instance with preset options. The following code snippet contains an example of a Vue component. This component displays a button and prints out the number of times the button has been clicked.

template

Vue uses an HTML-based template syntax that allows the rendered DOM to be bound to the underlying data of the Vue instance. All Vue templates are valid HTML and 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 memory before updating the browser. Combined with the reactive system, Vue is able to calculate the minimum number of components that need to be re-rendered and initiate the minimum amount of DOM operations when the App state changes.

Vue users can use template syntax or choose to write render functions directly using JSX, which allows applications to be built from software components.

Reactive Systems

Vue features a reactive system that uses pure JavaScript objects and optimized re-rendering. Each component keeps track of its reactive dependencies during rendering, so the system knows exactly when to re-render, and which components need to re-render.

Transformation effects

Vue provides a variety of methods to deploy transition effects when items are inserted, updated, or removed from the DOM. This includes the following tools:

• Classes that automatically apply CSS transforms and animations
• Integrate third-party CSS animation libraries, such as Animate.css, etc.
• During transformation hooks, use JavaScript to manipulate the DOM directly.
• Integrate third-party JavaScript animation libraries such as Velocity.js.

When elements in a transform component are inserted or removed, this happens:

• Vue automatically detects if the target element has CSS transforms or animations applied to it. If there is, the CSS transform classes will be added/removed at the appropriate times.
• If the transform component provides JavaScript hooks, those hooks will be called at the appropriate time.
• If no CSS transforms/animations are detected, and no JavaScript hooks are provided, then the DOM operations for insertion and/or removal will be performed immediately in the next frame.

routing

One of the traditional drawbacks of single-page applications (SPAs) is the inability to share links to exact "sub" pages within a specific web page. Since SPAs only serve a single URL-based server response to the user (it usually serves index.html or index.vue), it is often difficult or even impossible to bookmark certain screens or share links to specific sections. To solve this problem, many client-side routers use "hashbang" (#!) to delimit dynamic URLs, such as http://page.com/#!/. However, in HTML5, most modern browsers support routing without the hashbang.

Vue provides an interface for changing the content displayed on a page based on the current URL path - this can be done in a variety of ways (whether through an email link, a refresh, or an in-page link). Additionally, using a front-end router allows you to intentionally transition browser paths when certain browser events (such as clicks) occur on buttons or links. Vue itself does not come with front-end routing. But the open source "vue-router" package provides an API to update the application's URL, supports a back button (navigation history), and supports authentication URL parameters for email password resets or email verification links. It supports mapping nested routes to nested components and provides fine-grained transition control. With vue-router added, components only need to be mapped to the routes they belong to, and the parent/root route must indicate where the child routes should be rendered.

The above code:

• Set a frontend path in http://websitename.com/user/<id>.
• This will be rendered in the User component defined in (const User...) .
• Allow the user component to enter a user-specific ID using the params key of the $route object: $route.params.id.
• This template (which changes based on the parameters passed to the router) will be rendered into the DOM inside the <router-view></router-view> div#app.
• The final generated HTML will be: http://websitename.com/user/1:

Ecosystem

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 - The standard tool for rapid development of Vue.js
• Vue Loader - A webpack loader that allows writing Vue components in the format of Single File Components (SFCs).

Official library

• Vue Router - The official router for Vue.js
• Vuex – Centralized state management for Vue.js based on the Flux pattern.
• Vue Server Renderer - Server-side rendering for Vue.js.

Common commands

Installation Tools

npm install -g @vue/cli

Create a project:

vue create my-project

Development environment operation:

npm run serve

Production environment packaging:

npm run build

【Official website】

https://vuejs.org/

【Latest version】

2.6.1 on December 13, 2019

【Authorization】

MIT License

IV. Summary

This article makes a relatively detailed exploration of the current top front-end technologies. A major direction of front-end technology is single-page application (SPA). When selecting front-end technology for this business, we need to consider the following aspects:

1. Members’ current skills. This is a very realistic issue. Most programmers will choose technologies that they are more familiar with. Here you need to think about whether the technology you are currently familiar with is the best option?

2. Available learning time. If you find that the technology you want to use requires some time to learn, will this time expenditure conflict with the development progress?

3. Whether the complexity of the project can be kept to a minimum is a key factor. The reason why advanced technology is advanced is that it allows developers to focus their time and energy on real business development. If the technology to be used requires a lot of configuration that is not related to the business, you need to ask a question: is there a better way?

The above is a detailed explanation of the three major front-end technologies of React, Angular, and Vue. For more information about the three major front-end technologies of React, Angular, and Vue, please pay attention to other related articles on 123WORDPRESS.COM!