Introduction
In this article, I am going to compare the two most famous front-end technologies – Angular vs. React. After this, you will have a rough idea about both, and we’ll also discuss a bit about the history of both, so without any further ado let’s start from the beginning,
History of Angular
Angular was initially known as Angular.js released on October 10, 2010. Then it was a Web Framework based on MVC or Model View Controller architecture. After then it has changed in many ways but the best thing about Angular is it changes under the hood mostly so we don’t have to learn from scratch again. Currently, Angular version 13 is around. It was the first major framework to support Typescript.
History of React
React, or more specifically react.js is the most famous front-end library that people use nowadays to build user interfaces. It was first released on May 29, 2013. Version 17 is currently going on and Version 18 is in beta. It is loved by most beginners as it’s easy to understand and use.
Now we are going to discuss some core SPA (Single Page Application) features of React and Angular.
Core SPA features of React and Angular:
The comparison can be ended in one line which is
Angular is a Typescript based web application framework. Whereas React is a JavaScript library for building user interfaces. So we can’t really compare a framework with a library but we can try to discuss that how they are different and why.
Routing
Angular:
Angular comes with one of the most powerful routers ever created for single-page applications (SPAs). It also supports lazy loading (through a module-based approach).
React: React doesn’t come with an inbuilt routing but we can use react-router-dom which is a fantastic routing solution, with great community support and frequent updates with the most recent being its sixth version. It’s really powerful and easy to understand.
Re-Usability
Angular: Here things can go quite ugly if we do a module-based approach because a component can be declared in only one module so we have to create a shared module just to use the same component in different modules. Also, I didn’t mention it in routing but in order to have routing in different modules, we must use the “forChildren” attribute with RouterModule from @angular/router.
React: If we want to share components in React it’s pretty easy we just have to export our class or functional components then import in needed file and then we can directly use it.
Re-Rendering Page
Angular: In Angular, page re-rendering is complex which is done by the zone.js file which wraps our browser native event listeners, and inside the wrapped function it calls the main event listeners and updates the view. Which is fast but slower than react but sometimes it depends on the work that we are doing. Other than that it uses a very good concept called Observables and Observers from RxJS to tell the component that the view should be updated if another component updates.
React: In react, things are pretty straightforward, We have a concept of state and on updating the state the react-app updates the View. In react we have something called unidirectional data flow which is like in the image below.
It is nothing but when the user see the web page and click some button or hover over something that is known as action and that action may or may not change the state and if it changes the state it results in a re-render which updates the view.
Bundle Size
Angular: If we talk about the bundle size of Angular I know approximately it’s 4 times the bundle size of React but there is a reason behind that, it’s used to build enterprise-level applications and so it comes with a lot of stuff out of the box.
React: Yeah, so we know Angular’s bundle size is big so react has a smaller bundle size which makes it a better option for creating a smaller application. But if we compare these two for a really big project like Facebook then I am sure there will not be a huge difference in bundle sizes since we will have to install many packages for features that are already bunded with angular.
So now we have discussed some key features of a Single Page Application for these two techs now let’s discuss some smaller features in brief.
Other features of React and Angular
First, let’s start with React:
Ok so React is so simple that it took the concept of components and took it to its bare minimum where it is just a function. It does not have any inbuilt libraries or modules but there is huge community support. Some of the most popular community packages are:
- Router: react-router-dom
- Animation: react-spring
- Form: Formik
- State-management : react-redux
- For static site generation, we can use Gatsby
- For server-side rendering, we can use Next.js (It can also be used in static site generation).But it is not built for making a huge enterprise-level application.
Now coming to Angular:It is huge, it has its own ecosystem where things have to be done in their own predefined way. It has everything that a developer needs to build a web-app like:
- It has its own RouterModule @angular/router,
- It has its own animation platform @angular/platform-browser/animation
- It has its own server-side rendering @nguniversal
- It has its own FormsModule and ReactiveFormsModule @angular/forms
- It has its own state management ngrx store from RxJS.And I can go on but the thing I am trying to say is that it provides you with one of the best systems to build something.
Conclusion
Now surely everyone is thinking about which one should they use and why. It is comparing apples and oranges. You need both in different kinds of scenarios. So it is up to you and the project requirements.
