The sheer number of frontend frameworks can blow your mind. There are all kinds of frameworks: reactive, declarative, functional, MVC, MVVM, OOP, and so on. But the most popular ones are still React and Angular. As of 2020, what are their differences?
What is React?
What is Angular?
Angular is a front-end framework, developed and open sourced by Google. Right away you can notice that these are fundamentally different: React is a library, Angular is a framework. I will explain the difference between these two terms in the last section.
Angular is using TypeScript as its primary language and is also able to run on a wide selection of platforms. Angular employs the MVC (Model-View-Controller) pattern for its architecture, which is recognized as one of the industry standards. So, what are the touching points between React and Angular?
How are they similar?
Community. Both of these products have a huge community behind them. Since React and Angular are open-source, many companies depend on it and try to keep it running and updated, so you can feel relatively safe while using them. You are not likely to face many issues due to incomplete documentation, lack of help on StackOverflow, or third-party libraries’ availability.
How are they different?
Oh boy. Here we will have quite a few more points, and I think this is why you came here. So, let’s start:
Library vs Framework: As I stated before, React is a library, and Angular is a framework. In simple terms, a library solves a problem, and a framework solves a domain of problems. Most often, frameworks consist of libraries. Here is what it means on practice: React is very lightweight, fast, and easy to learn, but does not do anything on itself, other than drawing some buttons. You will need a third-party library for routing, API connections, state management, etc. Angular, on the other hand, has this built-in and much more. Angular, while being harder to learn, offers you such nice things like routing, form generation, dependency injection, and so on. React is only an M in MVC, but Angular is the whole thing.
Regular DOM vs Virtual DOM: Angular and React utilize slightly different approaches when it comes to rendering stuff on the screen. Angular behaves just like you expect it to: on every rerender, it builds a new DOM from scratch and replaces it in the browser. React, on the other hand, tries to reuse as much as possible. It calculates the minimal set of operations needed to bring browser’s DOM to React’s internal Virtual DOM, and then executes them. This results in a huge performance gain, which will be even more evident once Concurrent Mode rolls out.
Scalability: This is one of Angular’s stronger sides. Because of the more complicated architecture enforced by Angular, it is easier to scale. In React, too much to delegated to developer’s shoulders, and it is much easier to mess up. You wouldn’t notice it, however, until the codebase grows large enough. Of course, this can be mitigated by applying Clean Architecture principles, but you need to be aware of it.
Mobile Development: React used to be a clear winner, but now it is not so evident. React Native lets you write native apps with React, and NativeScript lets you write native apps with Angular and Vue. Both offer comparative performance and feature set. The difference is in platform access: if you want to access some native API methods in React Native, you would have to write a bridge with Kotlin or Swift. On Native Script, you can directly access native methods from JS code. On the other hand, React Native has a much larger community, which is an invaluable asset. If performance is a priority, however, you should look into Flutter.
Thank you for reading, I hope now you have an idea of the differences between React and Angular, please do let me know if you have any questions.