Angular vs React: The 2021’s winner is…

The first question of people who hear me saying that I worked professionally with both - Angular and React, is: “So.. what do you think — Angular or React??” — I find that my answer about this issue has been changed over the years. Why? Let’s see! 🤔

I started my web journey back in 2013, the time when jQuery was THE library for JavaScript development. It was extremely hard to write reusable code — and my codebases became so messy and hard to maintain in a short time 🥴.

Later on, React and Angular were introduced, but people were not in a rush to adopt them until 2016 when they were a little bit more mature. Check the trend chart below:

Screenshot from Stack Overflow Trends

My pick at 2016

I started with Angular 2 — Back in 2016, The Angular team released a Beta version. It arrived with big changes to the frontend world, and I really liked the following improvements:

• Awesome documentation — The Angular documentation was, and still - very straightforward. The learning process is very friendly and easy to get started with. I found the official documentation tutorial of Tour of Heroes a very fun way to learn the platform practically.
• Classes — When you have some kind of “template” to code in, the less likely you will be exposed to bugs while being able to dive into different sections in the code faster. When everyone knows they have to structure the code as classes, it’s much easier to understand each module location and code execution flow. In React, it was a mix of classes and functional components. If you decided that your component should manage state, you had to convert it to a class. If you decide state is not needed and want to move it to parent, should it stay a class or move it back to functional components? so many decisions to make! Today — I love using only functional components because they are small, fast to code, and can do anything a class component does.
• TypeScript Integration — When creating a new Angular app, the default was Typescript (and still is, who the hell is using JavaScript with Angular??), and it was a brand new thing to learn along with Angular itself. It feels very natural and it plays really well with classes (“Wow! Is it frontend or JAVA??”). Defining the output result type to each function or variable may seem a burden to some people, but the power it gives totally worth it: Fail-fast, Easier to understand what the engineer who coded this function wants.
• Dependency Injection — it’s not just making life easier by using a shared service for multiple components or a specific module, it also handy for isolating classes during testing.
• RxJS — Dealing with HTTP in an event-driven way using Observables is.. almost a game-changer. The ability to make operations and processing on streams of data in an easy, intuitive way is a time saver! (and some lines of code, sometimes much more..)

Back to my story, I started working on multiple projects from scratch and wrote them using Angular. The API has changed A LOT since the beta version, and I must say that the Angular team did a great job making the APIs much easier while reducing boilerplate code needed when creating a component, service, DI, a unit test — and connecting all those parts in different modules.

The fight of React (2018)

When I tried to play with React back in that time.. it felt like there is no “formal” / clear way of doing things: everyone is writing code everywhere, the structure of the application is totally different in each project, It was lacking TypeScript support (and examples), and managing state was a big burden — even with redux (SO many different files for managing state: reducers, actions, store) while I could do the same in one-liner using Angular (Services + RxJS).

But — since then — the React team went in the right direction by introducing hooks and context API as well as better Typescript integration! For me, it was a big game-changer since it reduced the amount of boilerplate code needed for state management. Why use 3rd library like redux when you can just use useState, useReducer, and useContext which comes natively with it? React became a state management library as well!

Besides, I could write all my components in no time and make them reusable more than ever (custom hooks). The need to create class-based components to manage state and mix them with functional components — has gone, and I could just create functional components really fast and attach state easily using useState, useReducer, and useContext.

For me, it improved the React development experience so much, that I fell in love with React although I had a deep, long relationship with Angular and decided to use it in more of my projects. I think that there are some other people out there that think like me, and you can see it in the Stackoverflow trends in the chart above 😎

So.. Angular or React?

I used both in enterprise-grade applications, and I can say one thing: You can do the same in both, and it only depends on YOU — how you use it. Both, Angular and React, have all the tools to keep your code DRY, clean, well-organized, and performant. Also, keep in mind to keep your components as small as possible. I believe that you should use the framework in which your team is more confident and comfortable, along with its ecosystem.

If things are turning out to be slow, it doesn’t mean you need to change the library you are using —but just learn how to find those performance bottlenecks and make the right optimization (Which usually comes from rendering/re-rendering too many elements in one shot).

If you have any additional comments/questions regarding my experience or generally on Angular / React war, feel free to hit me up in the comments.