Angular vs React – When to use what

Share on facebook
Share on google
Share on twitter
Share on linkedin

Ohoy, religious grounds ahead!

I have been working with both Angular and React applications and have been working for companies that have switched between using Angular or React. From outside, the two frameworks can look like substitutes as they are both single page application framework, but in fact, they are quite different and the switching cost from one to another can be huge, so you might want some knowledge to back up the decision. This is the blog post I wish I had read before making decisions on when to use what.

In short, the main differences between Angular and React is that Angular is a very opinionated framework that comes with many official libraries and a lot of official tools like the CLI. React is, compared to Angular, a very lightweight framework that doesn’t provide much more out-of-the-box than a component structure and the change detection technology. Libraries and tools like IOC, services, routing and form handling, unlike Angular, you have to either implement yourself or get from unofficial third-party libraries.

When to use Angular

Angular is very opinionated and contains lots of tools out of the box. This can be a huge time saver for corporations that have many projects as it is very easy to scaffold a new Angular app with the CLI that has everything a single page application needs to start building an app. You could, of course, use React for this also if you did build this template yourself and maintain it, but that would require just that. Also if the projects have many different people working on them and especially external consultants, the benefit of an opinionated framework is that if you have learned it once, you can be very efficient in a new project from the first day because you are working with the same standard.

When to use React

React is great for bigger custom applications as you are to either build the helper modules like routing, forms, and services/state management or find unofficial third parties. For some that want to build these modules themselves might enjoy not using an opinionated framework.

Because less tooling comes out of the box with React you would often implement the lower level parts yourself with vanilla JS.

Because React basically encapsulates Javascript in a component structure a good use case for use React is when migrating vanilla js application into a SPA application. When migrating JS applications to a single page application I would recommend using react because it is easy to fit the previous logic in React modules without needing to rewrite it, unlike the opinionated “Angular way”. With Angular, it is a “no-go” to use tools like JQuery for manipulating the dom as this should instead be done in the platform agnostic Angular way. Of course, it’s not ideal to use jQuery in React applications either, but because React components are simpler and less opinionated, I would prefer to use React for javascript wrappers.

Performance

There is no real difference in performance from Angular and React.

Angular is doing change detection with events and React is using a virtual dom. Both are implemented in a fairly efficient way. Both can be used efficiently or inefficiently which will have a much bigger say on how an app performs.

Making the decision

Making the decision whether to use React or Angular is about the fit in the organization. If your organization is bigger and you have many different projects it can make development and maintenance easier by streamlining the organization front ends to use Angular. If your organization is smaller and is creating fewer different front ends, eg. a SaaS startup, you might like the simplicity and flexibility of React. Because your only need to maintain one front-end project, you can easier manage a more custom project, instead of using a couple of standard libraries, like it is the case with a standard Angular cli app.

Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Related Posts and Comments

Walkthrough: Building An Angular App Using Tailwind CSS and Nx

In this video, we will cover a walk-through from scratch covering how to Build and Angular app using Tailwind CSS and Nx including Angular standalone components. 🖌 Tailwind CSS setup and usage⚙️ Nx monorepo configuration🧍‍♂️ Standalone components✅ Building a complete app in less than 2 hours with best practices ⏳ Timestamps:0:00 – Intro1:00 – Tailwind

Read More »

18 Performance Optimization Techniques For Angular Applications (podcast with Michael Hladky)

Performance is extremely important in front-end applications as they directly impact the application’s user experience. Poorly performing applications can be frustrating for the end-users. For example, an e-commerce site that is slow and unresponsive might deter users which could have a direct impact on the business.  Although there is a growing number of tools to

Read More »

Announcement: Angular Testing Workshop

I’m announcing a new live workshop: Angular Testing Workshop. It will be half-day workshops over three days, 100% online, where we will learn all the industry best practices with Angular testing so you can apply them in your daily work – taking straight out of my experience with doing Angular testing for big projects. The

Read More »

Server-side Rendering (SSR) with Angular Universal

As the name suggests, Single-page App (SPA) is a single HTML document that can be initially served to the client. Any new views required in the application can be created by using JavaScript solely on the client. Besides this, the request-response cycle still happens, but only to RESTful APIs to get static resources or images.

Read More »

How Fabrice Became An Angular Architect In 8 Weeks

Learn how Fabrice became an Angular architect in 8 weeks. He asked himself “How can I strengthen my knowledge” and he joined Angular Architect Accelerator. Fabrice shares his experience with the course and how he became a better Angular developer. Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Read More »