Angular vs. React: Which One to Choose?

There is a lot of heated debate on the Web these days about which JavaScript framework to use. There are a lot of options as far as frameworks go, and the two main contenders are Angular and React, which are going to be the focus of this post.

Note that our goal here is not to figure out a clear winner because there is no such thing. What we are going to see instead is that choosing the framework that is right for your project is mostly a matter of preference, size of the application to build, familiarity with JavaScript, or knowledge of other languages. In other words, for some development teams, React will make perfect sense, while for other groups, Angular would be the obvious choice. There is nothing wrong with that, quite the contrary.

Let’s get into the details and compare the pros and cons of Angular vs. React, while concluding the top 5 main takeaways:

Angular vs. React – Pros, Cons and Top 5 Takeaways

Two different ways to do the same thing – Angular vs. React Takeaway #1
Framework vs. Library – Angular vs. React Takeaway #2
Small application vs. Enterprise software – Angular vs. React Takeaway #3
Javascript knowledge vs. Framework knowledge – Angular vs. React Takeaway #4
What about test automation? – Angular vs. React Takeaway #5
Conclusion

Two different ways to do the same thing – Takeaway #1

Both Angular and React are about writing components, which means that you are essentially creating your own custom HTML elements.

Here is what a simple Hello World can look like in React:

Using ReactDOM to render DOM elements “manually”:

ReactDOM.render(
   <h1>Hello, world!</h1>,
   document.getElementById('root')
);

Or you could be using a class component, which needs a render() method to return HTML generated using JSX:

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, world!</h1>;
    }
}

Or you could be using a function component that directly returns some JSX:

function HelloWorld() {
    return <h1>Hello, world!</h1>;
}

And here is what it looks like in Angular, where a Typescript decorator turns a class into a component, linking that class to an HTML template:

@Component({
   selector: 'hello-world',
   template: ‘
      <h1>Hello, world!</h1>
   ’
})
export class HelloComponent {
}

Note that React already has more than one way to do the same thing, whereas Angular only has one. It’s one of the key differences between these two contenders: Angular is very often opinionated while React isn’t.

Yet, all of these options are about doing the exact same thing: Generating and updating DOM elements.

First takeaway: React is open to many different syntaxes and styles, leaving the choice to the development team on what to do. On the other hand, Angular focuses on doing things in just one way.

Framework vs. Library – Takeaway #2

React is a library. It gives you a few different ways to write components. Everything else is up to you in terms of architecture, and you’ll likely need extra libraries to build your application. React is not opinionated about how things should be done.

On the other hand, Angular is a framework. It comes with a lot of features and guidelines on how to build your application. Angular is much more opinionated than React is in terms of architecture.

For instance, if you’re building an international e-commerce store and want to display products with prices, Angular has tools you can use to support multiple languages as well as format prices and currencies using the locale of the user. It’s all part of the framework.

React, on the other hand, won’t help you in that case. You’ll have to figure out which external libraries to use or do it all by yourself.

Second takeaway: Angular is a comprehensive framework that provides tooling and APIs for multiple aspects of your web application, such as the build process, testing tools, and APIs, internationalization, form validation and submission, data formatting, and more.

React does not have any of that by default. It’s up to you to find and connect the right pieces to make things happen.

Small application vs. Enterprise software – Takeaway #3

React is a tiny library and can be included on a web page with simple scripts. This makes React a compelling solution to be included in an existing web app, or for a brand new simple application: No build process is needed, you can just add some JS in your page and React is up and running.

Angular is a more substantial framework because of all of the extra features it has. You’ll have to download a few hundreds of megabytes of code just to get started. As a result, Angular might be an overkill for a straightforward app. It’s really more designed to handle complexity and robustness.

As a result, it is not surprising to see that Angular is used mostly by financial institutions, government agencies, insurance companies, the army, healthcare providers, and other enterprise software where consistency, process, and type safety are absolute pre-requisites to any piece of software.

On the other hand, React thrives in Silicon Valley. Most start-ups will find fast and easy to start coding a proof of concept application with React. Developers might feel freer to express themselves than with Angular.

But again, it’s all a matter of background and perspective. I have taught Angular at start-ups, and I have taught React at healthcare companies. There are exceptions everywhere. You can absolutely write robust enterprise applications with React and have a nicely coded proof of concept with Angular.

Third takeaway: While React is mostly favored by start-ups and Angular by enterprise applications, there are exceptions everywhere.

JavaScript knowledge vs. Framework knowledge – Takeaway #4

One thing that one would notice when reading React code compared to Angular code is that React relies heavily on modern JavaScript features such as arrow functions, classes, spread operator, array functions such as map() and forEach().

React was really designed with modern JavaScript in mind and does require developers to be familiar with modern JavaScript features (ES6+).

For instance, here is how you would repeat an HTML element with React:

const HelloList = props => {
    return (
       <ul>
 	 {props.data.map(i => <li>{i}</li>)}
       </ul>
     );
};

On the other hand, Angular provides framework features such as directives and pipes that can be used in HTML templates without writing a lot of JavaScript code, if any, at all.

Here is the Angular code to render a list of items using the *ngFor directive:

@Component({
    selector: 'hello-list',
    template: `
        <ul>
 	   <li *ngFor=”let i of data”>{{i}}</li>
        </ul>
    `
})
export class HelloComponent {

    @Input()
    data: Array<string>;
}

As you can see, the above code has zero pure JavaScript features.

I have personally taught Angular to people familiar with Java or C# and who had very little to no knowledge of JavaScript, and yet those developers were able to build enterprise front-end applications with little to no difficulties at all.

Fourth takeaway: Angular was designed to hide JavaScript specificities as much as possible, while React is at the opposite end of the spectrum and relies on JavaScript for everything.
You need to know JavaScript fairly well to understand React, while you can work with Angular without any prior JavaScript exposure.

What about test automation? – Takeaway #5

When it comes down to test automation, there is little to no difference at all between the two frameworks. That’s because both Angular and React end up generating HTML that can be parsed, queried, and checked.

Angular might have a small advantage, though. Angular components do show up as their own element in the DOM, which is not the case with React. As a result, finding a specific component in the DOM with a CSS selector is more comfortable with Angular: One can simply select a component by its tag name.

Final takeaway: As far as test automation goes, Angular and React are really the same thing, with the one exception mentioned earlier: Angular components show up as DOM elements, which makes them easy to be selected with CSS selectors.

Conclusion – Angular vs. React

Our goal was to take a look at two different front-end frameworks to understand their similarities and differences. We saw that no matter which one you choose, you can build robust applications and the decision you make when you pick either option won’t be limiting in any way.

Your decision should be based on the background of the team of developers that are going to work on your project.

If all developers are well versed in modern JavaScript, React can be adopted easily.
On the other hand, back-end or full-stack developers coming from Java or C# usually find the Angular learning curve much easier.

It is also important to note that type safety can be achieved with both frameworks. Angular uses Typescript by default, so you get types, classes, interfaces, and many object-oriented features out of the box. You can do the same with React by using Typescript too. As always with React, it’s just a matter of figuring out which libraries/extensions/compilers to use, and you’re up and running.

In any case, we live in an era where we have a lot of options and excellent development tools and frameworks that make front-end web development much more accessible than what it used to be a few years ago. This is something we should all be thankful for. Long live all front-end frameworks! 🙌✨