DEV Community

Cover image for A Tale of Two Frontend Frameworks
Mayank Yadav
Mayank Yadav

Posted on

A Tale of Two Frontend Frameworks

In the vast realm of web development, selecting the right frontend framework is akin to choosing a path in a dense forest, with each turn leading to new challenges and revelations. My journey commenced in 2019 when I decided to embark on the path of React, mesmerized by its soaring popularity and vibrant community. Brimming with enthusiasm, I completed an extensive React course, diligently coding alongside the instructor, and mastering its concepts. Yet, as I approached the end of the course and ventured into building my own projects, I felt lost in a labyrinth of possibilities.

Undaunted by the roadblocks, I resolved to deepen my understanding by revisiting the course. Armed with prior knowledge, I grasped the concepts with ease, yet the chasm between theory and practical implementation persisted. Though I managed to crack interviews due to my solid grasp of React's core concepts, I couldn't help but wonder why I struggled to create real-world projects.

Fast forward to 2020, my career took a new trajectory as I transitioned to a role that introduced me to Angular. To my surprise, the experience was markedly different. Within a mere fifteen days, my Angular code was in production, a feat that had eluded me with React. This newfound fluency with Angular led me to ponder over several theories that may have contributed to my affinity for the framework.

  1. Prior Backend Experience: Having a background in backend development using Java, I found Angular's concepts, such as classes, interfaces, strong typing, and dependency injection, strikingly familiar. Angular's adherence to object-oriented principles resonated with my backend development practices. Furthermore, the concept of services for business logic aligned harmoniously with my previous experience.

  2. Too Many Choices in React: React's ecosystem is brimming with myriad options and libraries, providing developers with unparalleled flexibility. However, this abundance of choices often leads to indecision and confusion. While one method might seem appropriate for a particular task, an entirely different approach might be suggested elsewhere, leaving developers perplexed and doubting their choices. This phenomenon, known as the "too many choices" problem, can hinder productivity and slow down the learning process.

  3. Learning at Work: The idiom "learning by doing" holds true in the realm of software development. My hands-on experience with Angular at work provided invaluable insights into the framework's inner workings. By studying code written by seasoned professionals, I gained practical knowledge that I could apply to new projects. Comparatively, self-paced online learning, while valuable, often lacks the real-world context that on-the-job experience can provide.

  4. Lack of Segregation in React: In React, it is not uncommon to find components containing HTML (JSX), JavaScript, and CSS within the same file. This lack of clear segregation may lead to cluttered codebases, making it challenging to maintain and troubleshoot. While it is possible to separate concerns into separate files, React does not enforce a standard practice, leaving it up to developers to decide on an organization strategy. Ironically, this lack of clarity brings to mind the very reason JavaServer Pages (JSP) faced criticism and was eventually phased out.

  5. Complex State Management in React: State management is a crucial aspect of building scalable and maintainable applications. In React, various approaches exist, such as React Context and Redux, each with its complexities involving reducers, actions, and effects. This complexity can be overwhelming, especially for developers new to frontend development. In contrast, Angular offers a more straightforward state management mechanism. For simpler applications, one can store state in services, while for more complex scenarios, Angular provides NgRx, which embraces the Flux pattern.

  6. Modularity in Angular: One of the standout features of Angular is its emphasis on modularity through the concept of modules. By dividing the application into cohesive, self-contained modules, developers can control loading strategies, share states, and manage services more efficiently. This design fosters collaboration within teams, with each team focusing on distinct parts of the application while maintaining overall coherence. The modularity aspect of Angular is further echoed in the concept of Angular libraries, allowing the reuse of components and services across multiple projects.

  7. Why Use a Framework: The allure of frontend frameworks lies in their ability to abstract complexities, providing developers with a smooth development experience. However, React's need for vigilance in avoiding direct state updates and nested function calls can sometimes challenge the very essence of a framework's purpose. Ideally, a framework should interpret changes and update the application efficiently, promoting immutability and unburdening developers from micro-managing state updates.

After all these experiences, I now find myself in the year 2023, at a point in my career where I have the opportunity to explore React once again. The buzz surrounding React has not diminished over the years, which piqued my curiosity to reevaluate the framework with a fresh perspective. As a developer who has gained proficiency in a component-based SPA framework like Angular, I now find myself better equipped to comprehend React's intricacies.

Surprisingly, this time around, I am finding React easier to understand. My prior experience with Angular has provided me with a valuable foundation to grasp React's concepts more effectively. The years of working with a component-based architecture have honed my skills in structuring applications and managing state, which in turn allows me to navigate React's ecosystem more confidently.

Yet, even with this newfound appreciation for React, I still wonder why it continues to reign supreme in popularity compared to Angular. Both frameworks boast a rich set of features, catering to different development needs and styles. It could be that React's flexibility and wide array of community-contributed libraries continue to attract developers of all backgrounds and preferences.

In conclusion, my journey with React and Angular has been a profound learning experience, shaping my understanding of frontend development. Each framework possesses its unique strengths and weaknesses, and the decision to choose one over the other must be based on the specific requirements of the project and the preferences of the development team.

As I embark on new adventures in the ever-evolving web development landscape, I remain open-minded, ready to embrace the next challenge that comes my way. Whether it's React, Angular, or any other emerging framework, my journey as a full-stack developer continues with excitement and anticipation for what lies ahead.

React x Angular

Top comments (0)