Angular vs. React: 7 Key Features Compared

Angular vs. React is a popular debate among front-end JavaScript developers and, more often than not, the discussion ends up being biased towards one technology or the other. Developed by Google and Facebook respectively, Angular and React are the two popular technologies used to build interactive single-page applications.

A comprehensive comparison between Angular and React is imminent because there are certain places in which they significantly overlap in terms of what they offer, i.e. building the front-end view of your application and other places where their functionality remains incomplete unless helped by a third-party library. Adopting one technology over the other is a question of whether Angular or React better solves your problem and a bit of intuition. In this tutorial, we’ll compare and contrast seven key different features of Angular and React.

I am an ardent proponent of the code-first approach (code speaks louder than words, they say). Keeping this in mind, I’ve added code samples of Angular and React wherever possible so that you can build on your intuition and decide which works for you and which doesn’t. Let’s get started.

Framework vs. Library

Angular is a framework, while React is a library.

So what does this mean? React on its own isn't adequate to create a web application because it is just designed to create views: the ‘V’ in MVC. React let's you build component-based views for which data can be passed down to child views. To address some of the other architectural needs, the React community has created key libraries like Redux and React Router, which supply architectural patterns that complement React.

Here's an illustration of the basic flow of the Redux architecture:

User interface events in the React components create actions, which update the central data store (model) of the app, which causes the components to re-render.

Most React apps will make use of these 3rd-party libraries, and many more besides. Part of the challenge of starting out as a React developer is getting a handle on which 3rd-party libraries are essential and learning these on top of React itself.

Angular, on the other hand, is more of a complete solution. 

Angular is a framework for building client applications.

Angular was firmly built on top of the MVC pattern, which separates the application into three different layers. The first version of Angular made this architecture very clear, but the added complexity involved in mastering concepts such as directives, factories, and services to create a single-page application forced the developers at Google to shift towards a component-based architecture.

But when your application starts to grow, it’s important to have a solid structure that keeps the business logic of your application away from the components. Being a framework, Angular allows you to enforce structural organization by moving the business rules into a domain model (using a combination of model classes and services) and injecting the model into your components via dependency injection.

Here is a sample of code that illustrates how the business logic is encapsulated inside a User model and a User service, and away from our component.

/* Path: /app/models/User.ts */

export class User {
    id: number;
    username: string;
    password: string;
    firstName: string;
    lastName: string;
}

/* /app/services/user.service.ts */

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
 
import { User } from '../models/User';
 
@Injectable()
export class UserService {
    constructor(private http : Http) { }
 
    getAll() {
        // API to return all users
    }
 
    create(user: User) {
        //API call to create user
    }
 
    update(user: User) {
        //API call to update user
    }
 
    delete(id: number) {
        //API call to delete user
    }
 
}

/* Path: /app/page/page.component.ts */

import { Component } from '@angular/core';
 
import { User } from '../models/User';
import { UserService } from '../services/user.service';
 
@Component({
    templateUrl: 'page.component.html'
})
 
export class PageComponent {
    currentUser: User;
    users: User[] = [];
 
