Case study - Library vs framework (React vs Angular)

Numerous organizations face challenges in selecting the appropriate front-end tool for their application platform. For business decision-makers, it is crucial to comprehend the concepts of both a library and a framework to differentiate and compare them to make an informed decision based on project requirements. Although it may not be a fair comparison for Angular, as several surveys suggest that React is dominating the market, I aim to share my insights gained from working with both React and Angular libraries.

To provide context, here is a short description of each library/framework from their respective official websites.

ReactJS - A javascript library for building user interfaces

React lets you build user interfaces out of individual pieces called components. Create your own React components like Thumbnail, LikeButton, and Video. Then combine them into entire screens, pages, and apps.

AngularJS - Super-heroic JavaScript MVW Framework

Angular is an application-design framework and development platform for creating efficient and sophisticated single-page apps.

Now let me highlight the major differences that I found in each.

Paradigms

When considering paradigms, React initially adopted the class-based paradigm, but later transitioned to the function-based software paradigm. React leverages the pure-function concept in JavaScript, which ensures that a function always returns the same result whenever the same arguments are passed. React components utilize this mechanism through pure components. These functional components receive props as arguments and always return the same output based on the props. Consequently, React components are easy to test and debug.

In contrast, Angular employs class-based components, where a component's state and methods are encapsulated in a single unit. This approach enables actions to modify the component's state. Additionally, class-based components permit services and dependency injection mechanisms to interact with other components.

Databinding

React adheres to a unidirectional data flow model where data is passed down to components as state or props. Whenever there is a change in state or props, the component re-renders itself, and the changes are reflected in the view.

On the contrary, Angular follows a bidirectional data flow model. This implies that changes in data in a component are reflected in the template and vice versa.

Change detection

Both React and Angular employ a similar change detection mechanism that involves comparing the current application state with the previous application state.

In React, the reconciliation algorithm compares these state changes and updates the view with the minimum possible changes in the DOM. Additionally, React provides a memoization mechanism that allows for manual optimization of re-renders. This topic will be covered later in this article.

Angular relies on zone.js to achieve change detection. Zone.js intercepts all asynchronous calls, including browser events, and notifies the component to re-render.

State management

Both Angular and React have their own mechanisms for managing local state. In React, the useState hook is used to manage or modify an individual component's local state. Angular defines the component's state in the constructor and allows actions to modify it.

However, when the application scales, managing data from various components becomes cumbersome, and it may be necessary to call multiple services within the component to achieve the same. The solution is to rely on third-party libraries such as Redux or RxJS. Both Redux and RxJS use the publish/subscribe mechanism for state management.

React (v16) introduced the Context API to manage state in different layers of the application. This allows for the sharing of data between components without the need for intermediate components to pass down props.

Performance optimization

Memoization is a performance optimization strategy where a function stores its value in a cache. Whenever the same input occurs, the function retrieves the value from the cache instead of recomputing it.

React uses a higher-order component called memo to prevent a component from being re-rendered when it receives the same props again. In addition to this, React provides the useMemo hook to cache values and the useCallback hook to cache function declarations.

In Angular, developers can manually create a memoization decorator to avoid expensive computations in a component. Alternatively, they can use the onPush change detection strategy to optimize performance. With the onPush strategy, a component is only re-rendered if there is a change in the input properties or if the component's state changes.

Ease of learn

From my personal experience, I find React easier to learn compared to Angular, as React is closer to concepts in vanilla JavaScript like functional programming, immutability, function composition, higher-order functions, pure functions, memoization, etc. Although JSX may seem complex initially, it becomes easier with hands-on experience.

Angular, on the other hand, is a fully-fledged framework with many features like routing, Angular Forms, and dependency injection. Therefore, it has a steeper learning curve. Additionally, Angular is based on TypeScript, which adds additional complexity for developers who are not familiar with static types.

Dependencies

Angular

1. Angular Core
2. RxJS
3. Zone.js
4. TypeScript
5. TestBed

React

1. React
2. ReactDOM
3. Babel
4. Webpack
5. ESLint