Angular vs React | Interviewing a Front-End Tech Lead

A battle between two major JavaScript-based technologies Angular and React is still at the highest point. As a company working with both Angular and React, it’s hard for us to understand how tech people can choose only one of two.

I’ve arranged a series of interviews with our Frontend Tech Lead Alex to figure it out.

Alex is not only working with React and Angular but with pure JavaScript every single day modernizing the legacy project as well. So he knows all the ins and outs of the main front-end frameworks and libraries standing ready to share tech insight with you and me.

Keep reading to see how we’ve placed Angular and React under scrutiny to define which is the best option for web development.

Contents:

• Background
• Popularity
• Overview
• Similar features
  • Performance
  • Documentation
  • Community
• Primary Differences: Framework VS Library
  • Properties
  • Components
  • State Management
  • Data-Binding
  • Onboarding
• Bottom Line

Background

The competition between React and Angular goes back to October 2010, the release date of AngularJS. Although the framework was the first to appear, a great number of reasons made it so cumbersome, so “ancient” (we still have some of our products based on it!) to disgrace Angular’s own shared vision, as in the case with PHP 3 / 4.

Without reusable components and virtual DOM, the framework was difficult to apply, as it looked like an upper-end enterprise framework: not okay for small, agile startups and “modern” agile development.

Two years later, a Facebook engineer Jordan Walke created React working on its prototype FaxJS for inner use. 

Subsequently, React got open-source and soon became popular, having no competitors at the time, as Angular creators delayed code updates. 

Popularity

Google Trends

Let’s check out what Google Trends say about the battle between React and Angular:

React without doubt won the war for the hearts and minds of developers across the US, with its major hub in Silicon Valley.

Although the breakaway between the technologies is smaller worldwide, the dominance of React is still easy to see:

GitHub

Although both React and Angular are the front-end giants, the number of React GitHub repositories is truly impressive, especially compared to the Angular ones:

• 

• 

Stack Overflow

According to the Stack Overflow survey in 2019, Angular and React are about to even the score with 31.3% of React fans and 30.7% of Angular fans among all respondents. But what’s interesting is only 0,2% of breakaway between the technologies among the professional developers.

The survey data proves that Angular has succeeded to catch up with its competitor.

Overview

	Angular	React
Architecture	Framework	Library
Launched	by Google in 2016	by Facebook in 2013
Official site	https://angular.io/	https://reactjs.org/
Current version	8.2.15 (9 is an RC)	16.12.0
Code	JavaScript, TypeScript	JavaScript, HTML, JSX
Functionality	Out-of-the-box	Created/ installed manually
Documentation	+	+
Community	Large	Large
Companies	McDonald’s, AT&T, HBO, Apple, Forbes, Adobe, Nike, Microsoft	Facebook, Twitter, Netflix, Airbnb, PayPal, The New York Times, Yahoo, Walmart, Uber

Similar Features

Performance

After the release of Angular 9, the technologies will have nearly the same performance indicators. The Ivy compiler is promised to be upgraded and made compulsory that will result in reducing the size of bundle files, improving application performance in such a way.

Besides, no performance problem is detected in React that has been using virtual DOM for achieving maximum performance efficiency since the earliest versions. 

So both Angular and React developer will have a fair chance to build a high-performance application, this is just about his/ her skills. 

Disregarding the technology used, performance drops only in case if the algorithms are poorly written. 

Alex Kaida, Front-End Tech Lead

Documentation

Both technologies are well-documented and provide a rich knowledge base to a user on the official website:

• 

• 

Multiple information sources selected carefully by the creators and contributors encourage newcomers to opt for a particular technology, ensuring a comprehensive approach to learning.  

Community

A large community of contributors and supporters is the forte of Angular and React. Starting from Stack Overflow to Quora, a developer could ask the coworkers and, in turn, answer their questions, exchanging the valuable experience to deal with the most complicated problems.

Although each of the technology showcases available resources & communities on the official website, Angular has gone further and added the info on books, workshops, online training, onsite courses, and podcasts.

Primary Differences:
Framework VS Library

The main question is can we really compare a framework and a library? 

The first is a self-sufficient tool for web and mobile development, while the second should be mixed with other libraries. 

• As a framework, Angular offers more opportunities out-of-the-box. A developer shouldn’t spend time searching & installing the components/ libraries etc. necessary to build an average application. However, it also means that much more time should be spent on learning the concepts Angular provides (directives, modules, components, pipes, etc.). 

• As a library, React offers more freedom to a developer. The freedom to create the elements from scratch setting up third-party libraries.

