Shulou(Shulou.com)06/03 Report--

Editor to share with you what is the difference between JavaScript framework Angular and React, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The two JavaScript frameworks, Angular and React, are red and purple, and the choice of these two frameworks has become the easiest question to be asked or considered by architects, this article may not tell you which framework is better, but try to compare the two from more angles, as much as possible to provide you with more references when choosing.

Method of selection

Before choosing, we try to look at the framework (or any tool) you are going to choose with some questions, and try to use the answers to these questions to help us understand the framework better and make the choice easier.

The question of the framework itself: is it mature? Who is behind it? What functions do you have? What architecture and model are adopted? Is the ecosystem rich? The question that needs self-reflection: can my team and I learn and master it easily? Is it suitable for my project? Is the development experience good enough?

Strictly speaking, the comparison between Angular and React is unfair, because Angular is a feature-rich framework, and React is a UI component library, so we will discuss some class libraries that are often used with React in the following analysis.

OK, start... ...

Maturity degree

As a mature developer or someone who can determine the direction of architecture and technology, a necessary skill is to be able to balance the relationship between mature technologies and cutting-edge frameworks in work and projects, not only to maintain the progress of people and technology, but also to ensure the quality of project or product delivery, so you must be aware of the following possible risks:

The framework may be unstable. The major developer (sponsor) may suddenly give up. If you need help, there may not be a large knowledge base or community available.

Fortunately, neither Angular nor React seems to need to worry about the above risks.

React

React is developed and maintained by Facebook for its own products, including Instagram and WhatsApp. It has been about three and a half years now. It is also one of GitHub's most popular projects.

Angular

Angular is maintained by Google and is used in Google's Adwords and Fiber projects. Since AdWords is an important gold-absorbing weapon for Goolge, natural Angular is unlikely to die suddenly.

Function

As mentioned earlier, Angular itself has a lot more features than React, and of course, richer features can be both advantages and disadvantages for a framework. Both frameworks share some of the same core functions: componentization, data binding, and platform-independent Render mechanisms.

Angular

In addition to providing some features that require the support of the latest browsers, Angular also provides the following standard features:

Dependency injection template routing (@ angular/router) AJAX (@ angular/http) form (@ angular/forms) componentized CSS encapsulation XSS protection unit test tool

The advantage of rich features is that you don't have to spend extra effort picking third-party libraries, however, it also leaves you no choice, even if you don't need them (the newly released Angular4 seems to be aware of this problem).

React

Relative to the features provided by Angular,React itself, it is relatively "simple":

Dependency-free injection uses JSX instead of traditional HTML Templates XSS protection unit testing tools

Relative to Angular,React, you have a lot of freedom to select third-party class libraries, such as:

