React vs Angular
We will be comparing two most popular frameworks for web development in 2020 and we take following aspects to conclude which one is better :
● How mature is it and who’s behind it? What kind of features does it have?
● What architecture, development paradigms, and patterns does it employ?
● What is the ecosystem around it?
Maturity
An important part of being a skilled developer is being able to keep the balance between established, time-proven approaches and evaluating new bleeding-edge tech. As a general rule, you should be careful when adopting tools that haven’t yet matured due to certain risks:
● The tool may be buggy and unstable.
● It might be unexpectedly abandoned by the vendor.
● There might not be a large knowledge base or community available in case you need help.
● Both React and Angular come from good families, so it seems that we can be confident in this regard.
React is developed and maintained by Facebook and used in their products, including Instagram and WhatsApp. It has been around for around since 2013, so it’s not exactly new. It’s also one of the most popular projects on GitHub, with more than 150,000 stars at the time of writing. Some of the other notable companies using React are Airbnb, Uber, Netflix, Dropbox, and Atlassian.
Angular has been around since 2016, making it slightly younger than React, but it’s also not a new kid on the block. It’s maintained by Google and, as mentioned by Igor Minar, even in 2018 was used in more than 600 hundred applications in Google such as Firebase Console, Google Analytics, Google Express, Google Cloud Platform and more. Outside of Google, Angular is used by Forbes, Upwork, VMWare, and others.
State Management
Similar to React, Angular components have a concept of a component state. Components can store data in their class properties and bind the values to their templates. If you want to share the state across the application, you can move it to a stateful service that can later be injected into the components.
Since reactive programming and RxJS is a first-class citizen in Angular, it’s common to make use of observables to recalculate parts of the state based on some input. This, however, can get tricky in larger applications since changing some variables can trigger a multi-directional cascade of updates that’s difficult to follow. There are libraries for Angular that allow you to simplify state management at scale. We’ll have a closer look at them later on.
React State Management Libraries
The introduction of hooks has certainly shaken up state management in React. There are ongoing discussions if there even is a need for a third-party state management library. Even though hooks address the immediate need for working with the state, other libraries can still push this further by allowing us to use time-tested implementation patterns, lots of additional libraries, and development tools.
Redux is a state management library inspired by Flux, but with some simplifications. The key idea of Redux is that the whole state of the application is represented by a single object, which is mutated by functions called reducers. Reducers themselves are pure functions and are implemented separately from the components. This enables better separation of concerns and testability.
MobX is an alternative library for managing the state of an application. Instead of keeping the state in a single immutable store, as Redux does, it encourages you to store only the minimal required state and derives the rest from it. It provides a set of decorators to define observables and observers and introduce reactive logic to your state.
Angular State Management Libraries
If the native state management capabilities are not enough for you, there are several popular third-party libraries available in this area.
The most popular one is NgRx. It’s inspired by React’s Redux but also makes use of RxJS to watch and recalculate data in the state. Using NgRx can help you enforce an understandable unidirectional data flow, as well as reduce coupling in your code.
NGXS is another state management library inspired by Redux. In contrast to NgRx, NGXS strives to reduce boilerplate code by using modern TypeScript features and improving the learning curve and overall development experience. Akita is a newer kid on the block, which allows us to keep the state in multiple stores, apply immutable updates, and use RxJS to query and stream the values.
Adoption, 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 a general familiarity with the related concepts and patterns. However, we can still try to assess the number of new things you’ll need to learn to get started with a given framework. Now, if we assume that you already know ES6+, build tools, and all of that, let’s see what else you’ll need to understand.
React
With React, the first thing you’ll encounter is JSX. It does seem awkward to write for some developers. However, it doesn’t add that much complexity: just expressions, which are JavaScript, and special HTML-like syntax. You’ll also need to learn how to write components, use props for configuration, and manage internal state. You don’t need to learn a new template syntax, since all of this is plain JavaScript
While React supports class-based components, with the introduction of hooks, functional development is getting more popular. This will require you to understand some basic functional development patterns.
We were genuinely surprised at how easy it was to get started using React. Even people with a back-end development background and limited experience in front-end development were able to catch up quickly. The error messages you might encounter along the way are usually clear and provide explanations on how to resolve the underlying problem
Although TypeScript is not required for React, we strongly recommend you assess and adopt it in your projects.
Angular
Learning Angular will introduce you to more new concepts than React. First of all, you’ll need to get comfortable with TypeScript. For developers with experience in statically typed languages such as Java or .NET, this might be easier to understand than JavaScript, but for pure JavaScript developers, this might require some effort. To start your journey, we can recommend the Tour of Heroes tutorial.
The framework itself is rich in topics to learn, starting from basic ones such as modules, dependency injection, decorators, components, services, pipes, templates, and directives, to more advanced topics such as change detection, zones, AoT compilation, and Rx.js. These are all covered in the documentation. Rx.js is a heavy topic on its own and is described in much detail on the official website. While relatively easy to use on a basic level, it gets more complicated when moving on to advanced topics.
It might seem that we favor React here, and we definitely do. We’ve had experience onboarding new developers to both Angular and React projects of comparable size and complexity, and somehow with React it always went smoother. But, as I said earlier, this depends on a broad range of factors and might work differently for you.
Popularity and Community Feedback
Both frameworks are highly popular and have communities of followers and advocates. There are also numerous articles suggesting you use one or the other technology, mostly highlighting their positive sides. Let’s see if we can find a more objective way to represent the popularity of each project and developer satisfaction.
The npm download statistics shows almost five times more downloads for React than Angular. Google trends also reports more searches for React worldwide.
The 2019 State of JavaScript report lists React as the most popular front-end framework, with Angular being second to last, preceding only Ember. 71% of the participants said that they’ve used React and would use it again. Only 21% of the participants said the same about Angular, and 35% said that they’ve used Angular and would not use it again (only 8% said that about React).