CHAPTER #2

Angular vs React – Comparisons for the Busy and the Curious Ones

Both React and Angular are popular frontend technologies. This article will help you decide which will be a better fit for your project.

Last Update

18 Nov, 2020

Reading Time

10 Min

Authors
Anna ŁachFull Stack Developer
Linkedin Link
Olga GierszalEditor
Linkedin Link

Introduction

There are lots of articles comparing Angular vs React, yet they rarely provide actionable answers for tech managers at decision crossroads.

We don’t want to waste your time.

That’s why we’ve divided this article into two parts:

  • Part 1 – simple answers for the busy ones.
  • Part 2 – carefully comparison of business and tech aspects.

Now let’s investigate which technology is better for your project.

Tip: To broaden your horizons, check also React vs Vue comparison. Want to cross-check React to Angular and Vue at once? Scroll this article down and find a bonus summary table there.

Part 1: Angular vs React – Simple answer (for the busy ones)

React appeared on the market to solve a few problems development teams had with Angular – for example, its performance.

Interestingly, during the last few years, Angular’s team did a fantastic job improving and modernizing the framework. They solved the most crucial performance issues by making code bundles a lot smaller. 

Unlike React which is considered a library, Angular is often called a framework, as it offers a complete development tooling. Many frontend developers perceived it as a disadvantage because they needed to work around the default solutions.

React showed up as an answer to these problems, giving developers freedom but at the cost of having to choose (or initially create) solutions on their own. 

So is React better than Angular? 

Opinions are divided. Angular’s greatest flaw – performance, has been greatly improved since its release. When it comes to React, not every developer feels comfortable with the flexibility it provides. 

And that’s where we come to an answer. 

Instead of seeking a “better” technology, let’s find a better “fit” for your particular project. 

Here, the crucial difference between Angular vs React is the fact that they fit different competencies.

Angular

If your team is more experienced in the backend, Java, .NET, or Scala development, choose Angular. 

It provides defined structure, is very opinionated, and leads developers by the hand. It gives almost no flexibility, but also less room for mistakes. 

Angular is generally harder to master but at the same time more friendly for those who do not work with frontends on a daily basis. It also makes it easier to prepare the app for scaling because it dictates how to design future-proof architecture from the start. 

When it comes to tooling, Angular provides a basic package of tools needed for development, such as routing and navigation, forms, or http client. In the case of React, teams have to choose from multiple third-party libraries available. 

If your project requires several teams working on different features, Angular will provide better unification. Its great CLI lets developers generate components or services, and deliver a code that doesn’t contain business logic. All parts of the code will be written similarly, making it easier to transfer them between teams.

The framework is heavier than React and Vue, but its performance and user experience are comparable. 

In the case of app types, when there are many updates on the screen, Angular may experience efficiency problems. For example, it may have problems with responding quickly to changing state in real-time apps. 

React

React is modern, unopinionated, and flexible. It will be a better choice for the teams of frontend specialists who know how to deal with that much flexibility. In the case of React, you can count on great community support and many useful tools, libraries, and plugins already created by the contributors. 

React is highly scalable and helps teams deal swiftly with even the most complex interfaces – but requires more attention from the very start. No strict patterns means more freedom in structuring app architecture, which is a delicate process in and of itself. 

This flexibility is exactly what makes React a perfect choice for building large scale apps. However, you need to remember that big React projects require a team of frontend experts who know how to make use of its modular nature and keep the folder structure in order.

Part 2: Angular vs React – Details (for the curious ones)

Table of contents

  • Community and talent availability
  • Philosophy
  • Learning curve
  • Framework evolution
  • Technical aspects
  • Productivity
  • Scalability
  • Performance
  • Companies using
  • Summary

Community and talent availability

Stack Overflow Survey

Stack Overflow’s Developer Survey is conducted annually among thousands of developers. They point out their favorite and least favorite technologies, working habits, likes, and dislikes.

Most loved ones

Among the most loved technologies in general, React is in 2nd place, and Angular in the 9th.

Angular vs React which is most loved?

Most popular web frameworks

Among professional developers, jQuery year over year is slowly losing ground to React and Angular.

Angular vs React popularity comparison.

GitHub Trends

GitHub stars indicate the hype around a technology. Currently, React definitely exceeds Angular.

Angular vs React trends comparison.

Popularity shouldn’t provide the basis for your decision. However, less popularity may result in lower support and talent availability. 

Community

