React vs. Angular: The Comparison
*Disclaimer: I have worked extensively with both React and Angular. I used Angular at my job at IBM and React & React Native at my current job. I personally prefer React but will do my best not to taint the article with bias.
History of React vs. Angular
Both Frameworks are available under the MIT license.
Architecture of React vs. Angular
Framework vs. Library
Angular provides the following “out of the box”:
- Templates, based on an extended version of HTML
- XSS protection
- Dependency injection
- Ajax requests by @angular/HTTP
- Routing, provided by @angular/router
- Component CSS encapsulation
- Utilities for unit-testing components.
- @angular/forms for building forms
React, on the other hand, gives you much more freedom. It only provides the “view” in MVC – you need to solve the M and C on your own. Due to this, you can choose any of your own libraries as you see fit. You will end up using many independent, fast-moving libraries. Because of this, you will need to take care of the corresponding updates and migrations by yourself. In addition, each React project is different and requires a decision requiring its folder hierarchy and architecture. Things can go wrong much more easily due to this.
React provides the following “out of the box”:
- XSS protection
- No dependency injection
- Fetch for Ajax requests
- Utilities for unit-testing components
Some popular libraries to add functionality are:
- React-router for routing
- Redux or MobX for state management
- Enzyme for additional testing utilities
Regular DOM vs. Virtual Dom
React’s use of a virtual DOM is one of its features that makes it so blazingly fast. You’ve probably heard of it. It was React’s “killer feature” when it was first released. Let me give you an example scenario:
Let’s say that you want to update a user’s age within a block of HTML tags. A virtual DOM only looks at the differences between the previous and current HTML and changes the part that is required to be updated. Git employs a similar method, which distinguishes the changes in a file.
Conversely, Angular opted to use a regular DOM. This will update the entire tree structure of HTML tags until it reaches the user’s age.
So why does this matter? The example above is trivial and probably won’t make any difference in a real app. However, if we’re dealing with hundreds of data requests on the same page (and the HTML block is replaced for every page request) it drastically affects the performance, in addition to the user’s experience.
Templates – JSX or HTML
I’m not going to go into too much detail, but React Fiber is going to take React from “fast” to “blazingly fast”. Fiber is a backward-compatible, complete rewrite of the React core. It was introduced to React v16 and the upgrade went so smooth that you most likely didn’t even notice it happened. With Fiber, react can pause and resume work as it sees fit to get what matters onto the screen as quickly as possible. I encourage you to do more research into React Fiber – it is a killer feature.
You’ve heard of components, haven’t you? Unless you’ve been living under a rock, I’m sure that you have. Both React and Angular are both component-based. A component receives an input, and after some internal logic returns a rendered UI template (a sign-in form or a table for example) as output. Components should be easy to reuse within other components or even in other projects. For example, you could have a sign-in component consisting of two text inputs (user & password) and a “Login” button. This component may have various properties and underlying logic, but it should be generalized so that you can reuse the component with different data on another page or in another app.
Components are meant to be self-contained “chunks” of your app that you can reuse in different situations. They are meant to encapsulate logic. The web is slowly becoming component-based, so I recommend you start getting accustomed to them right away.
There are states everywhere in an application. Data morphing over time involves complexity. Do you want to know how it works? The UI is described by the component at a given point in time. Then, the framework re-renders the entire UI of the component when data changes. This ensures that the data is always up to date.
To handle state in React, Redux is often used as the solution. In Angular, you may not need Redux. But, if your application becomes large enough, chances are that you will. Some developers, including me, opt to use MobX instead of Redux. MobX has more “magic” (things automatically done for you behind the scenes) and I personally prefer it. Although Redux and MobX go beyond the scope of this article, I highly encourage you to do some more research on them.
A large difference between React and Angular is one-way vs. two-way binding. Angular uses two-way binding. For example, if you change the UI element (a user input) in Angular, then the corresponding model state changes as well. Additionally, if you change the model state, then the UI element changes – hence, two-way data binding.
However, React only has one-way binding. First, the model state is updated, and then it renders the change in the UI element. However, if you change the UI element, the model state DOES NOT change. You must figure that out for yourself. Some common ways are through callbacks or state management libraries (see State Management in the previous section).
I must admit that Angular’s method is easier to understand at first. However, as the project becomes larger React’s way results in a better data overview (making debugging much easier). Both concepts have their pros and cons. You need to understand the concepts and determine if this influences your framework decision.
TypeScript’s purpose is to ensure a smooth transition for programmers with an Object Oriented Programming (OOP) background. TypeScript was also released in the period of ES5, and during that time, ES5 was not a class-based OOP language.
But, an advantage of TypeScript is that it offers more consistency in examples found online (React examples can be found in either ES5 or ES6).
Conclusion of React vs. Angular
As you have seen through my many examples, React and Angular are two titans in a cutthroat industry. In a business where only the strongest survive, you can easily conclude that these are some of the best technologies on the market. You can’t go wrong with either one.
Let’s recap what you’ve learned in this article:
- Is a full framework
- Has a Regular DOM, which renders updates slower than React’s Virtual DOM
- Utilizes Components: emerging web components standard
- Data Binding: two-way
- You must use TypeScript
- Mobile: Ionic and Cordova are slower than React Native
- Testing: Jasmine & Mocha
- Learning Curve is higher, but once you understand it you have an entire MVC framework
- Scalability: easy to scale
- Popularity: dropped since AngularJS (Angular 1)
- Open source: GitHub stars: 40,963 / Contributors: 732 / Issue: 2,162
- Size: larger, resulting in longer load times and performance on mobile
- Used on: Google, Nike, Forbes, Upwork, General Motors, HBO, Sony
- Just a small view library
- Has a Virtual DOM, which renders updates faster than Angular’s Regular DOM
- Uses JSX, which combines markup and logic in the same file (making components easier to read)
- Components: emerging web components standard
- Data Binding: one-way
- Mobile: React Native is faster than Angular’s solutions
- Testing: Jest & Enzyme
- Learning Curve is lower, but you only get the view. Because of this, you’re going to have to learn a slew of 3rd party libraries. Ex. State management (Redux or MobX), Asynchronous calls (react-promise, react-thunk, or react-saga), etc.
- Scalability: is more testable, so also easy to scale
- Popularity: has increased exponentially
- Open source: GitHub stars: 111,927 / Contributors: 1,242 / Issues: 287
- Size: smaller than Angular, so a bit faster
- Used on: Facebook, Airbnb, Uber, Netflix, Instagram, Whatsapp, Dropbox
- React Fiber will increase the speed of React dramatically