When discussing React versus Angular, the debate often centers on which framework is the best choice. Having worked with React for over a year and familiarized myself with the intricacies of Angular, I can attest that both are solid choices. However, in a world where a new JavaScript framework seems to pop up almost every week, their relevance comes into question. With significant innovations occurring in both frameworks, it’s time to revisit the React and Angular rivalry. Which one is worth your time? Which is worth learning? Which is the best fit for you, your project, your career, and your personality?
Let’s dive into the different aspects of React and Angular. We’ll explore their philosophies, structures, statistics, and the types of people and projects they are best suited for. We’ll also examine the recent changes in these two frameworks. And how I feel about React and what I expect from the HNG internship program.
React: The Chaotic Maverick
React was created at Facebook and released in 2013, and embodies the company’s unofficial motto: “Move fast and break things.” This disruptive, chaotic spirit is reflected in React’s logo, which resembles an atomic reaction or explosion. React is unopinionated and doesn’t enforce any rules, allowing developers to create their own paths. This freedom and flexibility make React akin to the bustling and vibrant markets of Lagos, where creativity thrives amid the chaos. If you value creativity and thrive in fast-moving, disruptive environments, React might be a good fit for you.
Angular: The Law-Abiding Citizen
Angular was released by Google in 2016, emerged during a time when Google’s motto was “Don’t be evil.” Angular’s logo exudes safety, with its earlier version resembling a shield. Angular is square in every sense — it plays by the rules and provides structure. Angular is opinionated, offering a comprehensive framework that enforces best practices. If Angular were a character in a role-playing game, it would be a law-abiding model citizen, much like the orderly and structured streets of Abuja. If you need structure and prefer enforced best practices, Angular might be more suitable for you.
Common Ground and Key Differences
Both React and Angular use components and manage data flows between them, as well as the application’s state. However, these commonalities reveal significant differences in execution.
Angular’s MVVM Structure
Angular employs an MVVM (Model-View-ViewModel) structure, where models hold data structures, views manage displays, and the ViewModel bridges the gap between models and views. For instance, In the old Oyo Empire, the economy consists of various resources, trade goods, and wealth. This is similar to the “Model” in Angular, which holds the data structures and the raw information. The markets and public displays in the Oyo Empire are where the economy’s wealth and resources are showcased. People can see and interact with these displays. This is like the “View” in Angular, which manages how information is presented to the users. The officials and middlemen in the Oyo Empire act as intermediaries. They understand both the economic details (the Model) and how to present them to the public in the markets (the View). They facilitate transactions, ensure accurate representation, and manage interactions between the economy and the public. This is akin to the “ViewModel” in Angular, which bridges the gap between the models and the views, ensuring that the data is correctly presented and updated.
React’s Focused View Layer
React, in contrast, focuses only on the view layer. React components are functions that translate inputs into interfaces, with a simple data flow where information passes from the top of the component tree via props. React does not handle routing, translations, or authentication, offering developers the freedom to choose their preferred libraries. However, this freedom comes with the risk of choosing the wrong library, which can be costly. Using the old Oyo Empire analogy, React’s approach is like the artisans in the markets who focus solely on crafting and displaying their goods (view layer), using materials provided by traders (inputs) to create their wares (interfaces). Information about these goods flows from the head merchant down to the artisans (component tree via props). React leaves navigation, translations, and security to other specialists, offering artisans the freedom to choose their suppliers, but with the risk of costly mistakes if they choose poorly, much like navigating various options in an open market.
Learning Curve
ReactJS: Learning React is like picking up a versatile toolkit where you can choose the tools that best fit your project. Its component-based structure and JSX syntax make it easier to adopt for developers already familiar with JavaScript.
AngularJS: Learning Angular is akin to mastering a complex, all-in-one machine. It’s steeper and more challenging to learn due to its comprehensive nature and extensive feature set. However, once you conquer it, you have a cohesive and powerful framework at your disposal, capable of creating significant applications without needing additional tools.
Performance
ReactJS: React is designed to handle updates to the user interface (UI) very efficiently using virtual DOM and an efficient diffing mechanism, much like how a sports car is built for speed and agility.
Virtual DOM: React uses a virtual representation of the actual DOM (Document Object Model). When changes occur, React updates the virtual DOM first, which is faster than updating the real DOM directly.
Efficient Diffing Mechanism: React compares the virtual DOM with a snapshot of the previous virtual DOM to identify what has changed. This process is called “diffing.” React then updates only the parts of the real DOM that have actually changed, minimizing the amount of work needed to keep the UI up-to-date.
Together, these features allow React to update the UI quickly and efficiently, even when there are frequent changes. This results in a smooth and responsive user experience, much like the performance of a sports car, which is designed to handle sharp turns and rapid acceleration with ease.
AngularJS: Angular’s performance can be compared to a robust but heavy-duty truck. Its two-way data binding is convenient for small tasks, but in large applications with a lot of data, it can slow things down, much like a truck struggling with a heavy load. Angular has a mechanism for tracking and updating changes in the application state can become inefficient when dealing with large or complex applications. Specifically, Angular uses a process called change detection to keep the user interface (UI) in sync with the application’s data model.
In extensive applications with many components and data models, the change detection process can become resource-intensive. This can lead to slower performance because Angular has to check a large number of bindings and data points to determine if any updates are needed, which can be time-consuming and computationally expensive. Consequently, this overhead can result in slower responsiveness and degraded performance of the application, especially when handling a lot of data or frequent updates.
Code Quality and Developer Experience
Angular is like eating at a trusted “Bukka” (local eatery). You know what you’re getting, and you can almost certainly predict the quality of the “Amala” (yam flour). Yorubas particularly knows “Amala” from “Bukka's” are top tier, this predictability can be similar to how Angular is a perfect fit for risk-averse organizations like banks, enterprises, and public institutions with long-term plans and large teams who aren’t looking to experiment.
Conversely, React is like dining at a restaurant where the quality depends on the chef. The code quality in React can vary greatly; exceptional developers can produce high-performing code, but it’s also possible to end up with poorly written code. This variability makes React more suitable for startups needing to ship products quickly in a highly competitive environment. Just like how the mood of a chef in a restaurant can make or break the dining experience, React developers have the potential to create outstanding or subpar applications.
Real-World Statistics and Trends
According to the latest Stack Overflow survey, React shows higher desirability and more positive opinions compared to Angular. React is the most desired technology in its space, dominating the market share. Angular, while still relevant, has a smaller market share and more outgoing flows, indicating users moving to other frameworks like Svelte and VueJS.
The State of JavaScript survey reflects a similar trend, with React occupying the high market share and high opinion quadrant, whereas Angular shows average usage and lower opinions. These statistics highlight the current state of play between Angular and React, much like how Nigerian music genres like Afrobeat have gained global popularity, overshadowing traditional genres. However, this doesn’t mean that Afrobeat is superior in quality to other traditional genres.
The Evolving Landscape
Angular is targeted at the enterprise world, which means it moves more slowly and has additional overhead. Google internally uses another framework called Wiz, focused on performance. The latest Angular conference revealed that Angular and Wiz are moving closer together, with Angular adopting features from Wiz. This could shift Angular towards a more React-like focused mindset, potentially increasing its popularity and agility. This evolution is similar to the way Nigerian tech hubs in cities like Lagos are gradually adopting more agile and innovative practices to stay competitive.
React’s evolution is like a skilled carpenter who traditionally focused on crafting fine furniture (client-side interfaces). Recently, this carpenter has teamed up with an expert in building complete homes (such as Vercel the creators of NextJS). With new tools and techniques (React 18 and 19’s compiler-based optimizations), the carpenter can now construct entire houses, not just furniture, moving closer to the capabilities of a full-service construction company (Angular’s comprehensive framework).
Choosing Between React and Angular
When should you use Angular or React? React is more suited for situations requiring agility, while Angular is better for stability and security. For example, if you need to build an internal administration tool that displays various entities stored in a database and requires many developers, Angular’s structure and MVVM model make it a good choice. On the other hand, if you have a small team and want to create a web app with server-side logic where user experience is key, React would be a better fit. This scenario is common for many SaaS companies.
Now what does this mean for me?
As an intern at HNG with nearly two years of experience with React, I am excited to dive into more advanced aspects of ReactJS. This hands-on internship, coupled with React’s ability to push the boundaries of what’s possible, is truly exhilarating. HNG’s strong emphasis on real projects and collaboration with talented developers provides an excellent platform to deepen my React knowledge.
I look forward to mastering state management with Redux, enhancing routing with React Router, and boosting performance using advanced React features. The HNG Internship is not just about coding; it’s also about growth, learning, and building connections within the tech community.
Feel free to learn more by visiting the “HNG Internship” (https://hng.tech/internship) website or exploring opportunities to “hire top talent from HNG” (https://hng.tech/hire).