Routing (React-router) AJAX (Fetch or axios) various CSS packages (see https://github.com/MicheleBertoli/css-in-js for details) more powerful unit testing (Enzyme)

You can freely (or customize) the required class libraries according to your own needs, and these third-party class libraries are easy to learn.

Language and pattern

With the popularity of the two frameworks, some concepts and technologies have emerged. If you want to really use or master these two frameworks, it is necessary to understand the concepts or technologies that follow:

React JSX

JSX is a controversial topic: some people like it, while others think it's a big step backwards. React decided to use a language similar to XML to combine markup and code in the component and write HTML tags directly in JavaScript code.

Although the topic of mixing tags and JavaScript may be controversial, it has an indisputable advantage: static analysis. If an error occurs in the JSX tag, the compiler immediately reports the error instead of waiting for an inexplicable problem at run time. This helps developers quickly troubleshoot errors and avoid other stupid mistakes, such as spelling mistakes.

Flow

Flow is a JavaScript type checking tool developed by Facebook. It can parse the code and check for common type errors, such as implicit conversion or dereferencing.

Unlike TypeScript for similar purposes, it does not require developers to migrate to a new language and check the type of comments for your code. In the process, type comments are optional and can be used to provide additional hints to the parser. If you want to use static code analysis while avoiding rewriting existing code, Flow is a good choice.

Redux

Redux is a library that can manage state changes in a clear way. It was inspired by Flux, but with some simplification. The key idea of Redux is that the entire state of the application is represented by a single object that is mutated by a function called reducers. Reducers itself is purely functional and is implemented separately from components. This better separates the problem from the test.

If you are working on a simple project, the cost of introducing Redux may outweigh the gain, but it is a good choice for medium and large projects.

Angular TypeScript

TypeScript is a new language developed based on JavaScript and developed by Microsoft. It is a superset of JavaScript ES2015 and contains features for newer versions of the language. You can use it instead of Babel to write state-of-the-art JavaScript. It can also statically analyze your code by using a combination of comments and type inference.

There is a more subtle benefit. TypeScript is severely affected by Java and .NET, so if your developers have background knowledge of one of these languages, they may find TypeScript more easily than simple JavaScript (notice how we switch from tools to your personal environment). Although Angular is the first major framework to actively adopt TypeScript, it can also be used with React.

RxJS

RxJS is a responsive programming library that provides flexibility in handling asynchronous operations and events. It is a combination of Observer and Iterator patterns and functional programming. RxJS allows you to treat anything as a continuous stream and perform various operations on it, such as mapping, filtering, splitting, or merging.

This class library has been adopted by Angular with its HTTP module and some internal use. When you execute a HTTP request, it returns an Observable instead of the usual Promise. Although this class library is very powerful, it is also very complex. To master it, you will need to understand different types of "observable", "theme" and about a hundred methods and operators.

RxJS is useful when you do a lot of work with continuous data streams, such as Web sockets, but it seems too complex for anything else. In any case, when you use Angular, you should at least know the basics of RxJS.

TypeScript can be said to be a very important feature of Angular. First of all, it provides the original C#/Java developers with easy access to the front end. In addition, TypeScript also wants to be easier to understand than JavaScript, especially in projects with code volume or business complexity.

ecosystem

One of the reasons why open source frameworks are so popular is that around them, there are countless tools, class libraries, and extensions to support the entire framework, which may sometimes be more helpful than the framework itself. next, let's take a look at the most popular tools and class libraries for these two frameworks.

Angular Angular CLI

The popular trend for modern frameworks is to use CLI tools that can help you guide your project without having to configure your own build. Angular has Angular CLI. It allows you to build and run the project using only a few commands. All scripts responsible for building the application, starting the development server, and running tests are hidden in node_modules. You can also use it during development to generate new code. This makes it easy to set up new projects.

Ionic 2

Ionic 2 is a new version of the popular framework for developing hybrid mobile applications. It provides a Cordova container that integrates perfectly with Angular 2, as well as a beautiful library of material components. With it, you can easily set up and build mobile applications. If you like to use hybrid applications, this is a good choice.

Material design components

If you are keen on designing Material, you will be happy to hear that Angular has a library of Material components.

Angular universal

Angular universal is a seed project that can be used to create projects that support server-side rendering.

@ ngrx/store

@ ngrx/store is a state management library for Angular inspired by Redux, based on a state that is mutated by pure reducer. Its integration with RxJS allows you to take advantage of push change detection policies for better performance.

For more information about Angular-related class libraries and tools, please refer to: the Awesome Angular list

React Create React App

Create-react-app is a CLI tool for quickly creating new React applications. You can generate a new project, start the development server, and create bindings. Jest (a unit testing tool from Facebook) is also integrated within Create-react-app, making it easier for us to do unit testing.

React Native

React Native is a mobile development platform developed by Facebook based on React. With this platform, React can create a real UI of Native. A series of standard React components are provided for binding. It also allows you to create your own components and bind them to Objective-C, Java, or Swift code.

Material UI

There is also a Material Design Component that can be used for React. Compared with the version of Angular, this version is more mature and can use a wider range of components.

Next.js

Next.js is a framework that is rendered on the server side of React applications. It provides a flexible way to render the application fully or partially on the server, returning the results to the client and continuing in the browser. It tries to make the complex task of creating a general-purpose application as simple as possible, so the settings are designed to be as simple as possible, with a minimum of new primitives and requirements for the project structure.

MobX

MobX is an alternative library for managing the state of an application. Unlike Redux, which stores state in an immutable store, it encourages you to store only the minimum required state and get the rest of the data from it. It provides a set of decorators to define observables and observers and introduces reaction logic into your state management code.

Storybook

Storybook is the component development environment of React. It allows you to quickly set up separate applications to display your components. In addition, it provides many additional components to record, develop, test, and design your components.

Similarly, you can learn more about tools and class libraries from Awesome React list.

Learning curve and development experience

An important criterion for choosing a new technology is whether it is easy to learn. Of course, the answer depends on a wide range of factors, such as your previous experience and a general understanding of relevant concepts and patterns. If we assume that you already know ES6 +, build tools, and all of this, let's see what else you need to know.

React

With React, the first thing you will encounter is JSX. It may seem awkward at first for some developers, but it doesn't add complexity; it's just expressions, actually JavaScript, and a special HTML-like syntax. You also need to learn how to write components, configure and manage internal state using props. You don't need to learn any new logical structures or loops, because all of these are pure JavaScript.

Official tutorials are a good place to start learning React. Once you have completed the official tutorial, you should be familiar with and master the routing mechanism of React. The React Router v4 version may be slightly complex and unconventional, but don't worry too much.

Using Redux will require a paradigm shift, and the free getting started Redux video course can quickly introduce core concepts. Depending on the size and complexity of the project, finding and learning some additional libraries can be a tricky part, but after that, everything should go well.

In fact, React is very easy to get started, and perhaps the hardest part is how to pick the right library for your project or product.

Angular

Angular will introduce you to more new concepts than React. First, you need to use TypeScript. For developers with experience in statically typed languages such as Java or .NET, this may be easier to understand than JavaScript, but for pure JavaScript developers, it may require some extra learning.

The rich technical topics of the framework itself can start from the basics such as modules, dependency injection, decorators, components, services, pipes, templates, and instructions, to more advanced topics such as change detection, regions, AoT compilation, and RxJS. It's all in the document. RxJS is a very important topic and is described in detail on the official website. Although it is relatively easy to use at the basic functional level, it becomes more complex when you move to advanced applications.

All in all, we notice that the barrier to entry of Angular is higher than that of React. The number of new concepts definitely puzzles newcomers. Again, we have to Google some questions before we can find the answer, but, as I said before, whether it is appropriate or not depends on more factors.

Foreground Angular

In March 2017, Angular released version 4.0 (compatible with version 2.x). The official explanation is that the version of Router, the main core component, is already 4.0.0. It will cause confusion if Angular still uses 3.0, as shown below:

In version 4.0, the code volume is greatly reduced (60%), and the loading speed is improved (visible to the naked eye). At the same time, the error information is clearer. According to the official documentation, the version upgrade of Angular will be iterated at a relatively fast speed.

Whether it's a six-month iteration of a large version or a weekly hotfix, you can see that the Angular team wants to quickly capture the market with a strategy of rapid upgrade.

React

On the contrary, the upgrade of React is very cautious, as can be seen from the latest news blog release of v15.5.0.

However, we can see from the blog that React is about to usher in v16, and I don't know what surprise the whole rewritten React will bring to us. However, it should be mentioned that Facebook has released React VR at the end of last year. Interested students can watch the following.

Fit degree

No matter which framework it is, the one that suits you is "good", so you need to measure it from the point of view of the project (product) itself. the following list of questions may not be comprehensive, but at least as a start.

How big is the project (product)? How long will it take to maintain? Are all functions clearly defined in advance or flexibly changed? Are domain models and business logic complex? What platform do you locate? Web, cell phone, desktop? Do you need server-side rendering? Is SEO important? Do you handle a lot of real-time event streams? How big is your team? How rich are your developers and what is their background? Are there any off-the-shelf component libraries you want to use?

If you are working on a large project and want to minimize the risk of making a wrong choice, consider creating a demo to validate the product concept first. Select some of the main features of the project and try to implement them in a simple way using one of the frameworks. Demo doesn't usually (and shouldn't) spend a lot of time, but it does provide some valuable experience to help you validate key technical requirements. If you are satisfied with the results, you can continue to build fully. If not, it will give you plenty of time to re-choose. During the launch of the project, you can also use some development tools that support Angular and React to improve development efficiency, such as Wijmo, a series of development controls including HTML5 and JavaScript for enterprise application development. Whether your application is mobile, PC, or must support IE6,Wijmo Enterprise can meet the needs.