To assess the size of Angular and React’s communities, we explored data from GitHub.

React has a bigger community on GitHub than Angular. In fact, the React community is well-known for its activity. Solutions created by the contributors are publicly available and are a huge facilitation for developers. React is broadly discussed on Stack Overflow – developers can find answers to many problems there.

Note: Bigger community means more talents on the market.

Talent availability

The State of JavaScript 2019 compares developers’ experience in Angular and React. You’ll find the highest number of experienced developers who are not willing to switch to another technology in the case of React. 

The figures speak for themselves: 72% of respondents used React and would use it again. That percentage has grown steadily over the last four years. That means there are lots of talented and experienced developers out there. 

Angular vs React experience comparison.

On the other side, almost 70% of respondents expressed negative emotions about Angular. They either used it and would not use it again, or heard of it but are not interested. 

Angular trends changed drastically in 2018, when, according to GitHub data, Vue and React gained more popularity. Therefore, it may be harder to find Angular developers than those who code in React.

Angular vs React developer experience comparison.

Philosophy

Angular

Angular is so complex, that sometimes it’s called a platform. 

It gives developers a full set of tools to build reactive UI and a big ecosystem of third-party components. It helps with controlling UI, routing, state management, sending Ajax HTTP requests, testing, offline support, supporting PWAs, and others. 

To write Angular apps, developers need to use TypeScript.

React

React is a library that gives components to build UI, allows for rendering content to the DOM and controlling it. It has built-in state management support, but it doesn’t apply to every scenario. 

React doesn’t dictate any architectural patterns – developers are free to design the architecture. 

To write React apps, developers use JavaScript and JSX.

Learning curve

Angular

Angular’s learning curve is significantly steeper because of the complex syntax and strict patterns. However, even developers who are not experienced with frontend should be able to find their way around Angular, as it will mostly lead them by the hand, limiting the possibility of making a mistake.

Backend developers may find Angular easier to understand because its thinking model is similar to the backend languages.

React

Frontend developers will find React much more straightforward than Angular. After all, they already know HTML, CSS, and JavaScript. There are no complex logic structures, but your team may need to learn JSX to code with React.

It’s worth noting however that advanced features require using third-party libraries, so it’s best to work with developers that already have some experience in choosing them.

Framework evolution

Both frameworks are under active development: they change, new features are added and some of the old ones are removed. 

Angular

A new major version is released every six months. Sometimes changes are minor, another time, like with Angular 9, they are big: yielding much smaller and faster bundles, which completely changed the internal runtime.

React

React doesn’t have a strict release schedule. Version 16 has been here for a while, but new features were added, e.g. in 16.8 React hooks appeared for the first time. They allow developers to build an entire app with functional components, no classes. React 17 was announced with no major changes.

Technical aspects

Features

Angular

  • Ahead-of-time transpiler – during the building process it converts TypeScript and HTML into JavaScript, which can be understood by all modern browsers.
  • Ivy renderer – it translates the components and templates into JavaScript code, so they can be displayed in a browser, and removes unused parts of code, making it smaller and easier to debug.
  • CLI – it allows developers to create a new project, add features to it, and run tests with a few simple commands.
  • Dependency injection – it keeps the code flexible and modular by allowing components to inherit dependencies from another component or service without the need to create external logic.

React

  • Create-react-app – a boilerplate project to kickoff learning React. 
  • JSX – a syntax extension to JavaScript, used to describe what the UI should look like. React uses JSX for templating. It is not necessary, but developers can write templates easier and faster if they are familiar with HTML. JSX is also type-safe: most errors can be caught during development.
  • Virtual DOM – React keeps in memory a virtual representation of a UI and synchronizes it with real DOM. That’s how it knows when to re-render or ignore specific pieces of DOM and is able to reduce the performance cost of updating it.

Rendering

Server-side rendering is essential if you care about SEO. Users get the content faster, the web page is more accessible when JavaScript fails, and search engines index it easily. 

Angular

Angular Universal is the process of server-side rendering (SSR) an app to HTML on the Server. It renders an app by creating a static view before it gets interactive, making it load faster.

React

You can use Next.js, an open-sourced React framework, for creating server-side rendering applications. Also, React API supports an object called ReactDOMServer. It comes handy while displaying components in the form of HTML code.

Testing and debugging

Note: since JavaScript is a dynamically typed language, achieving 100% testing goals is difficult. That’s why code has to go through a strong set of tests.

