Angular vs React: a comparison of both frameworks

As technology booms exponentially, so does web development.

When you think of theJavaScript Ecosystem, Angular and React will pop up almost immediately to your mind as they’re considered two of the most popular Front-end development frameworks. But how to choose between both? Should you look first to the project requirements to make an accurate decision? Or take into consideration its popularity and ramp-up time in an early stage?

To help you find an answer to these questions I will share with you my recent personal experience: I built a Front-end for the same application in both frameworks , that allowed voting which games to buy for the PlayStation 4 that we have atImaginary Cloud's Lisbon office.

Based on the experience I had with Angular vs React, and to clarify your doubts or questions, I will compare these frameworks in terms of popularity over time, main differences between them, learning curves and also about its overall enjoyability.

An overall context

Angularis a web framework developed and maintained by Google that was released under the name of AngularJS back in 2010. At the time, it became one of the most popular web frameworks. This was mainly due to its features like two-way data binding and dependency injection , and of course by being backed by a tech giant.

In 2013, React, a JavaScript library supported by Facebook , became open-sourced. This framework popularized a concept in web development known as component-based architecture , that has many advantages like:

- Modular and cohesive components , which make them heavily reusable and that contributes to accelerating the development time.

- Used in mobile development , which allows developers to reuse the logical part in mobile apps, with only needing to tweak the view.

- Easy maintenance and improvement , because components are self-contained.

React quickly took the market by storm and overshadowed most of the frameworks at the time, including AngularJS.Therefore in 2016, Google upgraded it’s JavaScript framework as a consequence of the community’s enthusiasm with the component-based architecture: they called it Angular2.

Angular vs React: which one is more popular?

Before deciding on which framework to use, it’s wise to look at its popularity. The bigger and active a community is , the quicker it gets to find a solution for any unexpected problem that comes in your way. According to the data I was able to gather at the time of writing, different results arise in terms of how popular each framework is overtime.

On Github , while React’s repository had 143k stars, Angular had nearly 120k stars if we sum both AngularJS and Angular2 repositories. This shows that both have a very large community behind them, as they stay on the top of the most starred repositories.

Another interesting topic is the number of npm (Node Package Manager) downloads.

As we can see in the above chart, React has more npm downloads than Angular since 2015 and the number continues to grow, contrarily to Angular, which tends to stagnate.

If we look at Stackoverflow , Angular has more questions tagged than React, with 198.607 compared to the 182.683 questions of his rival. This might be explained because in general, one can find Angular more complex than React. However, I didn't experience any trouble finding answers to the doubts or questions that came up, either for Angular or React.

If we look at the above chart we can see that Angular was ahead of React , in terms of the job market, until the end of 2015. At the time, Angular was a mature framework while React was still a new technology. More recently, with rampant popularity, React surpassed Angular , even with AngularJS and Angular2 combined.

This can be explained by a few factors such as:

• React became older and developers began to dominate this technology.

• React has a shorter ramp-up time, as it’s less complex than Angular.

• React is more suitable for startupsbecause it has less development time.

In summary, although React is more favored, we can see that both are very popular.

Angular vs React: main differences

Although both frameworks use component-based architecture and therefore share many similarities, they also differ in many ways. For you to have a clearer idea of what the main differences are, I brought up the table below. Let's take a closer look:

Technology Angular React

Type

Full fledged Framework - offers strong opinion on how your application should be structured and has many small libraries built-in that helps you building complex applications.

Library - only cares about View on MVC architecture, need Flux to implement this architecture, but gives you more freedom the way you want organize the code.

Data binding

Two-way data binding - meaning that if we change the input in the UI it will change the model state and vice versa.

One-way data binding - meaning that an UI element cannot change the state of a component.

Language

TypeScript - superset of JavaScript and statically typed language.

JavaScript XML (JSX) - can be written in TypeScript, although not included natively.

DOM

Incremental DOM - when creating the new DOM it will compare with the previous one and apply the differences to the “real” DOM, only allocating memory if necessary.

Virtual DOM - whenever the DOM changes it will create a new virtual DOM, compare with previous one and only modify the “real” DOM where it differs.

