Nowadays, the two JavaScript frameworks Angular and React are very popular, and the choice of these two frameworks has become the most common question nowadays. And or issues considered by architecture designers, this article may not be able to tell you which framework is better, but try to compare the two from more angles and provide you with more reference opinions when making your choice.

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 more The framework also makes the choice easier.

Questions about the framework itself:

• Is it mature? Who is behind it?

• What functions does it have?

• What architecture and model are used?

• Is the ecosystem rich?

Questions for self-reflection:

• Can my team and I learn and master easily? Is

• 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, while React is a UI component library, so we will In the analysis, some class libraries that are often used with React will be discussed together.

OK, let’s start... …

MATURITY

As a mature developer or a person who can decide the architecture and technology direction, a An essential skill is to be able to balance the relationship between mature technologies and cutting-edge frameworks in work and projects, which can not only maintain the advancement of personnel and technology, but also ensure the delivery quality of projects or products. Therefore, you must be careful of the following possible Risks:

• The framework may be unstable.

• The main developer (sponsor) may suddenly give up.

• If you need help, there may not be a large knowledge base or community available.

Fortunately, whether it is Angular or React, there seems to be no need to worry about the above risks

React

React is developed and maintained by Facebook for own products, including Instagram and WhatsApp. It's 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 used in Google's Adwords and Fiber projects. Since AdWords is an important money-making tool for Google, it is natural that Angular is unlikely to die suddenly.

Function

As mentioned earlier, Angular itself has many more functions than React. Of course, richer functions are an advantage for a framework. It may also be a shortcoming. Both frameworks have some of the same core features: Componentization, data binding, and platform-independent Render mechanism.

Angular

In addition to providing some features that require the latest browser support, 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 testing tool

The advantage of rich functions is that you don’t need to spend extra energy to select third-party class libraries. However, this also leaves you with no choice. You have to choose, even if you don’t need these functions (the latest release of Angular4 seems to have realized this problem)

React

Compared with Angular, the functions provided by React itself are relatively "simple":

• No Dependency Injection

• Use JSX instead of traditional HTML Templates

• XSS Protection

• Unit testing tools

Compared with Angular, React gives you a lot of freedom to choose third-party class libraries, such as:

• Routing (React-router)

• AJAX (Fetch or axios)