    constructor(private userService: UserService) {
       //Dependency is Injected inside the constructor's arguments
 
  
    deleteUser(id: number) {
        this.userService.delete(id).subscribe(() => { #Do Something});
    }
 
    private loadAllUsers() {
        this.userService.getAll().subscribe(users => { #Do something else });
    }
}

<!---Path: /app/home/page.component.html -->

<div class="title">
   
    <h2>All users:</h2>
    <ul>
        <li *ngFor="let user of users">
            {{user.username}} ({{user.firstName}} {{user.lastName}})
            - <a (click)="deleteUser(user.id)">Delete</a>
        </li>
    </ul>
   
</div>

Component-Based Approach

Both Angular and React are built around the idea of a component.

Components in Angular

Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components.

What are components? In Angular, components are TypeScript classes that have a @Component decorator marked over them. Moreover, inside these decorators, we can define what Angular calls the meta-data, which includes the template, styles, selectors and so forth.

Component hierarchy in Angular is designed in such a way that you can associate structure and functionality under a single entity. Here is a high-level architectural overview of components and how this links to everything else in Angular.

Data sharing among components is possible by nesting components, as exemplified below.

/* UserParentComponent.ts */

import { Component } from '@angular/core';
 
 
// The <user-child> selector is nested inside <user-parent>. Each user is passed down as a property. 

@Component({
  selector: 'user-parent',
  template: `
    <h2>There are {{users.length}} registered users {{status}} now</h2>
    <user-child *ngFor="let user of users"
      [user]="user"
      [status]="status">
    </user-child>
  `
})
export class UserParentComponent {
  users: { id: number, name: string }[] = [
    { "id": 0, "name": "Chris" },
    { "id": 1, "name": "Dwayne" },
    { "id": 2, "name": "Eve" }
  ];
  status: string =  "online";
  
}

/* UserChildComponent.ts */

import { Component, Input } from '@angular/core';
 
// Input properties are adorned with @decorators
// user & status are input properties
 
@Component({
  selector: 'user-child',
  template: `
    <h2>{{user.name}}</h3>
    <p> id : {{user.id}} </p>
    <p> Status: {{status}} </p>
  `
})
export class UserChildComponent {
  @Input() user: { id: number, name: string };
  @Input() status: string;
}

Creating a React Component

The concept of components is deeply rooted in React, just as it is in Angular. Facebook calls React "a component-based library that lets you build interactive user interfaces". However, unlike Angular, React components are just JavaScript functions with an arbitrary number of inputs and an output. The code below shows a component defined using a JavaScript function and using an ES6 class.

// Writing components using JavaScript functions

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Writing components using ES6 Class

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Each React component accepts an arbitrary number of inputs, which is stored inside an object named props.

It also has a render method, and as the name suggests, this method determines what will be rendered when the component is invoked. Each component maintains an internal state (via this.state), and every time the state changes, the render function of that component is invoked again.

Language Features: TypeScript vs. ES6 and JSX

Angular applications are written in TypeScript, which is a superset of ECMA2015 and uses a transpiler to compile your strongly typed .ts file to a plain .js file. TypeScript offers language extensions that are designed to make writing in JavaScript easier, and it associates type information with JavaScript entities to enforce type checking and enhance the development workflow.

Some of the key features of TypeScript include optional static typing and support for interfaces, classes, and decorators. (Decorators are functions that are prefixed with @ and immediately followed by a class, parameter, or a property.)

React also extends vanilla JS with some new language features. Let's dive into React, shall we? One of the most important language features in React is evident in this code sample.

function Tweet(props) {
  return(
  <div className="tweet">
        <img src="https://twitter.com/some-avatar.png" className="tweet__avatar" />
        <div className="tweet__body">
            <p>This is a tweet.</p>  
        </div>
      </div>
    );
}
    

Isn't this great? React lets you embed XML/HTML tags into your JavaScript file, and this is done through JSX, which offers syntax extension capability to JavaScript. Of course this also means we have to use a transcompiler like Babel, which compiles our JSX code into the JavaScript that browsers can understand. The above code compiles down to this:

"use strict";

function Tweet(props) {
  return React.createElement(
    "div",
    { className: "tweet" },
    React.createElement("img", { src: "http://twitter.com/some-avatar.png", className: "tweet__avatar" }),
    React.createElement(
      "div",
      { className: "tweet__body" },
      React.createElement(
        "p",
        null,
        "This is a tweet."
      )
    )
  );
}

Although using JSX is recommended, you can stick with the much more verbose vanilla JavaScript React.createElement() syntax if you are against the idea of embedding HTML tags into JavaScript.

Type Checking in Angular vs. PropTypes in React

Static type checking is performed at compile time. The compiler warns you about potential type mismatches and detects certain errors that would otherwise go unnoticed. Additionally, defining a contract on a variable, a property, or the parameters of a function can result in more readable and maintainable code.

TypeScript and Type Safety

Variable and function declarations are made more expressive by declaring their data types. You can read more about the different primitive data types in the TypeScript documentation.

let isLoggedIn: boolean = false;
let id: number = 10;
let name: string = "Davis";
let list: number[] = [1, 2, 3];

enum Color {Red, Green, Blue};
let c: Color = Color.Red;
let bucket: any = 4;
bucket = "I can be a string";
bucket = false; // or a boolean

Defining the signature of an API using an interface makes the code less ambiguous and easier to comprehend. The interface serves as a quick start guide that helps you get started with code immediately and saves time otherwise spent on reading the documentation or the actual implementation of the library.

interface ButtonSettings {
    text: string;
    size?: { width: number; height: number; };
    color?: string;
}

function createButton(settings: ButtonSettings) { ... }

createButton({ text: 'Submit' }); // OK
createButton({ text: 'Submit', size: { width: 70, height: 30 }}); // OK
createButton({ text: 'Submit', color: 43); // Not OK: 43 isn't a string
createButton({ text: 'Submit', size: { width: 70 }); // Not OK: size needs a height as well
createButton({ color: 'Blue'}); // Not OK: 'text' member is required

The type keyword in TypeScript can be used to create an alias for a type. You can then create new types which are a union or intersection of these primitive types.

//Union Types

type Age = number | string;
function getAge (age: Age): string {
  return `You are ${age}!`;
}

let ofSusan: Age =21;
let ofTyler: Age = 'thirty one';
getAge(ofSusan); // You are 21!
getAge(ofTyler); // You are thirty one!

//Intersection Types

 interface Name{
  name(firstName: string, lastName: string): string;
}

interface Age {
  age(current: number): number;
}
// assign intersection definition to alias User
type User = Name & Age;

function createUser (testUser: User) {
  testUser.name("David","John");
  testUser.age(99);
  testUser.address(); //error 

Type Checking With React Prop Types

React has limited support for type checking because the underlying ES6 doesn’t support it. Nevertheless, you can implement type checking using the prop-types library developed by the React team. Type checking the props of a component to check whether it is a string can be done as shown below.

import PropTypes from 'prop-types';
//importing prop-types library

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
      <P> My age is, {this.props.age} </h2>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string;
  age: PropTypes.number;
};

But prop-types are not limited to strings, numbers, and booleans. You can do a lot more, as described in the prop-types documentation. However, if you take static type checking seriously, you should use something like Flow, which is a static type-checker library for JavaScript.

Scaffolding: Angular CLI vs. create-react-app

Starting a project from the ground up might seem fun initially. However, the process of setting up the directory structure, writing boilerplate code for components, and getting the application bootstrapped is a time-consuming and unproductive exercise when you're on a schedule. Your strategy should be to get on with your app as quickly as possible and focus on the actual development. Thanks to Google and Facebook, you have tools available to create and scaffold your applications with ease.

Setting up Angular-CLI for Angular and create-react-app for React is straightforward using npm.

// Angular CLI

$ npm install -g @angular/cli

// create-react-app

$ npm install -g create-react-app

Using Angular CLI

To create a new Angular application, you should use the following command:

$ ng new PROJECT-NAME
$ ng serve

But that's not it. The ng generate command lets you generate components, routes, pipes, directives, and services.

$ ng generate component Page

installing component
  create src\app\page\page.component.css
  create src\app\page\page.component.html
  create src\app\page\page.component.spec.ts
  create src\app\page\page.component.ts
  update src\app\app.module.ts

Angular CLI can do a lot more, like creating a build of your Angular app, commands for running unit tests, and end-to-end testing. You can read more about it on GitHub.

Using create-react-app

On the other hand, create-react-app is the officially supported way of creating a React app without any configuration files.

$ npm install -g create-react-app

This should create a functional React app with all the Babel and Webpack dependencies taken care of. You can start running the app on your browser using npm start.

You can find the scripts available for the React app in the package.json file.

  
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Data Binding: Two-Way Binding vs. Unidirectional Binding

Data binding is a feature that enables synchronization of data between the application state (model) and the view. In a one-way data binding routine, any change in the state of the application automagically updates the view. On the contrary, two-way data binding binds together properties and events under a single entity: any modification of the model updates the view and vice versa.

Data Flow in React

In React, the properties are passed down from parent to child components, which is known as the unidirectional or top-down data flow. The state of a component is encapsulated and is not accessible to other components unless it is passed down to a child component as a prop: the state of a component becomes the prop of the child component.

class UserChild extends React.Component {
  render() {
 
    let userData = this.props.users.map( (user) => {
      return (<p> <strong>{user.id} </strong> : {user.name} </p>);
      });
   
    return (
        <div>
          <h2> Hello. The server is {this.props.status} </h2>
          {userData}
        </div>
    );
  }
}

class UserParent extends React.Component {
  constructor() {
    super();
    //State gets defined here
    this.state = {
      status: "Online"
    }
  }
  render() {
    return (
      <div>
       
        <UserChild users={this.props.users} status={this.state.status} />
      </div>
    );
  }
}

var USERS = [
    { "id": 0, "name": "Chris" },
    { "id": 1, "name": "Dwayne" },
    { "id": 2, "name": "Eve" }
];


ReactDOM.render(
  <UserParent users={USERS} />,
  document.getElementById('container')
);

But what if you need to propagate the data up through the component tree? This is done through child events and parent callbacks. The React documentation includes a good example that deals with such a scenario.

Data Binding in Angular

Data binding techniques available in Angular are among the unique features that make it stand out. Angular has out-of-the-box support for interpolation, one-way binding, two-way binding, and event binding.

Interpolation is the simplest way to bind your component property inside the text between your HTML tags and attribute assignments.

<p>Welcome back {{currentUser.name}}!</p>

Property binding is similar to interpolation in the sense that you can bind the properties of your view elements to component properties. Property binding favors component communication and is identical to how props are passed down in React.

<img [src]="userImgUrl">

<user-child [user]="currentUser"></user-child>

Event bindings allow data flow in the opposite direction, i.e. from an element to a component. Here, click is a target event, and on the right, we have the onSave() method that gets invoked when the event occurs.

<button (click)="onSave()">Save</button>

But the most important feature is the two-way binding using the [(ngModel)]. This merges the property binding and event binding under one directive and is particularly useful with forms and input fields.

<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>

Server-Side Rendering

Server-side rendering is a traditional rendering technique. Here, the server returns the whole HTML file upon request, and the browser is left with the simple job of displaying it to the user. Client-side rendering, on the other hand, returns a bare-bones HTML document, the stylesheet, and a JavaScript file.

The JavaScript makes subsequent requests to render the rest of the website using a browser. React, Angular and all other modern JavaScript front-end libraries are good examples of client-side rendering. This is evident if you view the source of your Angular/React application.

But client-side rendering has the drawbacks that it doesn’t work great for SEO and that it returns incomplete HTML content when you share your link on social media sites. Angular has a solution called Angular Universal that takes care of making your app search engine friendly and social media friendly. It’s a library built by the Angular team, and using it is definitely favored.

Universal makes use of a pre-rendering technique where the whole website is rendered from the server first, and after a couple of seconds, the user is switched to the client-side rendering. Since all this happens under the hood, the user doesn’t notice anything different.

If you are using React with Redux, the Redux documentation has a good tutorial on setting up server rendering. You can also set up React to render from the server using the BrowserRouter and StaticRouter components available in the react-router library. You can read more about it in this Medium article. But if you are into performance and optimization, you can try next.js, which is a library for SSR in React.

React vs. Angular: Pros and Cons

Let's look at some of the general advantages and disadvantages of Angular and React:

Should I Use Angular or React?

The development process is good with both React and Angular. Both technologies are powerful, and picking the ideal one comes down to personal preference. However, you must make decisions depending on your needs for functionality and usability, as well as the necessity to expedite development. The above pros and cons of each framework or library will help you in making a better decision.

Wrapping It Up

Comparing a full-blown, feature-rich framework to a robust UI library might not seem fair. However, they are advanced JavaScript technologies used to create interactive single-page applications, and in that regard, this article should help you decide on choosing one of them.

What are your thoughts on Angular vs. React? Do share them in the comments below.