Angular

Angular offers useful features like isolation of the unit of code or dependency injection. With Angular CLI developers install everything they need to test an app with the Jasmine test framework.

React

To test React code developers can use tools such as Jest or Mocha. They both run test cases as part of the development process and allow function mocking, reducing the number of dependencies and making testing faster and more predictable.

Productivity

Ease of use

Angular

Angular’s command-line interface is easy to set up. It comes with testing tools, and simple commands. Encapsulation ensures that developers who are new to Angular can easily read the code and work more productively.

React

With React, creating a project with a fitting setup is made easy with the use of create-react-app. JSX allows React to show useful error and warning messages, pointing out any potential problems. Developers have access to a huge ecosystem of libraries and tools, but they need to know how to choose right from a vast number of options. 

Components

Both frameworks are built of components. It makes code highly reusable, speeds up the development, and facilitates updates. 

Code reusability leads to optimized coding practices, consistent performance, high quality, and easier maintenance. Functional components can be easily replaced, decoupled, and reused in other parts of the app. 

Component architecture also simplifies the testing process.

Some developers complain about Angular’s complex logic and its limited ability to properly reuse the components. 

For once, we have a clear winner: React is the king of components.

Migrations through versions

Angular

Angular is updated every six months. Each time that happens, developers have another six months before any major API change is deprecated.

React

Upgrades through versions are very accessible. To ensure seamless migration developers can use third-party scripts like codemod.

Scalability

Since we’re talking about frontend frameworks, the scalability mainly comes down to organizing the code and the app’s architecture.

Angular

Angular seems to be the easiest when it comes to creating a scalable app. The framework makes developers follow the right patterns from the beginning. Development teams still have to be careful, because Angular components are not as easy to manage as React components.

React

With React, to create a scalable app developers need to think everything through from the start. Nevertheless, it’s a perfect choice for large apps because components allow for scaling the architecture easily. 

Performance

Code bundles (your code and the framework code combined) affect startup performance, especially in small apps. Angular is bigger than React, even though the team has done excellent work decreasing the size of code bundles along with version 9

The size itself isn’t that big of a deal, especially when it comes to bigger apps. Developers can also use various optimization techniques, like Lazy Loading. 

What affects runtime performance the most, is the DOM type.

Angular

Angular uses real DOM and two-way data binding, so all the changes made in the Model are replicated also into the Views. While translating a heavy app, it may slow down the performance. 

React

React uses Virtual DOM which enhances the performance of apps that need regular content updates. Single-direction data flow gives better control over the project.

Runtime performance can be checked via benchmarks, where lots of JavaScript frameworks are compared to one another. Angular and React both deliver great runtime performance. 

Note: We’re looking at extra subtleties here. Angular and React are among the fastest JS frameworks, and their performance is smooth enough to satisfy any user.

Examples of implementation

Angular

The Guardian – as a website for the latest news, The Guardian is updated all the time and loaded with content – Angular handles that task perfectly. RxJS extensions allowed developers to create infinite scrolling of search results.

Weather.com – it’s a real-time data application. Developers were able to create flexible widgets adapted to all devices’ needs. Also, Angular allowed for real-time data fetching.

T-Mobile – in this e-commerce app Angular reduced the content loading time with server-side rendering. The app acts smoothly, the performance is excellent. Also, the team implemented the dynamic page composition.

React

Instagram – the app is completely based on React.js library, offering numerous features like geolocation, Google Maps APIs, search engine accuracy.

Netflix – they used React on their platform called Gibbon used for low-performant TV devices. React helped them improve startup speed, runtime performance, and modularity.

Yahoo Mail – the app requires many updates regularly. Earlier, lots of the components were created in MVC pattern which doesn’t fit big apps well. Using React, developers improved modulation and it’s easier now to update the User Interface.

Angular vs React – Which to choose?

In the Angular vs React debate, there’s no generally better choice. Each solution has its benefits and limitations, fits different projects and teams.

While making a decision, consider your team’s characteristics, project requirements, and preferences. Your location may also be important if you want to hire new developers.

If you have a team of frontend developers, who like flexibility and know how to handle it, they will definitely prefer React. 

Angular lies closer to the backend, so it will be easier to learn for Java, Scala, or other backend experts. 

React has a larger community than Angular and it has the support of the biggest players.

Bonus: Angular vs React vs Vue

Tip: To discover more differences between React and Vue, read the next chapter.