Angular is 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 and JavaCcript 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 became an open source JavaScript library supported by Facebook. This framework popularized a concept in web development known as component-based architecture with React components.
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.
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. So what's the difference between Angular and React?
On Github, while React’s repository has 207k stars, Angular had nearly 88.1k stars. 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. The number continues to grow, contrarily to Angular, which tends to stagnate.
Source: Stackoverflow 2022 survey
If we look at Stackoverflow 2022 survey, we can observe that, regarding web frameworks, 42.6% of the respondents prefer React, while 20.3% use Angular instead. Further, this survey also illustrates that, despite being one of the most popular web frameworks, Angular is also considered the most dreaded one. In fact, Angular has more questions tagged than its 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.
Source: Hacker News Tech Tools Trends
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.
This can be explained by a few factors such as:
In summary, although React is more favored, we can see that both are very popular.
Although both frameworks use component-based architecture and 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:
On the one hand, Angular consist of a full fledged framework for software development. Thus, it does not usually require additional libraries since functions such as data binding, project generation, component-based routing, dependency injection, and form validation are included in Angular's package. Moreover, Angular offers a strong opinion regarding the application's structure. Plus, it provides various built-in small libraries, which can be particularly useful when building complex applications.
On the other hand, React is a framework for UI development. Therefore, apps written with React require the implementation of additional libraries. Consequently, using React gives more freedom to organize the code as one wishes. However, it mainly cares about View on MVC architecture and needs Flux to implement this architecture.
Data binding consists of the data synchronization process between Model and View. Angular uses a bidirectional data-binding process and mutable data. This means that when changes in the UI's input occur, then the model state will also change and vice-versa.
Contrarily, React works with a unidirectional (or one-way) data-binding process. Thus, a UI element modification does not change the state of a component, which can improve the debugging process.
Angular can use TypeScript, a superset of JavaScript and a statically typed language. In TypeScript, typos are easier to spot and overall, the code is easier to navigate.
React can be written in JavaScript ES6+ combined with JSX script, which consists of an extension for syntax, making a JavaScript code identical to HTML. In order to compile the JSX code in a browser, React can be augmented with a code translation tool (e.g. Babel). Further, React can also be written in TypeScript, but it is not included natively.
Angular provides various material design components, with diverse layouts, buttons, pop-ups, and so on. This allows for a seamless and fast UI configuration.
When using React, it is necessary to install Material-UI Library & Dependencies to use the material design components available. These UI tools are developed by the community and offer a huge variety of UI components (with both free and paid options).
Dependency injection is a programming technique used when classes receive references to other classes (dependencies). Unlike React, Angular supports dependency injection, which allows it to have distinct lifecycles for different stores. Instead, React does not entirely support dependency injection, having a global state for all the components, which does not comply with data immutability and the concept of functional programming.
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.
Truth be told, both frameworks use DOM. However, while Angular uses a real DOM, React uses a virtual DOM. In Angular's case, when a modification is made, the entire tree structure updates. Nonetheless, Angular compensates for its disadvantage by using change detection in order to identify components that require alterations. On the other hand, using a virtual DOM, React can implement changes in a single element without updating the entire tree structure.
React seems to have an edge over Angular in runtime performance due to the Virtual DOM trees, which are built on server and very lightweight, thus not loading the browser much. Further, with React, the data-binding process is unidirectional, meaning that bindings are not assigned watchers, and consequently, the workload is reduced.
The same does not happen with Angular. Since it has a bidirectional data binding process, each binding requires a watcher to track modifications, and each loop remains until all the watchers (and respective values) are confirmed. Therefore, Angular's performance might be negatively impacted by the bidirectional data binding process. However, it may change with the addition and improvement of new technology Ivy to Angular.
From what we can see, Angular has different features than React. Also, React is more dependent on a state management library. In that sense, libraries such as Helmet, Redux, and React Router can optimize the state management processes, the interaction with the API, and routing. Contrarily, Angular does not require additional libraries and integrates several functions (e.g. data binding, project generation, and component-based routing) in its package. However, if wished, it can use the help of state management libraries (such as NgRx and RxJS) to improve its features.
At the beginning of this decade, smartphones boomed. Linked to that, emerged the need to make web apps 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 official support for 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.
Here at Imaginary 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:
I know what you’re thinking: learning something from scratch can be overwhelming, especially if you feel that your background can't provide you with 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.
When I started with Angular I found it trickier to work 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:
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 back-end. For that, I decided to use Axios.
, 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:
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.
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 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.
Based on my research and in the project developed, I can state that:
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 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.
Given so many frameworks to choose from, each one with its 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 web app I developed from scratch, using both frameworks.
Q: Is Angular better than React?
A: It ultimately depends on the specific needs and requirements of your project. While Angular is preferred by some developers and may be better suited for certain types of projects, such as large-scale enterprise applications, React is also a powerful and widely-used library that offers a more flexible and customizable approach to development. Ultimately, the choice between Angular and React should be based on careful consideration of factors such as project scope, team expertise, and development goals.
Q: Why is Angular preferred over React?
A: Angular is preferred over React in certain cases because it provides a more opinionated and structured approach to development, with built-in tools for managing state, routing, and other common tasks. This can make it easier to maintain and scale large applications, especially in enterprise settings.
Q: Should I switch to Angular from React?
A: Whether or not to switch from React to Angular depends on the specific needs of your project and your personal preferences as a developer. It may be worth considering if you are working on a large-scale enterprise project or if you prefer a more opinionated approach to development.
Q: Is Angular easier than React?
A: Angular is generally considered to have a steeper learning curve than React due to its more complex syntax and built-in features. However, this may vary depending on the individual developer's prior experience and skillset.
At Imaginary Cloud we have experienced software developers in Angular and React. Need a boost in building your web application in one of these technologies? Get in touch!
Found this article useful? You might like these ones too!
Software developer with interest in technologies that simplify our lives, like Python and JavaScript. Also a gym enthusiast in spare time.
Software developer with a big curiosity about technology and how it impacts our life. Love for sports, music, and learning!
People who read this post, also found these interesting:
.png)