Angular	React
Updating DOM: change detection	Updating DOM: Virtual DOM
Templates, based on an extended version of HTML	JSX
Separate files for HTML, styles, and logic by default (best practice), but you can write everything in one file without restrictions	Separate files for styles and logic, except encapsulated styles (see below)
Encapsulated styles by default (best practice). You can turn it off for a particular component and/or for the entire app	Another library needed for encapsulation, css-in-js
Ajax requests by built-in @angular/http	Fetch by default, or install another library
Built-in RxJS	You can still install RxJS, but it’s not a “react way”
Built-in utilities for unit testing	Built-in utilities for unit testing
Out-of-box ready-to-use Karma (unit tests) and Protractor (e2e tests)	–
Built-in @angular/forms for building template-driven or reactive forms	–
Dependency injection	–
State management with Akita, NgRx, NGXS	State management with Redux, MobX
Easy-to-use lifecycles and component state	Hooks
–	<Component {…props} />
Built on top of TypeScript	Supports TypeScript
One-way (best practice) and two-way data binding	One-way data binding
No additional libraries needed	Additional libraries everywhere
Different tools for different purposes (services, directives, pipes, etc.)	Components

Properties

React allows using any props (or “inputs” to say it in Angular language) in the child component:

<App-Some-Component {{ ...twoInputs }}>
</App-Some-Component>

As opposed to React, Angular has the TS standardization together with its own one insisting on sending each input transparently. This is required by the DOM to create the component “scheme” to use for change detection:

<app-some-component [one]="value" 
[two]="anotherValue"></app-some-component>

Components

Angular allows you to implement the functionality of the additional templates using components, directives, or pipes:

<div>{{ value | appPercentPipe }}</div>

<div appPercentDirective>{{ value }}</div>

<div>
	<app-percent-component [value]="value"></app-percent-component>
</div>

While React offers only components or HOCs (HOC stands for a higher-order component) for this purpose:

import React from "react";
import { render } from "react-dom";
import { Percent } from "./Percent";
 
export const App = () => {
  const value = 0.7;
 
  return (
    <div>
      <Percent>{value}</Percent>
    </div>
  );
};

render(<App />, document.getElementById("root"));

State management

From the page filters to the data stored locally for further use, state manager allows taking control over processes and synchronizing the data, thereby simplifying working with the application. 

Using Angular, you should think of the additional option to handle state management resources only working on a large application. For everything else, the in-built opportunities provided by the framework will suffice. 
React offers a limited opportunity for state management out of the box. Although the new inbuilt Hooks useContext and useReducer to be used in small apps appeared in React 16.8, Redux and MobX are still two the most popular options to synchronize the state of your app.

Data-Binding

Two-way in Angular. I.e. the change in the model state make UI element change automatically.  

In React with its one-way data-binding, a developer should catch the native events to change the model’s value manually so that it can be updated during the rerendering. Alternatively, you can install a state management library to deal with data binding. 

As I’ve mentioned above, React requires more manual work from a developer. Although you don’t have to reinvent the wheel, you still should choose, install, set up, migrate, and update the libraries necessary to automate the data-binding process.

Onboarding

React offers freedom, making a developer choose the way of feature implementation him/herself taking full responsibility for it. Although Angular provides a developer with a recommended way to implement one or another feature, it always remains a recommendation. It’s up to a developer to choose whether it’s worth accepting or create his/her own way of feature implementation. 

Such freedom can be both good and bad, depending on a specific project and developer, especially with the responsibility for the installed libraries upgrade and migration. 

In any case, it’s safe to say such freedom impedes the process of a developer/ team change. In other words, the onboarding of a new React developer requires more time to explore the project and audit the code.

Meanwhile, the Angular projects imply an easier onboarding process for new team members. 

Bottom Line

After all, exploring the information given and listening to the developers’ opinion, I’m inclined to believe that in fact there is no battle between Angular and React. This is not a situation where only one can prevail, especially with such a concept as micro frontends.  There is plenty of room in the field for both. They each have their strengths and weaknesses, and developers should choose the best tool for the job. Developer preference is a perfectly valid factor to consider, as well. With many options of comparable strength available, we end up with the luxury of choosing the one that fits the most. 

For that reason, the Jellyfish.tech is capable of building the frontend applying both Angular and React equally well. We don’t choose the tool proceeding from popularity or personal favor, but determine which technology will be the best fit for the product based on the specifications, requirements, and set of functions.

P.S.

Thanks to Alex Kaida for his contribution♥