Transitioning from Angular to React

I started my career with Angular back in 2017. At that point of time I was working as a Teaching Assistant on Udemy. I stumbled upon a game-changing course by Maximilian Schwarzmüller while browsing Udemy. A few months later, I found myself as an Angular developer in a early stage startup.

bunty

My experience working with Angular was truly rewarding. I made a significant transition, moving from someone who primarily wrote JavaScript scripts to diving into a comprehensive and well-structured framework. I began my journey with Angular 2, which naturally introduced me to TypeScript—a powerful addition. Back then, TypeScript was still in the process of gaining widespread adoption; many open-source frameworks had yet to fully embrace it. This period marked an interesting phase of growth and development in the tech landscape.

During that period, React was experiencing a meteoric rise in popularity. It was rapidly gaining ground, with a significant number of new startups embracing it, initially deploying React for internal tools and then gradually transitioning their main applications to this framework. Personally, I had a background primarily in basic js, so when I encountered React for the first time, I found it relatively approachable and less opinionated compared to Angular.

When you compare Angular and React they both are very different , Angular tends to be more opinionated. It has a structured approach with predefined guidelines and best practices. This strictness ensures consistency, which can be advantageous in larger teams or complex projects. However, it might feel limiting if you prefer more flexibility in your development choices.

Whereas when it comes to React , It is is often considered less opinionated. It's a library primarily focused on building user interfaces, allowing developers to make broader decisions about their application's architecture and tools. While this flexibility empowers developers, it can also lead to varying practices within a team, requiring more coordination.

At that point I remember doing multiple POCs and small internal tools in React , React at that time followed class base structure with life cycle methods, Somehow the whole pattern did not sync with me, I enjoyed doing stuff in Angular more , maybe because of its robust structure

Few months down things changed when React introduced hooks. From that time, I found myself captivated by React. While Angular also provides lifecycle hooks, and React, too, had its own set of lifecycle methods, it was the functional nature of React, combined with the introduction of Hooks, that truly grabbed my attention this time which is continuing till this date.

Throughout my professional journey, I've simultaneously worked on Angular and React applications. This dual experience has often presented me with the chance to engage in app migrations, transitioning projects from Angular to React on several occasions. Here are some of the key differences which i have encountered:-

Framework vs. Library
  • React: React is a JavaScript library for building user interfaces. It focuses primarily on the "V" (View) in the MVC architecture.
  • Angular: Angular is a comprehensive front-end framework that provides a complete structure for building web applications, including views, components, services, routing, and more.
Learning Curve
  • React: React's learning curve can be relatively smoother, especially for developers familiar with JavaScript and basic front-end concepts. It's easier to start small and gradually learn more advanced features.
  • Angular: Angular has a steeper learning curve, particularly for those new to TypeScript, dependency injection, and the overall Angular architecture. It may take more time to become proficient
Flexibility
  • React: React is more flexible in terms of integrating with existing projects or using specific state management solutions. It's less opinionated about the overall application structure.
  • Angular: Angular comes with a more opinionated structure and guidelines. While this can be beneficial for maintaining consistency in larger teams, it might feel more restrictive if you prefer more flexibility.
State Management
  • React: React itself doesn't prescribe a specific state management solution. Developers often use third-party libraries like Redux or the newer React Context API for global state management.
  • Angular: Angular has built-in state management solutions, such as services and observables, making it more self-contained in this regard.
Size and Performance
  • React: React's core library is lightweight, and you can choose to add only the specific additional libraries you need, helping you optimize the bundle size.
  • Angular: Angular's framework and tooling may result in larger bundle sizes, but it provides features like lazy loading to help with performance.

Now after around 5 - 6 years of doing both there comes a question ,
Which framework i should choose ?
The answer is that it depends
it's important to assess your specific project needs, team's skillset, and your own preferences. Consider the size of the project, the development speed required, the complexity of the user interface, and the long-term maintainability of the code. Both React and Angular are powerful tools, and each has its strengths. The right choice will depend on how well these strengths align with your project's goals.

Divyanshu Kumar