If a DOM (Document Object Model) is new to you, take a sneak peek at our Vue.js vs React blog post , where we explain the DOM in a more detailed way. Long story short, DOM is a graph representing the current view that a user is seeing in the browser. Web developers manipulate DOM to change what users are seeing, but these manipulations are costly in terms of performance . That’s why both frameworks try to minimize the cost of these operations , optimizing the way the DOM re-renders the view after an update.

From what we can see, Angular has different features than React . Also, React is more dependent on a state management library .

React seems to have an edge over Angular in runtime performance, due to the Virtual DOM. However, it may change with the addition and improvement of new technology Ivy to Angular.

Angular vs React for mobile

At the beginning of this decade, smartphones boomed. Linked to that, emerged the need to make web applications adaptable to smaller screens, via responsive UI . This presented a challenge to those technologies, as they need to facilitate mobile integration and simultaneously allow developers to continue to use a tech-stack that they are already familiar with.

These frameworks ease code reusability, between web and mobile applications and they can offer a great runtime performance, almost as good as native applications.

Both Angular and React offer cross-platform mobile application frameworks , although in Angular we don’t have an official support to mobile app development.

While in Angular the most popular platforms to build mobile applications are Ionic and NativeScript , in React there’s an official framework supported by Facebook which is React Native . I have to mention that React Native takes the spotlight in this . Besides being the most used for mobile, its performance is also the closest to native applications.

About the project

Here atImaginary Cloud we take our lunch breaks in a fun way! We’ve mentioned it before, but just in case you’re only landing here now, we have a PlayStation 4 in our Lisbon’s office and we make the most of our free time playing some games. Chill moments matter, right? But this led us to an issue: with so many opinions divided, how could we decide on which games to buy?

After some brainstorming, we decided to create a small website that could allow us to add game suggestions and upvote our favorites. This would make our lives easier as we could track the most popular ones. Since I was keen to learn how they differ in implementation, I decided to build it in Angular and React.

As an intern, my previous experience was mainly with vanilla JavaScript, HTML and CSS, so yes, I had to learn both frameworks from scratch.

I had a RESTful API capable of communicating with the front-end through REST requests, sending responses in JSON.

This application had the following requirements:

• Authentication methods

• CRUD operations over models.

• List and filtering data

Angular vs React: which one is easier to learn?

I know what you’re thinking: learning something from scratch can be overwhelming, especially if you feel that your background can't provide you great support. Worry not, I felt that way too.

At first, dealing with a component-based architecture was a bit of a hassle as I never worked with it before. Notwithstanding, once I started to grasp and dived deeper into it, it became way simpler and more straightforward than I expected.

Some research was definitely necessary in order to decide which framework to use first. Spoiler alert: I decided to start with React. We’ll get there in a minute, but first, let’s take a look at Angular.

Is Angular easy to learn?

When I started with Angular I found it trickier to work with than React. Angular has a lot of concepts and syntax to learn. However, its tutorial played a big part in accelerating that ramp-up process once I started building my application.

Angular’s documentation is much longer , as it has more built-in libraries and functionalities because Angular tries to solve more problems than React. I also found that Angular is much more verbose , as it has a more boilerplate code.

Also, I took advantage of many libraries that Angular provides. For instance, Angular/material , that lets you have complex components without the need to implement them and that’s inspired by Google Material Design . I also used Angular/router , to keep my UI in sync with URL.

In Angular it’s uncommon to use CSS inside JavaScript, as it already has the component CSS file, so I didn’t need to search for any libraries to apply a style to my components.

When using Angular/common/http , I experienced some issues. It wasn’t letting me create authenticated requests, as it wasn’t setting Cross-Site Request Forgery (CSRF) in the request header. I researched a lot and tried to find a solution for this, but due to Angular’s poor documentation for this module , I just couldn't. From what I've seen, it is very common to have this issue with this library. Since the suggested solutions I was able to find on the Internet weren’t successful, I used Axios instead. It was quite easy to set up as I worked with it before in React’s application.

I also used a state management library in Angular to help me manage my application state. That allowed me to have more control over the application making it easier to detect errors. I chose to use NgRx , which is very identical to Redux making the transition smoother.

