Marketing Automation Specialist at Ideamotive
(this article has been updated on 22.12.2020 to reflect the current state of both technologies)
We prepared this short guide on React vs Angular to help you find answers to those questions. As a group of experts who do both React web development as well as Angular on a daily basis, we know exactly the main pros and cons one might need to consider when choosing the perfect front-end solution.
(If you already have some knowledge about libraries and frameworks you can skip this section.)
Let us start with the basics. As previously mentioned, React is a library, while Angular is a framework.
How about the framework? Think of the frame itself first. What is it in real life? It can be, for example, something of a case in which you can put your family photos or a nice painting to hang on a wall. If you have a specific frame and your photo is too big for it, the only thing you can really do quickly is cutting the image — making it small enough to fit the frame.
Framework in the software development world, then, is providing you with a specific standard for your website or application. In other words, it sets up the architecture of your project that you cannot simply change. Just like you cut the photo to fit the frame, you need to make sure you are coding in a way that your framework dictates.
So what does all of it mean to you? That React gives you some more freedom. You can add a function from a React library to your already existing app or website. If you want to use Angular, on the other hand, your product should basically be created with this framework in mind from the beginning.
Nevertheless, one of the most important things for both React and Angular are the components. What are those? Sets of pre-written code that allow developers to add new functions to the project much faster than if they would try to write all the code by themselves.
What can a component do? For example, it can provide you with an ABC survey system for your blog or a buying system for your new shopping platform.
There are, however, some clear differences we should consider in the React vs Angular battle. We divide these differences into a few different categories below. Before we proceed with this, though, let’s have a look at a table summarizing the basics of both React and Angular.
One of the key things to consider before starting web development is, of course, the performance of the technology we plan to use in our project. In regards to this, it’s important to note that React - unlike Angular - uses virtual DOM, instead of the regular one. What is the DOM (Document Object Model) itself? An abstract API (application programming interface) presenting parts of the HTML document in the form of a tree. Each of these parts of a document (e.g. a website’s header) has its dedicated node and object. It’s incredibly important because it allows programs to quickly access all the information they need from a document in order to run the app.
Virtual DOM makes the whole process even faster. Unlike the regular DOM, it only updates the parts of the document’s tree where the changes have happened recently. The regular DOM, on the other hand, updates the whole tree every time. This difference makes React in some cases faster than Angular.
When it comes to scalability, both solutions have something that makes them stand out and be used by multiple rapidly growing companies. In the case of React, it’s once again a must to mention the virtual DOM. It makes updates to be incorporated faster which is especially crucial in projects that are expected to grow fast.
With Angular, thanks to the clear structure of TypeScript, it’s easier to have new developers join the team on a regular basis. However, you must remember that you need true experts that won’t get confused by the complexity of TypeScript during the development process.
Starting a new project with all the basics already set up is incredibly simple in both Angular and React. Both have their own Command Line Interface (CLI) — in Angular, the thing you will be looking for on GitHub is called simply Angular CLI, while its React alternative has been named Create React App.
Are there any significant differences between the two? As some developers claim, Angular CLI can usually set up a project with more basic functionalities already included than its the case of Create React App. At the same time, however, it’s worth mentioning that the documentation of CRA is much more insightful than the one of Angular CLI. CRA has also recently been hugely updated with new features, including support for templates, TypeScript, and Redux Toolkit.
According to reports, over 50% of online traffic already comes from mobiles — and everything suggests that this number will only rise. Because of this, it’s crucial for your project’s success that the website or app you are building will look great not only on computers but also on the phones and tablets of your customers.
Both React and Angular have solutions that allow building a mobile version of your product based on the code of the standard, desktop version of it. In the best possible case, your developers might be able to use up to 90% of the already existing code!
In this specific battle, React is the clear winner, partly because of the popularity of React Native and a huge community of developers favoring it over other, similar solutions. What’s more, NativeScript is not only less popular, but the builts created in it feel less mobile than when using React Native. This is mostly due to the fact that NativeScript doesn’t incorporate mobile-specific UI for apps and sites, instead of focusing on delivering an experience as similar as possible to the original, desktop version.
(Interestingly, NativeScript works great also with another React and Angular alternative, Vue. You can read our comparison between React and Vue here.)
No framework and no library will be successful without the support of a steadily growing community. At first glance, the battle of React vs Angular seems to be relatively close-fought in this case. But is it really?
Let’s look at some numbers!
Firstly, Google Trends data.
The blue one is for React, the red is for Angular. As you can see, the first one is much more popular than its rival. On average React is being searched two times more often than Angular on Google.
Let’s also look at some even more important data - the list of the most popular repositories on GitHub. There, React ranks 5th place, overshadowing Angular. The latter has also fewer contributors. On the other hand, Angular has way more commits and releases. This may suggest, however, that the Angular releases are less stable than React ones.
For a broader and more insightful look at the situation on GitHub, have a look at our table below.
(React vs Angular GitHub data as of 14 of December 2020)
Finally, it may be also useful to have a look at the yearly Stack Overflow survey. According to its 2020 edition, React is currently more often used by developers than Angular (35.9% vs 25.1%). Additionally, React is more loved (68.9% vs 54.0%) as well as more wanted (22.4% vs 10.6%) technology among the developers. Finally, what may be interesting especially for Google, is the fact that Angular is one of the most dreaded technologies on the market (75.9% vs 31.1%). This can be an effect of a few things, including the fact that Angular is more complicated than React (especially for newcomers) due to its use of TypeScript.
It’s also worth noting that React ended up with better results in the 2020 survey than in 2019 one. Back then, React was slightly more popular among developers (31.3% vs 30.7%), and React became even more loved and wanted throughout these past 12 months.
Obviously, Facebook and Google have not developed React and Angular only to kindly support the developers around the world. They have also done it to run their own apps and websites on those two systems. Instagram, WhatsApp and Facebook itself are powered by React, while tons of Google services are handled using Angular.
But how about everything outside of the world of IT giants? What are some other companies that have signed themselves up for the React vs Angular battle?
There are really tons of them. For example, among React companies, one can find Netflix or the New York Times. Interestingly, codeacademy.com, a popular website dedicated to teaching others to code, is also using React to power their web app.
Angular, on the other hand, is used for example by Microsoft. That should not be that surprising as TypeScript itself has been developed by the creators of Windows. Microsoft uses Angular to power its Office’s and Xbox’s websites. Among other Angular companies, one can find Delta Airlines, Santander Bank, and Forbes.
Components are integral parts of both technologies, whether we're talking about React or Angular. A component usually receives input and changes its behavior based on that input. This behavior change usually manifests itself as a change in the user interface of some part of the page. Using components makes code easier to reuse. The component can be a shopping cart on an e-commerce site or a social media login field.
Interestingly, React combines user interface and component behavior. For example, here's the code for creating the hello world component in React. In React, the same piece of code is responsible for creating the UI element and defining its behavior.
As you can see, they take the opposite approach to component development. Angular offers a built-in toolbox containing a complete set of design components, including layouts, pop-ups, buttons, indicators, and more.
This approach ensures easy and fast customization of the user interface. React tools (free and paid) are developed by the community and are available on their portal.
Using them requires an additional library to be installed in advance to make the interface configuration with React more complex.
While one of the main reasons for using React is its speed, ease of use, and simplicity, one of its drawbacks is that it is quite specialized. This means that for something too complex, Angular might be the best choice. This goes for responsiveness, scripts involved, and even the purpose of the pages.
Ease of learning is an important criterion for choosing a new technology. Of course, the answer depends on a broad range of factors, such as your previous experience and general familiarity with related concepts and patterns. However, we can still try to estimate the number of new things that you need to learn to get started with this structure. Now, if we assume that you are already familiar with ES6 +, build tools, and everything else, let's see what else you need to understand.
The Official Guide is a great place to begin learning React. Once you're done with that, get acquainted with your router. React Router can be a little tricky and unconventional, but there is nothing to worry about. Depending on the complexity, size, and requirements of your project, you will need to find and explore some additional libraries, and this can be a daunting task. But after that, everything should be smooth.
We were genuinely shocked at how easy it was to get started using Angular. Even people with back-end experience and limited abilities in front-end development could catch up quickly. The error messages you may encounter along the way are usually clear and provide explanations on how to fix the underlying problem.
The downside is that you will need to spend time choosing libraries to support your development activities. Given how many there are, this could be a problem. But this can be done in conjunction with your development activities after you get comfortable with the structure itself.
Although TypeScript is not needed for React, we highly recommend that you evaluate and implement it in your projects.
React is a library for developing a user interface, so apps written with React require additional libraries. For example, Redux, React Router, or Helmet optimize state management, routing, and API interactions. Features such as data binding, component-based routing, project creation, form validation, or dependency injection require additional modules or libraries to be installed.
Angular is a complete software development framework that usually does not require additional libraries. All of the above functions - data binding, component based routing, project generation, form validation, and dependency injection - can be implemented using the Angular package.
To conclude, Angular has a significant advantage in this regard as it is a complex framework with its own libraries, and the proposed toolkit makes other building components redundant. React is primarily honed for UI development, so installing additional libraries to work with it is a must.
An important part of the experience of a qualified developer is the ability to maintain a balance between established, time-tested approaches and the assessment of new advanced technologies. As a general rule, you have to be careful when using tools that have not yet reached maturity due to certain risks:
React is developed and maintained by Facebook. Therefore it is used in their products, including Instagram and WhatsApp. It has been around since 2013, so it's not entirely new. It is also one of the most popular projects on GitHub with over 150K stars at the time of writing. Some of the other notable brands using React are Airbnb, Uber, Netflix, Dropbox, and Atlassian. That sounds good.
Angular has been around since 2016, which makes it a bit younger than React, but it's not new either. It is backed by Google and, as Igor Minar mentioned, even in 2018, it was used in over 600 hundred Google apps such as Firebase Console, Google Analytics, Google Express, Google Cloud Platform and others. Besides Google, Angular is used by Forbes, Upwork, VMWare and others.
Testing user interface components typically involves rendering them in a sandbox environment, simulating user interaction, and validating the output. These routine tasks can be simplified with the appropriate test assistants. For Angular, this is the built-in TestBed. There are two popular candidates for React: Enzyme and Testing Library.
In fact, Enzyme is the standard choice. It allows components to be displayed in full or shallow DOM, as well as interact with the rendered component. It basically follows a white-box testing approach where your tests can reference some of the internal components of a component, such as its children, properties, or state.
Testing Library takes a different approach and pushes you to interact with your components like a user would, without knowing the technical implementation. Tests created in this way are usually less fragile and easier to maintain. Although it is the most popular in React, this tool is also available for Angular.
As we mentioned earlier, Angular has more out-of-the-box features than React. This can be both good and bad, depending on how you look at it.
Both platforms share some key features in common: components, data binding, and platform-independent rendering.
Angular provides many of the features you need out-of-the-box for a modern web application. Some of the standard features:
Some of these characteristics are built into the core of the platform, and you have no way of not using them. This requires developers to be familiar with features such as Dependency Injection in order to build even a small Angular app. Other features like HTTP client or forms are optional and can be added as needed.
With React, you start out with a more minimalist approach. If we're only looking at React, here's what we have:
React doesn't provide anything out of the box for dependency injection, routing, HTTP calls, or advanced form processing. You are expected to pick any additional libraries to add depending on your needs, which can be either good or bad depending on how experienced you are with these technologies. Some of the popular libraries that are often used in conjunction with React are:
The developers have found that the freedom to choose your libraries is liberating. This gives us the ability to tailor our stack to the specific requirements of each project, and we haven't found the cost of learning new libraries so high.
Given the wider popularity of React, it's natural that its real-world use cases are much broader. Plus, Facebook, Twitter, Netflix, Microsoft, Uber, Yahoo, PayPal, and other big companies use it, which contributes to its fame.
Check out 9 Amazing Examples Of React Web Development for more detailed info.
The Angular community is much smaller, due to the original skepticism of the developers who found it too difficult to learn and operate. However, the credibility of the framework is supported by the backing of Google and the names of the companies that use it, including McDonald's, HBO, Apple, Forbes, Adobe, Nike, and (guess what?) Microsoft.
Find this info insufficient? Read 12 Amazing Examples of Angular Web Development to Get Inspired.
We have covered a lot of information on React vs Angular, but one question still happened not to be answered: which of these solutions better answers your needs? Which one is a better choice for your project and your company altogether?
The answer may not be that easy, but we will try to put it as simply as possible. Check the table below that summarises all the most important concepts we have reviewed in this piece.
React vs Angular
You've probably noticed by now that every framework has its own set of features, with both good and bad sides. But this analysis was carried out outside any specific context and therefore does not answer the question of which structure should be chosen. To make this decision, you will need to consider it from the perspective of your project. This is what you need to do yourself.
First, try answering these questions about your project, and when you've done that, match the answers with what you've learned about the two frameworks. This list may not be complete, but it should be enough to get you started:
The framework/library you choose can affect how much time you spend coding and your budget. If you have a team of C #, Java or C ++ developers, then it would be more logical to go to Angular, since TypeScript has a lot in common with these languages (in which case, it will be easier with it).
As an experiment, you can create an application in both Angular and React, then evaluate the language, usability and performance, and make a decision.
As mentioned earlier, both technologies have their own set of advantages and similarities, and it really comes down to what functionality the app will offer.
If you are starting a large project and want to minimize the risk of making the wrong choice, first consider creating a proof-of-concept product. Pick some key features of the projects and try to simplify them using one of the frameworks. PoCs usually don't take long to build, but they will give you a valuable personal experience with the framework and allow you to validate key technical requirements. If you are satisfied with the results, you can continue with full development. Otherwise, a quick failure will save you headaches in the long run.
There are many factors that influence the choice of platform for a particular application project, as both Angular and React have their own advantages and disadvantages. In order to choose any of them, you must have a clear idea of which final destination you are going to.
By entrusting the development of your application to an experienced outsourcer, you will save yourself from the problems of choosing, as well as from all the complexities and difficulties associated with completing the task.
If you are still unsure about the React vs Angular choice, feel free to get in touch with us and discuss your project. Our tech experts are able to help you make the best choice based on your requirements, as well as find the best people for your team.
Whether you need web developers (including full-stack developers), project managers, product owners, or other types of IT experts, we can provide you a list of top professionals with experience in your industry and the solutions you have in mind.
IT Marketing Specialist with tech skills. Leads and initiate marketing activities going unconventional. Loves testing new tools and learning new skills.View all author posts
Choosing React Native For Your Mobile Tech Stack
The all-in-one guide for CEOs and Product Owners
Michał Rejman 9 min read
Miłosz Kaczorowski 9 min read
Michał Rejman 14 min read
Patrycja Mach 19 min read
Dawid Karczewski 6 min read
Work with software development experts from Ideamotive's talent network.