Angular or React: which to choose and practical uses

by Diogo Salaberri, Technical Project Manager @ Xpand IT

After several years in which JavaScript was used to make small animations when moving elements on the screen or changing the colour of HTML components, the future is here! We live in a time where JavaScript is sovereign on the Web. It might not be the most used technology yet, as we still have a lot of legacy code written in PHP, but we are already in a period where we have a wide range of JavaScript solutions, namely React, React Native, Angular, Ionic, VueJS, among others. It’s hard to imagine web development without thinking about JavaScript. We have multiple options in terms of tools, countless options for styling, bundling, packaging, etc. We live to see JavaScript break the Frontend barrier and reach, with strength and robustness, the Backend one too. What a time to be a Web Developer, friends!

Before, Frontend uses grew in complexity. Micro frontends, web components, etc., were mentioned. Now, we have more choices than ever — more options than we have fingers to count them. And that brought us, besides this world of possibilities, a dilemma also raised by Uncle Ben in the Spider-Man movies.

And it is here that we will confront, in the best possible sense of the word, the two giants of the Web: Angular vs. React. These two titans divide opinions and fan bases. This blog post aims to draw a parallel between the two tools: React as a library and Angular as a framework. We’ll go through the basics, giving a bit of focus to the conception of each, going through comparisons in more specific fields, as well as talking about projects and structure of the same technologies.

Disclaimer: This post will not tell you what to do nor tell you what not to do. It has not the slightest intention to be polemic or even create friction between the tools. Who likes React, should go with it, and who loves Angular, should do the same. We want to create a healthy parallel here and make you think about the approaches, powers and weaknesses of our “super-heroes”.

The framework for Web development, lord of structure, master of organisation.

Angular is an open-source framework/platform based on TypeScript for web development. It was created by Google’s Angular team, which remains responsible for its management. Angular (version 2 or higher) is a complete reproduction of its predecessor AngularJS. Being a framework, Angular brings with it a number of standards and packages built-in, like a http solution for API calls, routes, etc.

The freedom library, where I assemble my project according to my needs.

React, in turn, is a library whose main task is to facilitate the creation of web interfaces. Being just a simple (and powerful) library, React works in a composition model, through which we can aggregate libraries according to our needs. Freedom defines this choice; we don’t have many rigid rules by choosing React. We have options, lots of options.

• Purpose:

– Angular has the purpose of acting as a complete solution (framework). It brings with it small libraries to support development, and it also establishes its own organisation;

– React has as purpose to be a solution to create interfaces. It acts as a composition concept, where new libraries are added as needed.

• DOM [Document Object Model]:

– Angular uses an incremental DOM strategy, whereby when a new DOM is created, it is compared to the previous one. The differences are applied to the actual DOM, allocating memory if necessary;

– React, on the other hand, uses a virtual DOM strategy. Whenever the DOM changes, a new virtual DOM is created, compared to the previous one. The differences are only applied to the real DOM.

• Data Binding:

– Angular uses One or Two Way Data Binding, where the Model updates the UI and the UI updates the Model;

– React uses only One Way Data Binding, where the Model (State) updates the UI, but the UI doesn’t affect the Model (State).

• SSR (Server Side Rendering):

– Angular has the option of Angular Universal to perform SSR;

– React can be configured to get SSR or even use Next.JS.

• TypeScript:

– Angular has TypeScript by default, which in itself has great advantages;

– The use of TypeScript in React is optional.

• Concept separation:

– Angular has, and even enforces, a certain code organisation, in which JavaScript, template (HTML) and Styling (CSS) have separate archives;

– React, on the other hand, has a concept in which the HTML template is brought inside the JavaScript, through the use of JSX [JavaScript Syntax Extension].

Up to this point, I have pointed out several comparisons that can easily be found on the Internet. There are many good texts that talk about these same topics. From here on, I present some practical comparisons, very much based on the experience I had with the two options. Here the discussion gets a bit subjective, but let’s go.

• Project size:

– Angular makes more sense when the project is large in number of files and complexity. By having this framework structure, with a lot of things already defined from the beginning, it keeps the project organized during its growth;

– React, on the other hand, is not a bad solution. However, it strongly depends on a standards definition. For offering freedom, if this framework isn’t extensible and helps project growth, this can become a problem in larger applications.

• Team size:

– Angular, for the same reason as native framework structuring, helps when code is shared by larger teams. When developing in a repository in which multiple people develop code, rules help keep the project afloat;

– React will need to establish rules to protect its freedom. Rules that will allow you to keep the project on track during multiple code drops by different people who are likely to think in different ways.

• Learning curve:

– Angular, of course, has a bigger learning curve, especially as it has many small libraries within its starter package;

– React is already much more straight to the point. With a few days you can already start a project and create components.

• State management:

– Angular makes use of NgRx, which is a state management library, allowing this management to be reactive. The use of such solution in Angular projects is a little rarer because Services or even local/session storage are normally used as crutches;

– In React, each component has its individual State. Besides this, the use of Redux [open source JavaScript library] to manage the global state is quite common in React applications.

For those who live in the world where both solutions are present, and if they have been able to experience projects of different sizes using React or Angular, it is quite clear that the right choice here always depends on the context.

React will be the best choice for certain scenarios, Angular will be better for others. So, both are winners, and if used wisely, they will always bring great results. To conclude, in this duel of giants, the Web is the winner. We, who love code, always win with options of such great value and power at our disposal.