Summarizing, I used the following libraries in Angular:

• Axios,to integrate with REST API

• Angular/router, to change the UI whenever URL changes

• NgRx, to manage the state of my application

• Angular/material, to create complex UI elements

Is React easy to learn?

To start, I needed to learn the new syntax that React brings: JSX. Honestly, I didn't find it difficult as I liked the concept of having all the component's code in the same file.

One of my first struggles was how to make REST requests to the backend. For that, I decided to use Axios .

Then, I began to wonder how I would render content according to the URL. This is very common in Single-Page Applications (SPA’s) and to solve this I needed a router. Having this in mind, I decided to go with the standard React routing library, which is React Router . It has a very good example on their website and I didn’t have trouble working with it.

Also, because React only cares about the View, my application wasn’t reactive. In the beginning, I wasn’t familiar with this type of problem, as I only worked with Model-View-Controller (MVC) frameworks. Then I discovered Flux : an architecture that Facebook invented to solve this problem. Basically, it promotes unidirectional data flow, through a store that saves the current state of the application - an action that is a request to change the application state and a reducer to perform this request.

To implement this architecture, I found Redux . Learning how to configure and use it was definitely the most difficult thing while working with React.

I wanted the website to look appealing, but as it wasn’t the core of the project, I used Material-UI , a library similar to Angular/material. Their documentation is huge. Fortunately, I didn't need to dig too deep to make it work.

I also chose to use Styled-components that lets you export stylish components easily. This library has a very simple syntax and makes components more readable when comparing with React inline styling.

Summarizing, I used the following libraries in React:

• Axios, to integrate with the REST API

• React-Router, to change the UI whenever URL changes

• Redux, to manage the state of my application

• Material-UI, to create complex UI elements

• Styled-components, to apply CSS to components easily

Angular vs React: which one is more fun to work with?

Is Angular fun to work with?

Angular has really good and long documentation and many features built-in , that lets you build complex applications without searching for any third-party packages. However, it has a much steeper learning curve , which leads to a longer ramp up time. Programmers who come from traditional statically typed OOP languages like C++, C# or Java might have more fun working with Angular, because TypeScript has a similar syntax to those languages.

Is React fun to work with?

Considering its simplicity and the syntax of JSX (that I do prefer), I certainly had a better time developing in React rather than in Angular. Despite the fact that in React, you need to learn many third party packages to build a complex application (which you may find boring) and that the documentation is much shorter, it has a great quality with tons of examples. Also, according to the 2019 Stackoverflow survey, developers heavily favor React as one of their most loved frameworks , explained by its easier learning curve.

When to choose Angular or React

Based on my research and in the project developed, I can state that:

• Angular allows you to detect errors in compile-time, as TypeScript is a statically typed language, instead of runtime (like in JavaScript).

• Programmers that come from statically typed languages tend to prefer Angular as a framework, as TypeScript lets you have explicit types in your code.

• Angular ensures that data is always sync at all levels, with the two-way data binding, that contrasts with one-way data binding of React.

• React has an easier learning curve, so the ramp-up time is much shorter.

• React offers a better mobile cross-platform frameworksolution than Angular.

• React allows you to have a stronger opinion on how the code should be organized.

For this specific project, React was the best option to go . Its simplicity made it easier to learn, enjoyable to work with and it smoothed the transition to component-based architecture - for newcomers like I me, this was an extremely valuable help. However, for complex and longer projects, Angular will fit better as it lets you have explicit types and detect errors in compile time.

A wrap up

Given so many frameworks to choose from, each one with it's own peculiarities, deciding for the right framework can become a tough mission.

We felt that before when we decided to build the application in Vue.js first and now when considering Angular.

When we're between Angular or React, I think it mostly comes down to personal preference, as they solve the same problems but with different implementations.

However, in the decision-making process, it’s important to consider that React has an easier learning curve , which leads to quicker development , while Angular has more built-in functionalities .

Both technologies are very powerful, a clear improvement from the early days of web programming that enhances, facilitates and speeds up developing.

In this article, I talked about Angular vs React based on a project I developed from scratch, using both frameworks.

I hope you found this post useful. Feel free to reach us with any questions, comments or any other insights!