Angular vs. React – choosing the right technology for your next project (Update)

The last couple of years were incredibly intense for Frontend Developers. On the one hand, the transition from static server-side templating (where JavaScript's role was usually cut down to jQuery DOM manipulation) to the Single Page Applications (based mainly on a frontend routing and REST API) made a huge impact on the whole web industry. On the other, new frameworks began to emerge on an almost daily basis. This made Frontend Developers get accustomed to using a substantial number of technologies, preprocessors, and compilers, some of which – like Grunt, Bower, or RequireJS – were popular at that very moment of their inception but didn’t really stand the test of time.

After the unpredictable era of the rise and fall of JavaScript SPA frameworks (as well as libraries), came the times marked by the superiority of React, Angular, and Vue. This, in turn, made the web development world more stable – to the point where it’s safe to say that there’s little chance of these technologies being forgotten as quickly as their predecessors.

Since I'm not very experienced with working with Vue, I decided to ditch it in this article and focus on the remaining two solutions that I’m much more familiar with. With that in mind, how about making a side-to-side Angular vs React comparison?

Angular vs React: how the two came about

Before I dig deep into differences and similarities between Angular and React, let’s take a closer look at how they were born and how they grew to become two most renowned JavaScript frameworks.

Long ago, in the faraway land: the beginnings

The very first version of Angular was created by Google in 2010. Back then, we were given the MVW (Model, View, Whatever) architectural pattern, dependency injection, and the two-way data binding as the core functionalities of a framework. With the easy usage, fast implementation of directives, and well-documented code, it quickly gained popularity among web developers. These features proved valuable to the IT community – as a result, Angular gained a lot of supporters in no time. And, since it was well-advertised as well, there quickly emerged plenty of free courses for every JavaScript development novice that wanted to become a pro, which only added to the popularity of the solution.

However, because AngularJS was not a perfect tool, plenty of developers started to complain while digging deeper into the framework. One of the biggest disadvantages of AngularJS was its performance. The two-way data binding – the same concept that sounded so awesome when Angular was launched –turned out to be overkill at a certain level of app complexity.

Not long after the release of AngularJS, its biggest competition came to life: in 2013, the issues of scalability, performance, and optimization were resolved by Facebook with the introduction of React. Instead of two-way data binding, React used a different programming concept and switched to the unidirectional data flow. The tool’s component-based architecture, where data is passed from the highest component to the lower ones, allowed developers to build applications brick by brick and feature by feature. React syntax was clean and easy to both learn and understand – understandably, programmers quickly started to change sides, choosing React over Google’s brainchild.  Additionally, thanks to JSX support React taught devs one more interesting thing (which, back then, was rather peculiar) – namely, typing HTML inside JavaScript.

Angular vs React: moving on

When the reign of hearts of thousands of Frontend Developers is at stake, it seems only reasonable to keep improving your solution until it reaches a certain level of perfection. As the competition between Angular vs React grew fiercer, both solutions did exactly that: evolved in the attempt to gain ground.

In response to Facebook’s moves, Google announced a new version of Angular, which was officially released by the end of 2016. It’s worth mentioning that from here on, every new version of Angular is just called "Angular", while the previous one is called "AngularJS". A lot of older concepts, such as dependency injection, remained in place but the framework gained some new abilities as well. Some of them were borrowed directly from React – for instance, component-based structure or one-way data binding – while others were completely new and unique to Angular.

One of the biggest steps forward was moving from regular JavaScript to a TypeScript: a language developed by Microsoft (which is eventually compiled to JavaScript but introduces a lot of features that are not available in JavaScript). Another new feature added to Angular was RxJS, a library for handling asynchronous streams of data. Because of these new features, Angular also set up a really high entry threshold for every new developer. To understand how the framework works, you have to not only learn Angular syntax, but also switch to TypeScript, initialize project using Webpack, and have at least a basic understanding of Reactive Programming. To be fair, it is possible to use Angular without TypeScript but it’s a challenging and time-consuming task, to say the least.

React wasn’t loafing around either. Following the big launch, it undertook a series of actions aimed at earning trust and a fine reputation in the community. The first months of 2014 were marked by the onset of the series of conferences known as #ReactJSWorldTour, whose aim was to turn as many curious devs into the solution’s advocates as possible. The hard work paid off in 2015, React was adopted by Netflix and Airbnb. This very year, Facebook went a one step further by introducing to the world a React-based framework for building mobile apps: React Native (but since we’re focusing on web development today, let’s leave this topic aside for now).

In the following years, React continued to grow in popularity and functionalities – some of the most notable changes included improving error-handling, allowing devs to handle lazy loading independently from third-party libraries, or the release of react hooks that facilitate not only sharing logic inside components but also writing clean and reusable code in general.

Angular vs React: how the solutions compare today

Before we go any further with the comparison, let's just have a quick look at the current state of the Angular vs React popularity battle. As of April 2019, Angular boasts over 1100 contributors and 17,5k commits on Github. It’s been starred more than 60k times and, in the last 12 months, it was given 35 stars a day.

Source: Best of JavaScript (Angular)

In terms of the number of contributors and commits, there doesn’t seem to be a glaring discrepancy between Angular and React – Facebook’s solution scores over 1,3k and 13k respectively. The main difference, however, lies in the number of GitHub stars. At the time of writing, React has been starred 147k times, receiving 54 stars a day on average.

Source: Best of JavaScript (React)

Then, it’s worth taking a closer look at how Angular vs React compare in term of interest over time. As shown by Google Trends, the TypeScript-based framework was winning the popularity race until mid-2018, when Facebook’s child took the lead (and haven’t lost it since).

Another way to measure a given solution’s popularity is singling out prominent companies whose products it underpins. Currently, Angular fuels a number of Google’s and Microsoft’s products, as well as GitHub Community Forum, Indiegogo, or Forbes. When discussing the evolution of React, I’ve mentioned it caught the attention of Airbnb and Netflix in 2015 – today, the technology is used by the industry giants such as Instagram, Twitter, WhatsApp, or Dropbox.

Main differences between Angular and React

As befits any proper comparison, it’s time to discuss the differences between the two frontend solutions in question. And, as you may have already guessed, there’s plenty to talk about.

Framework vs library

The first and most important thing to remember is the fact that React is not a framework. It's "just" a library that deals mainly with View layer of an MVC architecture and, without external packages, can't provide for example routing. Fortunately, the React community is huge, and devs can browse a variety of ready-to-use and often updated components that will help them build their apps faster.

Angular, on the other hand, is a framework and as such, it comes with a lot of built-in modules like an angular router, angular HTTP module, or angular forms. With that, you don't actually need anything more to start developing a fully functional app. This also means that React may suit you better if you're working on smaller projects that don't require much complexity. Facebook’s brainchild It's also great if you like adding a lot of custom components and want to have more control over your code structure. Otherwise – choose Angular.

How Angular and React work with DOM

Another key difference is that React handles HTML using Virtual DOM – a virtual representation of Document Object Model (DOM defines the logical structure of documents and is represented as a tree of objects). Virtual DOM is just a lightweight copy of a regular DOM that doesn’t have the ability to directly change what's on the screen. This way React updates real HTML elements only if it is absolutely necessary.

At the same time, to make its elements reusable and to encapsulate views, Angular uses web components. Even when we operate on regular HTML files, we can include custom HTML tags and the whole application will still work fine across all modern browsers. This is made possible by Angular components being based on a Shadow DOM concept enables not only hiding the entire DOM logic and styling but also making them reachable only within a component.

In both cases, there are additional features that are strongly recommended by the solutions’ creators – although not necessary to use or understand during the development process. I'll describe them in the following paragraphs.

To handle React's JavaScript approach and to feel more comfortable with DOM elements that are based on Virtual DOM, React is using JSX – a preprocessor that makes your code more elegant and readable. JSX gives the natural feeling of DOM structure since what you are doing is writing HTML in JavaScript (which may seem a bit weird at first). The only problem with this approach is that you have to remember about the special syntax for some specific HTML-like attributes if you want to avoid naming conflicts. For example, "Class", a reserved word in JS, becomes "className".

On the other hand, Angular by default uses TypeScript. It hugely extends JavaScript language by making it more similar to strongly typed programming languages (like Java) and equips it with "superpowers" and new features like enums, decorators, or interfaces. Nevertheless, this also means that the learning curve for every new Angular developer is much higher than for the React one. To start a new project, you have to understand what is a part of TypeScript and where Angular syntax comes in. Oh, and don't forget about Reactive Extensions supported by Angular if you want to handle asynchronous requests (which make a great topic for another article).

Angular vs. React - comparison 

Developers’ approach

As you’ll see later on, what Angular and React have in common are large communities. What sets them apart, however, is the general attitude towards these two technologies. As indicated by the results of Stack Overflow Developer Survey 2019, React.js is the most loved and wanted web framework. Angular, on the other hand, is the ninth loved technology… and the fourth dreaded one, which might be attributed to the framework’s steep learning curve.

As for practical comparison...

Below, you can see how Angular and React look in really basic apps that have the same functionalities. All they do is allow you to click on a button that fires a fake request for a movie directors list. Nothing special, but it gives you a basic overview and shows how to code in a React or Angular way. In this case, of course, I’m using neither RxJS nor Redux, so a real app would look much different.

Angular vs React: not that different after all

Since you know about the main differences between React and Angular, now it's time I told you a few words about similarities.

Component-based architecture

Say goodbye to Angular's old scope and start thinking in a more modular way. Angular's 1.5 version has already attempted to take this approach, but since it was still based on a 'scope', it led to users experiencing performance issues related to dealing with large amounts of data. To avoid these problems, Angular and React switched to unidirectional data flow and passing data from the top-level component (called container or 'smart component') down to the lower components (called 'dumb components' or 'presentational components').

However, changing the core concept of passing data within the entire app led to another problem – namely, that of proper management of the application state. So far the most popular solution in this instance is Redux. Adding one global store and dispatching actions to it "helps to write applications that behave consistently and run in different environments". That's why you can use Redux both in React and Angular. However, you can also skip Redux implementation and try to solve problems in a reactive way mentioned before, via Reactive Extensions and RxJS.

Every component has its own lifecycle methods fired when some particular action occurs. For example, you can use "ngOnInit" method in Angular, while in React we have "componentDidMount",. Both of them will execute code inside methods after the component is created. Similarly, before you delete any component, you may want to run some function. To do so, you would use "ngOnDestroy" method in Angular or "componentWillUnmount" in React.

Third-party libraries

Theoretically, even if Angular provides you with everything necessary to build an application, you'll quickly find out that third-party libraries created by the community can come in handy. Here lies the true value of stars and numbers of unresolved issues on GitHub. Without the large community, even a great library or framework can be hard to implement. Fortunately, there are a lot of React and Angular supporters creating great tools that will resolve your problems during the development phase. Need help with something specific? On GitHub, you'll find catalogs of Components & Libraries for both Angular and React.

Since Angular and React are based on similar concepts, you can find the libraries created for both of them, such as UI-Router, the great external state-based routing library. There are also implementations of the most popular UI frameworks and concepts – Bootstrap or Material Design, so it is really easy to adopt the same layout in both ways. Fun fact: you can even use React components inside Angular! :)

