React Vs Angular: 2020 Edition

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?

React (web framework) - Wikipedia

React is a UI library, developed and open sourced by Facebook. I am making an emphasis on the library, this is important as I will explain later. React is the most popular UI library right now, and it powers thousands of websites. React uses JavaScript as its primary language, and can run on many platforms, including web, Android, IOS, and even VR.

What is Angular?

Angular (web framework) - Wikipedia

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?

First and foremost, both React and Angular produce the same deliverable: a front-end application, whether it is a website, an app, or something in between. Both of these use JavaScript under the hood and make good use of NPM (Node Package Manager), which makes it insanely easy to share repetitive code.

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.

Architecture. Both of these solutions provide an architecture similar to MVC, though with some misunderstandings, as I will talk in the last section. Additionally, both Angular and React let you use TypeScript for development, but only React supports pure JavaScript. Lastly, both of these are component-based, and this is pretty much consistent with the rest of UI frameworks out there (Vue, SwiftUI, …).

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.

Closing notes

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.

Resources

Get new content delivered to your mailbox:

leave a comment