Let's take a look at the comparison and experience of a senior programmer on these two frameworks:

First of all, my current experience is that both Angular and Ember have only played TODOMVC's tutorial,React, and they are writing a Chrome App and a small project of the company.

Recently, there happens to be a new project evaluating whether to use Angular,Ember or React (+ Flux). I would like to make a few comments on it.

Angular.js

First of all, behind the Angular is Google (is that why the official website is blocked? ), so there is no need to worry about the community foundation, and the whole ecology is already very complete, ranging from the most basic Tutorial to StackOverflow problems to the analysis of the framework itself, so from this point of view, Angular should be relatively easy to use.

But Angular's current problems also seem obvious.

1. Performance

Sample,Angular, which is also TODOMVC, is fully loaded with 1.1s (WebPagetest-Visual Comparison). At present, the one I use based on Angular is Kibana. I have to say, it's really slow.

2. Angular 2.0

Angular 2.0 is almost a framework for overturning redo, and it is estimated that there will be no 1.x upgrade solution. So it would be an awkward time for a new project to adopt Angular. Similarly, such a big change seems to prove that 1.X is not so good. This article recommends taking a look at Why you should not use

AngularJs

React.js

The big feature of React is "light", coupled with the good idea of VDOM, which makes React very fast (it loads in about 0.3 seconds in the above test). In addition, a big difference between React and Angular is that React uses one-way data flow.

The disadvantage of React is that it is probably too new to say whether there will be any major API changes in the future. For those who use React on large and stable projects, I only know that there is Yahoo's Email. So now there are few criticisms of React, maybe it's not that he really doesn't have a pit, but that those holes haven't been stepped out yet.

And React itself is just a V, so if a large project wants a complete framework, it may also need to introduce something related to Flux and routing. I haven't studied React's routing, but there have been some criticisms of Flux's words.

The above is all the content of this article entitled "what's the difference between JavaScript Framework Angular and React". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.