• Various CSS packages (details See: https://github.com/MicheleBertoli/css-in-js)

• 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 also emerged. If you want to really use or master these two frameworks, A framework, it is very necessary to understand the concepts or technologies that come out:

React

#JSX

JSX is a very controversial topic: some people like It, while others see it as a big step back. React decided to use an XML-like language to combine markup and code in components, writing HTML markup directly in JavaScript code.

While the topic of mixing markup with JavaScript may be controversial, it has an indisputable advantage: static analysis. If an error occurs in JSX markup, the compiler will report an error immediately instead of leaving it to have inexplicable problems at runtime. This helps developers quickly troubleshoot errors and avoid other silly mistakes, such as typos.

Flow

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

Unlike the similarly-purposed TypeScript, it doesn't require developers to migrate to a new language and makes type checking work for your code annotations. Type annotations are optional during the process and can be used to provide additional hints to the analyzer. If you want to use static code analysis while avoiding rewriting existing code, Flow is a great choice.

Redux

Redux is a library that can manage state changes in a clear way. It is inspired by Flux, but with some simplifications. The key idea of ​​Redux is that the entire state of an application is represented by a single object, which is mutated by functions called reducers. Reducers themselves are purely functional and implemented separately from components. This allows for better separation of problems and tests.

If you are working on a simple project, introducing Redux may be a bit out of balance, but for medium and large projects, it is a good choice.

Angular

TypeScript

TypeScript is a new language based on JavaScript and developed by Microsoft. it is javascript A superset of ES2015 and includes features of 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 annotations and type inference.

There is a more subtle benefit. TypeScript is heavily influenced by Java and .NET, so if your developers have background knowledge in one of these languages, they may have an easier time finding TypeScript than plain JavaScript (note how we switched from tools to your personal environment) . While Angular was the first major framework to actively adopt TypeScript, it can also be used with React.

RxJS

RxJS is a reactive programming library that can flexibly handle asynchronous operations and events. It is a combination of Observer and Iterator patterns combined with 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 library has been adopted by Angular for its HTTP module and for some internal use. When you perform an HTTP request, it returns an Observable instead of the usual Promise. Although this library is very powerful, it is also complex. To master it, you will need to know the different types of "observables", "subjects" and about a hundred methods and operators.

RxJS is useful when you're working a lot with continuous data streams (like web sockets), but seems overly complex for anything else. Regardless, when you use Angular, you should at least know the basics of RxJS.

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

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. Sometimes , these tools may be more helpful than the framework itself, so let’s take a look at the most popular tools and libraries related to these two frameworks.

Angular

Angular CLI

A popular trend among modern frameworks is the use of CLI tools that can help you bootstrap your project without having to configure the build yourself. Angular has Angular CLI. It allows you to build and run projects 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 to generate new code during development. This makes setting up new projects a breeze.

Ionic 2

Ionic 2 is the 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. Using it, you can easily set up and build mobile applications. If you like working with hybrid apps, this is a great option.

Material design components

If you are passionate about designing Material, you will be happy to hear that Angular has a Material component library.

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 state mutated by pure reducers. Its integration with RxJS allows you to leverage push change detection strategies 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 into Create-react-app, making it more convenient for us to perform unit testing.

React Native

React Native is a mobile development platform based on React developed by Facebook. With this platform, React can create a truly Native UI. 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 available for React. Compared with Angular's version, this version is more mature and can use a wider range of components.

Next.js

Next.js is a framework for server-side rendering of React applications. It provides a flexible way to fully or partially render an application on the server, return the results to the client and continue in the browser. It attempts to make the complex task of creating universal applications as simple as possible, so the setup is designed to be as simple as possible, with a minimum number of new primitives and requirements on the project structure.

MobX

MobX is an alternative library for managing application state. Unlike Redux, which keeps state in an immutable store, it encourages you to store only the minimum necessary state and get the rest of the data from it. It provides a set of decorators to define Observables and Observers and introduce reactive logic into your state management code.

Storybook

Storybook is a component development environment for React. It allows you to quickly set up a separate application to display your components. Apart from this, it provides many add-ons to document, develop, test and design your components.

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

Learning Curve and Development Experience

An important criterion for choosing a new technology is whether it is easy to learn it. Of course, the answer depends on a wide range of factors, such as your previous experience and general knowledge of relevant concepts and patterns. If we assume you already know ES6+, build tools and all that, 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 to some developers, but it doesn't add complexity; It's just an expression, it's actually JavaScript, and it has a special HTML-like syntax. You also need to learn how to write components, use props for configuration and manage internal state. There's no need to learn any new logic structures or loops because it's all pure JavaScript.

The official tutorial is a great place to start learning React. Once you have completed the official tutorial, you should next familiarize yourself with and master React's routing mechanism. React Router v4 may be a little more complex and unconventional, but don't worry too much.

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

In fact, it is very easy to get started with React. The most difficult part may be how to choose a class library that is suitable 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, this may require some additional learning.

The rich technical topics of the framework itself can start from the basics such as modules, dependency injection, decorators, components, services, pipelines, templates and directives, to more advanced topics such as change detection, zones, AoT compilation and RxJS. These are all in the documentation. RxJS is a heavy topic and is described in detail on the official website. While it's relatively easy to use at a basic functional level, it gets more complicated when moving to advanced applications.

In summary, we note that Angular has a higher barrier to entry than React. The number of new concepts can definitely be confusing to newcomers. Once again, I encountered some questions and had to Google to find the answer. However, as mentioned before, whether it is suitable or not depends on more factors.

Prospect

Angular

Just in March 2017, Angular has released version 4.0 (compatible with version 2.x). As for why it is 4.0, the official explanation is because The version of Router, the main core component, is already 4.0.0. If Angular still uses 3.0, it will cause confusion, as shown below:

The 4.0 version mainly has a significant reduction The code size is reduced (60%), the loading speed is improved (to the extent visible to the naked eye), and the error message is clearer. According to the official documentation, Angular's version upgrade will be iterated at a relatively fast speed

Whether it is a 6-month iteration of a major version or a weekly hotfix, you can see The Angular team wants to quickly occupy the market with a rapid upgrade strategy.

React

On the other hand, React upgrades are very cautious, which can be seen from the latest v15.5.0 release news blog

However, it can be seen from the blog that React is about to usher in v16. I wonder what surprises the entire rewritten React will bring us. However, it should be mentioned that Facebook has released React VR at the end of last year. Interested students can take a look below.

Fitness

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

• How large is the project (product)?

• How long does it take to maintain?

• Are all functions clearly defined in advance or can they be changed flexibly?

• Are the domain model and business logic complex?

• What platform are you targeting? Web, mobile, 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 experienced are your developers and what are their backgrounds?

• Are there any ready-made component libraries that you would like to use?

If you are working on a large project and want to minimize the risk of wrong choices, consider first creating a demo to verify the product concept. Choose some main features of your project and try to implement them in a simple way using one of the frameworks. Demos usually don't (and shouldn't) take a lot of time, but they provide some valuable experience that can help you validate key technical requirements. If you're happy with the results, you can move on to a full build. If not, you will be given ample time to choose again. During the project development process, you can also use some development tools that support Angular and React to improve development efficiency, such as Wijmo, which is a series of development control sets including HTML5 and JavaScript launched for enterprise application development. Whether your application is mobile, PC, or must support IE6, Wijmo Enterprise can meet your needs.

Summary

Through the above 6 aspects, we compared React and Angular, the two hottest front-end frameworks at present, and hope to provide you with some reference when making your choice. . But whether it is really suitable for you, you may not know until you try it.