The sheer number of front-end 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 is a UI library developed and open-sourced by Facebook. I am emphasizing the fact that it is a library here. I will explain why this is important 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 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, while 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 similarities 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 them and try to keep them 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 Stack Overflow, or the availability of third-party libraries.
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 the UI frameworks out there (Vue, Flutter, etc.).
How Are They Different?
Oh boy. Here, we will have quite a few more points — and I think this is why you are reading the article. 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, whereas a framework solves a domain of problems. Most often, frameworks consist of libraries. Here is what this means in practice: React is very lightweight, fast, and easy to learn, but it does not do anything by 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 and much more built-in. Angular, while being harder to learn, offers you nice features such as routing, form generation, dependency injection, and so on. React only accounts for the 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 re-render, 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 the 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 is placed on the 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.
#angular #javascript #react-native #programming #react
