Should I choose Angular or React? Each framework has a lot to offer and it’s not easy to choose between them. Whether you’re a newcomer trying to figure out where to start, a freelancer picking a framework for your next project, or an enterprise-grade architect planning a strategic vision for your company, you’re likely to benefit from having an educated view on this topic.
To save you some time, let me tell you something up front: this article won’t give a clear answer on which framework is better. But neither will hundreds of other articles with similar titles. I can’t tell you that, because the answer depends on a wide range of factors which make a particular technology more or less suitable for your environment and use case.
Since we can’t answer the question directly, we’ll attempt something else. We’ll compare Angular and React, to demonstrate how you can approach the problem of comparing any two frameworks in a structured manner on your own and tailor it to your environment. You know, the old “teach a man to fish” approach. That way, when both are replaced by a BetterFramework.js in a year’s time, you’ll be able to re-create the same train of thought once more.
We've just overhauled this guide to reflect the state of React, Angular, and their respective advantages and disadvantages in 2020.
Where to Start?
Before you pick any tool, you need to answer two simple questions: “Is this a good tool per se?” and “Will it work well for my use case?” Neither of them mean anything on their own, so you always need to keep both of them in mind. All right, the questions might not be that simple, so we’ll try to break them down into smaller ones.
Questions on the tool itself:
- 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?
Questions for self-reflection:
- Will I and my colleagues be able to learn this tool with ease?
- Does it fit well with my project?
- What is the developer experience like?
Using this set of questions, you can start your assessment of any tool, and we’ll base our comparison of React and Angular on them as well.
There’s another thing we need to take into account. Strictly speaking, it’s not exactly fair to compare Angular to React, since Angular is a full-blown, feature-rich framework, while React just a UI component library. To even the odds, we’ll talk about React in conjunction with some of the libraries often used with 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
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. Sounds good to me.
Angular
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.
Features
Like I mentioned earlier, Angular has more features out of the box than React. This can be both a good and a bad thing, depending on how you look at it.
Both frameworks share some key features in common: components, data binding, and platform-agnostic rendering.
Angular
Angular provides a lot of the features required for a modern web application out of the box. Some of the standard features are:
- dependency injection
- templates, based on an extended version of HTML
- class-based components with lifecycle hooks
- routing, provided by
@angular/router - Ajax requests using
@angular/common/http @angular/formsfor building forms- component CSS encapsulation
- XSS protection
- code splitting and lazy loading
- test runner, framework and utilities for unit-testing.
Some of these features are built into the core of the framework and you don’t have an option not to use them. This requires developers to be familiar with features such as dependency injection to build even a small Angular application. Other features such as the HTTP client or forms are completely optional and can be added on an as-needed basis.
React
With React, you’re starting with a more minimalistic approach. If we’re looking at just React, here’s what we have:
- instead of classic templates, it has JSX, an XML-like language built on top of JavaScript
- class-based components with lifecycle hooks or simpler functional components
- state management using setState and hooks.
- XSS protection
- code splitting and lazy loading
- error handling boundaries
- utilities for unit-testing components
Out of the box, React does not provide anything for dependency injection, routing, HTTP calls, or advanced form handling. You are expected to choose whatever additional libraries to add based on your needs which can be both a good and a bad thing depending on how experienced you are with these technologies. Some of the popular libraries that are often used together with React are:
- React-router for routing
- Fetch (or axios) for HTTP requests
- a wide variety of techniques for CSS encapsulation
- Enzyme or React Testing Library for additional unit-testing utilities
The teams I've worked with have found the freedom of choosing your libraries liberating. This gives us the ability to tailor our stack to particular requirements of each project, and we haven’t found the cost of learning new libraries that high.
The post React vs Angular: An In-depth Comparison appeared first on SitePoint.