Angular vs React: mobile solutions

Over the last few years, JavaScript has evolved and became noticeable in both web and mobile web apps. For quite some time, the only solution for combining desktops and mobiles was to create a hybrid app. Nowadays, thanks to the knowledge of React or Angular (or both), developers can go one step further and manage native apps that are written in JavaScript and later compiled to their native languages.

Angular's claim, "one framework: mobile & desktop" is pretty straight-forward. Want to build a high-performing mobile app with access to native platform API? Match Angular with NativeScript, you’re good to go. Another option is Ionic which, since the release of Ionic 4 in 2019, has become “a modern, web-based Design System and app framework for every web developer no matter what tools and frameworks they choose to use on top”. As far as the mobile capabilities of React are concerned, the go-to solution is still React Native, which I discussed above.

Performance

As I've said before, SPA frameworks came a long way when it comes to performance. A lot of lessons were learned, a lot of things have changed. So far it's really hard to compare React and Angular regarding performance because they both are fast and effective. The main difference in performance stems from Angular using Regular DOM, which can negatively impact the user experience in the event of the app handling a significant number of requests on the same page. Virtual DOM, used by React, on the other hand, is considered to be more efficient in this regard. Ultimately, however, the performance of a product made with either of the two technologies will depend on the size and content of the app itself.

Angular vs React: who’s the winner?

React and Angular were made to solve similar issues but in a quite different way. If you’d like to have a full-fledged framework (plus much more, even though you might not need it at all) right from the beginning of the app development process, choose Angular. If, on the other hand, you want to be more flexible in terms of what you use and how, choose React. This way, you can start developing right after minimal configuration, so it might be a better choice for smaller projects.

It’s hard to say “Angular is better” or “React rules, forget Angular”. They are great tools for creating Single Page Applications, so I’d recommend trying both and sticking to what suits you best.

Not sure which will suit your project best, Angular or React? Get in touch with our software consultants to receive expert advice.