Today, the two JavaScript frameworks Angular and React are red and purple. At the same time, the choice of these two frameworks has become the most easily asked or considered by architects. This article may not tell you which framework is better. Excellent, but try to compare the two from as many angles as possible to provide you with as many references as possible when choosing.
method of choice
Before choosing, we try to review the framework (or any tool) you will 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.
Problems with the framework itself:
- Is it mature? Who is behind it?
- Has the function?
- What architecture and patterns are used?
- Is the ecosystem rich?
Questions that require self-reflection:
- Can my team and I easily learn and master?
- Is it right for my project?
- Is the development experience good enough?
Strictly speaking, the comparison of Angular and React is not fair, because Angular is a feature-rich framework, and React is a UI component library, so we will use some of the components that are often used with React in the following analysis. Class libraries are discussed together.
OK, let's start...
maturity
As a mature developer or someone who can decide the direction of architecture and technology, an essential skill is to be able to balance the relationship between mature technology and cutting-edge frameworks in work and projects, so as to maintain the relationship between people and technology. To move forward, and to ensure the quality of the project or product delivery, you must be careful about 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, neither Angular nor React seem to need to worry about the above risks
React
React is developed and maintained by Facebook for use in its own products, including Instagram and WhatsApp. It's been about three and a half years now. It is also one of the most popular projects on GitHub.
Angular
Angular is maintained by Google and is used in Google's Adwords and Fiber projects. Since AdWords is an important money-sucking tool for Google, it is natural that Angular is unlikely to die suddenly.
Function
As mentioned above, Angular itself has many functions than React. Of course, richer functions are advantages and disadvantages for a framework. Both frameworks share some of the same core features: componentization, data binding, and a platform-independent rendering mechanism .
Angular
Angular provides the following standard features in addition to some features that require the latest browser support:
- dependency injection
- template
- routing (@angular/router)
- AJAX（@angular/http）
- Forms (@angular/forms)
- Componentized CSS encapsulation
- XSS protection
- unit testing tool
The advantage of feature richness is that you don't need to spend extra effort to select third-party class libraries, however, this also leaves you with no choice, even if you don't need these features (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 tool
Compared to Angular, React gives you a lot of freedom to choose third-party libraries, such as:
- Routing ( React-router )
- AJAX（Fetch or axios）
- Various CSS wrappers (see: https://github.com/MicheleBertoli/css-in-js )
- More powerful unit tests ( 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, it is very necessary to understand these concepts or technologies that follow:
React
JSX
JSX is a very controversial topic: some people love it, while others think it's 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.
Although the topic of mixing markup with JavaScript may be controversial, it has an indisputable advantage: static analysis. If an error occurs in a JSX markup, the compiler will report the error immediately instead of waiting for some inexplicable problem at runtime. This helps developers quickly troubleshoot errors and avoid other silly mistakes like spelling mistakes.
Flow
Flow is a JavaScript type checking tool developed by Facebook. It parses the code and checks for common type errors like implicit conversions or dereferences.
Unlike TypeScript for a similar purpose, it does not require developers to migrate to a new language and annotate type checking work for your code. In a process, type annotations are optional and can be used to provide additional hints to the analyzer. Flow is a great option if you want to use static code analysis while avoiding rewriting existing code.
Redux
Redux is a library that can manage state changes in a clean way. It's 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 pure functions, implemented separately from components. This allows for better separation of problems and tests.
If you're working on a simple project, introducing Redux might be a bit of a loss, but for medium and large projects, it's a great option.
Angular
TypeScript
TypeScript is a new language developed based on JavaScript and developed by Microsoft. It is a superset of JavaScript ES2015 and includes features from 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 a background in one of these languages, they may find TypeScript easier than plain JavaScript (note how we switch from tooling 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 handle asynchronous operations and events flexibly. 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 map, filter, split or merge.
This class library has been adopted by Angular for its HTTP module as well as some internal use. When you do an HTTP request, it returns an Observable instead of the usual Promise. While this library is very powerful, it is also complex. To master it, you will need to understand the different types of "observables", "subjects" and about a hundred methods and operators.
RxJS is great when you're doing a lot of work with continuous data streams (like web sockets), but seems overly complicated for anything else. Anyway, when you use Angular, you should know at least the basics of RxJS.
TypeScript can be said to be a very important feature in Angular. First of all, it provides the 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 complex code or business.
ecosystem
One of the reasons why open source frameworks are so popular is that around them, there will be countless tools, class libraries, and extensions to support the entire framework. Sometimes, these tools may be more helpful than the framework itself. Let's take a look at the related Two of the framework's most popular tools and libraries.
Angular
Angular CLI
A popular trend in modern frameworks is to use CLI tools that can help you bootstrap your project without having to configure the build yourself. Angular has the Angular CLI . It allows you to build and run your project with just a few commands. All scripts responsible for building the application, starting the development server and running the 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 a new version of the popular framework for developing hybrid mobile applications. It provides a Cordova container that integrates perfectly with Angular 2, and a nice library of material components. With it, you can easily set up and build mobile applications. If you like to use hybrid apps, this is a great option.
Material design components
If you're passionate about designing Materials, you'll be happy to hear that Angular has a library of Material components .
universal angle
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 Angular related libraries and tools, see: the Awesome Angular list
React
Create React App
Create-react-app is a CLI tool for quickly creating new React apps. You can generate a new project, start the development server and create bindings. Jest (a unit testing tool from Facebook) is also integrated inside Create-react-app, making it easier for us to unit test.
React Native
React Native is a mobile development platform based on React developed by Facebook. With this platform, React can create a real Native UI. A set of standard React components are provided for binding. It also allows you to create your own components and bind them with Objective-C, Java or Swift code.
Material UI
There is also a Material Design Component available for React . Compared to Angular's version, this version is more mature and can use a wider range of components.
Next.js
Next.js is a server-side rendering framework for React applications. It provides a flexible way of rendering 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 generic 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 required 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 separate applications to display your components. Apart from that, it provides many add-ons to document, develop, test and design your components.
Likewise, more tools and libraries can be found on the Awesome React list .
Learning curve and development experience
An important criterion for choosing a new technology is how easy it is to learn. Of course, the answer depends on a wide range of factors, such as your previous experience and general understanding 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; just expressions, which are actually JavaScript, and a special HTML-like syntax. You also need to learn how to write components, use props for configuration and manage internal state. There is no need to learn any new logical structures or loops, as all of this is pure JavaScript.
The official tutorial is a great place to start learning React. Once you have completed the official tutorial, you should be familiar with and master React's routing mechanism. React Router v4 may be slightly more complex and unconventional, but don't worry too much.
Using Redux will require a paradigm shift, and the free introductory Redux video course provides a quick introduction to core concepts. Depending on the size and complexity of the project, finding and learning some additional libraries can be the tricky part, but after that, everything should go smoothly.
In fact, React is very easy to get started, and the hardest part may be how to choose the right class library for your project or product.
Angular
Angular will introduce you to many 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 additional learning.
The rich technical topics of the framework itself can start from the basics like modules, dependency injection, decorators, components, services, pipelines, templates and directives, to more advanced topics like change detection, regions, 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 relatively easy to use at the basic functional level, it becomes more complex when moving to advanced applications.
All in all, we noticed that Angular has a higher barrier to entry than React. The sheer number of new concepts definitely confuses newcomers. There are some questions that have to be Googled to find the answer, but, as I said 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 that the version of Router, the main core component, is already 4.0.0. If Angular still uses 3.0 will cause confusion, as shown below:
In version 4.0, the size of the code is greatly reduced (60%), the loading speed is improved (the degree that can be checked by the naked eye), and 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 is a 6-month iteration of a major version or a weekly hotfix, it can be seen that the Angular team wants to quickly occupy the market with a rapid upgrade strategy.
React
In contrast, the upgrade of React is very cautious, which can be seen from the latest v15.5.0 release news blog
However, from the blog, we can see that React is about to usher in v16, and I don’t know what surprises the whole rewritten React will bring us. However, it needs to be mentioned that Facebook has released React VR at the end of last year , and interested students can watch the following.
compatibility
No matter which framework is suitable for you, it is "good", so you need to measure it from the perspective of the project (product) itself. The following list of questions may not be comprehensive, but at least it can be used as a start.
- How large is the project (product)?
- How long will it be maintained?
- Are all functions clearly defined in advance or flexible to change?
- Are the domain models and business logic complex?
- What platform are you targeting? Web, mobile, desktop?
- Do you need server side rendering? Does SEO Matter?
- Will you be dealing with a lot of real-time event streams?
- How big is your team?
- How rich 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 making the wrong choice, consider creating a demo first to demonstrate the product concept. Pick some of the 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 provide some valuable experience that can help you validate key technical requirements. If you are satisfied with the results, you can proceed to a full build. If not, it will give you ample time to re-select. In the process of project development, 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.
Summarize
Through the above 6 aspects, I compared React and Angular, the two hottest front-end frameworks at present, and hope to provide some reference for you when choosing. But whether it is really suitable for you, maybe you really need to use it to know
Original link: https://www.sitepoint.com/react-vs-angular/
Please indicate the source of the reprint: Grape City Controls