The battle is on. The warriors enter the arena to the loud cheers of frontend developers around the ring. In the right corner, React, introduced in May 2013 by Facebook. In the left is Angular, an open source project born in September 2016 and maintained by Google. The bell rings. It’s on.
But is it really a fair fight? What is it that sets the two apart? And who should you be betting on in 2020 and beyond?
Angular vs React in 2020
Before we dive in, it’s worth taking a moment to check on what our mighty warriors have been up to these past 12 months. Have they been slacking? Or training non-stop to be the best in the JavaScript frontend arena?
Angular 9 and beyond
Released in February 2020, Angular 9.0.0 has been long awaited by Angular devs. Angular 9.0.0 introduces a bundle of additions and fixes to Angular. Among other improvements, Angular 9 replaces the ViewEngine (VE) compiler with Ivy, Angular’s next-generation compilation and rendering pipeline.
First, Ivy offers significantly improved performance. Second, Ivy includes a streamlined toolset for debugging, testing, and building large and complex web applications. It also helps reduce bundle sizes, especially for larger applications.
With Angular 10 just around the corner performance remains one of the top priorities for framework developers.
React 16+
So, on one side of the ring, Angular is focusing on improved performance and reduced package size. On the other side of the ring, the latest React updates are focused on bug fixes and plugging potential security vulnerabilities. In addition, React 16+ attempts to improve asynchronous programming capabilities.
Released in February 2020, React 16.13.0 includes numerous deprecation warnings for unsafe methods and components, as well as bug fixes, naturally. In terms of new features, the latest additions were already introduced in React 16.9.0, released in August 2019. The new features were focused on improved testing of asynchronous code and measuring performance.
Now that we’re all up to speed on the latest developments, we can take a deep breath, and dive in.
Library vs Framework
The first and main difference between Angular and React is in standalone capabilities and scope. Angular is a full-featured MVC (Model-View-Controller) framework while React is a lightweight JavaScript UI component library.
In this sense, pitting Angular against React in the arena is akin to a Judoka facing a Sumo wrestler. Each has advantages over the other. But with each bringing a different approach and technique the winner is anyone’s guess.
What this means for you, as a web app developer, is that you need to consider the components and features you will need to have out of the box. Angular packs most of what an average web app needs on-install, and includes capabilities React does not, like built-in routing and dependency injection. React, on the other hand, is not as demanding in terms of structure and approach. Though it lets you offload less-critical functionality to other libraries, it also means adding dependencies and complexity to the project code.
Language
Angular was the first major framework to fully adopt TypeScript – a superset of JavaScript and statically typed language. You can write Angular applications in both JavaScript and TypeScript, but TypeScript is often the choice of programmers looking to make their code more compact and easier to debug than pure JavaScript.
React is based on JavaScript ES6+ and JavaScript XML (JSX) – a template language running on top of JavaScript. What makes JSX (supported also in Vue.js) unique is that it stores markup and logic in a single file. While some may find issues with this approach, JSX has a strong typing system to statically analyze code. This makes it especially friendly to new developers and those of us prone to typos (read: everyone).
It’s worth noting that while you can use TypeScript in React, it is not natively supported.
Real vs Virtual DOM (vs Iterative DOM)
One of the most significant technical differences between React and Angular is how each manages changes in document contents, layout, and structure. While Angular makes use of a Real (HTML) DOM (Document Object Model), React uses a Virtual DOM.
This difference in approach is perhaps one of the reasons why so many frontend developers prefer React over Angular. The virtualization of the DOM makes for significantly better runtime performance.
(Source: https://illustrated.dev/react-vdom)
With a real DOM, like in Angular, the entire tree structure of HTML tags needs to be updated whenever there are any changes. React instead creates a new virtual DOM whenever change is detected, and compares it to the “real” DOM. If the two differ, only then is the real DOM modified where the alterations were made.
The developers managing the Angular open-source project had no choice but to take note of this issue. More and more developers were switching to React to improve app performance. So action was taken. In the recently made official Angular compilation and rendering pipeline Ivy, you can implement an iterative DOM. This approach, while quite different from React’s DOM virtualization, can potentially save up to 30% runtime memory, especially with large Angular applications.
Unidirectional (Downward) vs Bidirectional Data Binding
Data binding is a technique to synchronize UI and logic. React uses one-way data binding (sometimes called Downward Binding) and Angular uses two-way data binding.
The comparison between React and Angular in UI and business logic synchronization and data binding makes for a perfect representation of just how different the approaches are.
In Angular, changes to input in the UI can make changes to the model / component state and vice versa. In React, when you update the model /component state, the change will be rendered in the UI element. Modifying the UI element, however, will not affect the model / component state. You can change this functionality in React by using callbacks or state management libraries like Redux.
Bidirectional data binding may mean less code and less complexity in data flows. On the other hand, Angular can force the developer to be extremely careful and keep two-way data binding within a component. Without such care, you may find yourself with components in undesirable states and multiple sources of truth. These have a tendency to turn into long nights of bugchasing.
(Source: https://www.cleveroad.com/blog/angular-vs-react)
This is just one of the many ways Angular tends to push developers into designing and coding their applications in a certain way. In contrast, React provides flexibility, but also depends on other libraries to enable added functionality. This dependency can, in turn, turn cumbersome with a growing stack of technologies, libraries and components that require constant upkeep.
Community & Documentation
This is not a popularity contest. Sure, when you compare frontend libraries, frameworks or even toothbrushes, odds are you will opt for the most popular and highly rated one. Toothbrushes and herd psychology aside, there are good reasons to consider the availability (and relevance) of both community support and official documentation. It helps if the documentation is good, or at the very least complimented by well-written tutorials and an active community on topical forums.
In this sense popularity does count and React is by far the more popular than Angular no matter what metrics you use. It has more stars and followers on GitHub, more downloads, and is listed as more beloved than Angular/Angularjs in stackoverflow’s 2019 developer survey by quite a margin. 74.5% of developers surveyed loved React, while only 57.6% expressed their affection for Angular/Angularjs.
Why is this significant? As you well know, pretty much all developers of all proficiency levels turn to Google and community forums with questions. This is in fact true for most professions today: when you’re not sure how to do something, Google it and/or ask in the right places online.
With more users asking questions and answering them on the Internet, you have a better chance of Googling up a solution to your problem. In that sense, React has an edge over Angular. Having a larger user-base is not the only advantage React has. Being a Facebook project, it is frequently updated and documentation is available quickly.
Angular is managed by Google, which adds credibility to its reputation. However, since it is less favored by developers you may find yourself relying on available documentation that is insufficient for most.
For a developer considering which of the two they should learn there is an endless list of comparisons and discussion. If those aren’t enough, you can always add to them and ask the community what the right solution is for your specific requirements. We don’t need to tell you that at the end of the day, what matters is what you prefer as a developer, and what each project requires.
The Knockout
At this point, the Judoka and Sumo fighters in our metaphorical arena are giving us weird looks. Of course they are. The real battle here is not in the ring. It is between the frontend developers around the ring.
It’s worth noting that the differences we listed are only a handful of the properties that differentiate React from Angular. From licensing to backward compatibility and approaches to native app development – there are more differences than similarities, really. Especially when you consider that both are essentially used for the same goal – web application development. Very different means to an end.
If we had to pick a winner, it would be you, the web developer. Why? Because understanding the most significant points of distinctions between Angular and React puts you in a perfect position to select the fighter you want at your side as you tackle your next project.
