Share

engineering

9min read

Angular vs React—How to Choose the Best Framework? Guide for Beginners

Angular vs React—How to Choose the Best Framework? Guide for Beginners

If you are beginning your career as a frontend developer, then you are probably wondering which framework you should invest your time into. As per usual, the shortest answer is “it depends,” but in this article, I will try to help you reach that decision. To make things a little easier, I will focus only on the two most popular choices: Angular and React.

React is a javascript library for building user interfaces. It was developed and is maintained and used by Facebook. In May 2013, it was open-sourced under MIT license. Currently, it has over 130,000 stars and almost 1,300 contributors on GitHub.

Angular is a TypeScript-based open-source web application framework developed by Google. Its current form, which was released in September 2016, is a complete rewrite of the previous framework: angular.js. It is also referred to as Angular 2+ to further distinguish it from its roots. During its development, Google decided to drop any backward compatibility with angular.js. It currently has about 48,800 stars and 950 contributors.

The number of stars and contributors may indicate that React is more popular of the two. However, we have to remember that—since it’s older—it had more time to accumulate those stars and that Angular’s older version may still have an impact on how it is perceived today.

So, Angular vs. React—let’s have a look at the differences!

image1

Library vs. Framework

The first and most important difference is that React is not really a framework but a library. By itself, it is only responsible for the View part of the MVC (Model-View-Controller) model. In order to build more complex applications, you will most likely use it together with other libraries like Redux for state management, react-router for routing, and many others. There are many starter kits that can help you create a new project, but it’s not immediately obvious for a beginner which one to pick. Regardless of which one you choose, as your project gets bigger, you will probably need to spend some time configuring webpack or other bundler to better suit your needs.

Angular, on the other hand, is a full, self-sufficient framework. All important modules come together with it and can be used right out of the box. For this reason, Angular is easier to set up but being a framework comes with its own disadvantages. The biggest one is the lack of flexibility of tools you would like to use. Configuring Angular to work with external libraries is, of course, possible, but it is not as straightforward as in React. The other advantage that React, as a library, has over Angular is that it can be integrated into an existing project. It is only a View part of the application so it can be mixed with already existing logic.

JSX vs. Templates

The core ideas of both frameworks are also different. React approach is to make web development pure javascript. To achieve that, it uses JSX—a js syntax extension that allows you to write HTML-like code in your javascript files. Thanks to JSX you can have UI logic and rendering logic (which more often than not are strongly coupled) in one file. Its syntax may feel a little awkward at first. The “class” word is a keyword in javascript so the attribute for the class in JSX is called “className”. There are other little changes like that, so if you have a lot of experience with pure HTML it may take a while to get used to.

image4

Angular framework, on the other hand, takes the more classic approach. It uses templates which are HTML files enhanced with Angular’s own templating syntax. There are almost no changes to attributes known from HTML, but you will have to learn how to use directives like “ng-if” or “ng-for,” how to bind properties or events, and how to use two-way binding. Angular’s templating syntax is fairly complex and for the newcomer may feel unintuitive at times.

Virtual DOM

The distinctive feature of React is it’s Virtual DOM. It is an abstraction of the HTML DOM. Thanks to Virtual DOM, the site re-renders only the parts that are changing and not the whole DOM Tree. It all happens under the hood, but it’s one of the reasons that React uses JSX. Angular operates straight on the “real” DOM—that’s why its templates are basically HTML.

ES6 vs. Typescript

Another big difference between those two frameworks is that most React applications are written using ECMAScript 6 while Angular uses TypeScript. Thanks to TypeScript you can use static typing in javascript. If you worked in Java or any other statically typed language before, it will probably feel intuitive to you. React doesn’t force any specific language on you, so you can use TypeScript with it if you want. However, most projects run with ES6, since it’s the default setup.

Components

Both Angular and React are component-based. Components are the building blocks of an application. They contain internal logic and return rendered UI based on input parameters. Each component should be self-contained and reusable.

In React, each component can be created as a function that takes in “props” argument and returns JSX or as a class that extends “React.Component,” and defines “render” method. If you declare component as a class you can override its lifecycle methods, and use component’s state. The component is re-rendered each time its props or state changes. React 16.8 introduced hooks, which let you operate on a state, also in a component written as a function.

Antoni

Software Engineer

First and the most important difference is that React is not really a framework but a library.

In Angular, each component is separated by default into three files: the template HTML file, CSS file, and typescript file that contains the definition of the component’s class. In order to use lifecycle methods, your class needs to implement interfaces dedicated to those methods. If HTML or CSS part of your component is simple you can inline it into the typescript file, but the default separation often encourages developers to write bigger components.

Data binding and state management

Angular and React differ also in data binding and state management.

image8

Angular makes use of two-way data binding, which means that the application model state is tightly coupled with UI. If you change parameters programmatically, the UI changes accordingly. If the user changes something by the UI, the corresponding parameter also alters. You can manage the state of the application by using services—they are the controller part of the MVC model in Angular. They can be created as singletons and communicate directly with the components. If you worked on backend projects before the concept of services should feel familiar to you.

React, on the other hand, uses one-way data binding, meaning the components will be re-rendered if they are provided with new data. However, in order to retrieve user input data from the UI, you will have to write your own callback functions for it. The state management in React is limited to the state at the component’s scope. In order to use full application state management, you will need to use external libraries, but worry not, there are plenty to choose from, with the most popular right now being Redux.

Example

Let’s take a look at the example written in both frameworks. It’s a simple component consisting of a checkbox and a button. The label for the checkbox and the button callback function are provided from the parent component. The state of the checkbox dictates if the button is enabled. With little to none styling it looks like this:

image2

React:

import React from "react"
import "./Popup.css"

class Popup extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      buttonEnabled: false,
    }
  }

  render() {
    const { labelText, onButtonClicked } = this.props
    const { buttonEnabled } = this.state
    return (
      <div className="popup">
        <label>
          <input
            type="checkbox"
            name="enable"
            value={buttonEnabled}
            onChange={() => this.setState({ buttonEnabled: !buttonEnabled })}
          />
          {labelText}
        </label>
        <button onClick={() => onButtonClicked()} disabled={!buttonEnabled}>
          OK
        </button>
      </div>
    )
  }
}

export default Popup

In React, the labelText property and onButtonClicked function are both provided as a props from the parent component. The buttons onClick callback triggers the provided function.

Angular:

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';

@Component({
  selector: 'app-popup',
  styleUrls: ['./popup.component.css'],
  template: `
    <div class="popup">
      <label>
        <input
          type="checkbox"
          name="enable"
          [value]="buttonEnabled"
          (change)="buttonEnabled = !buttonEnabled"
        />
        {{labelText}}
      </label>
      <button (click)="onButtonClicked()" [disabled]="!buttonEnabled">
        OK
      </button>
    </div>
  `
})
export class PopupComponent {
  @Input() labelText: String;
  @Output() buttonClicked = new EventEmitter<void>();
  buttonEnabled = false;

  onButtonClicked() {
    this.buttonClicked.emit();
  }
}

In Angular, only the labelText property is provided as an input to component. Clicking the button emits an event, which then can be intercepted by the parent.

The component like this probably wouldn’t be used in real-life application, but I hope it demonstrates the differences between the frameworks.

Learning curve

The thing that people often talk about when discussing Angular is its dreaded, steep learning curve. It’s probably because it is a full framework and you need to learn much of it at the very beginning of the project. Starting from the basics like modules, components, templates, services, dependency injection, pipes. That’s a lot to take in! Together with it you also need to learn how to write in Typescript and how to use observables interface from RxJS. That last one is often regarded as the most difficult concept from the Angular framework.

React’s entry threshold is lower. All you need to learn is how to write in JSX, and how component’s lifecycle works. But that is probably not enough to create a web application—you will also need to learn many additional React-oriented libraries like Redux, react-router or styled-components. React is only a rendering library so you will have to take care of your application’s logic on your own too.

The libraries which are commonly used together with React are still evolving, and the community often switches between them. React itself is also getting frequent, feature-rich updates. It may be easier to step into than Angular, but it takes a continual effort to stay on top of it.

Popularity

As I mentioned above, React seems to be more popular on Github. Let’s see how it pans out on other platforms. If we take a look at Google search statistics from the last year we can see that it also favors React:

image3

React surpassed Angular in search number at the beginning of 2018 and from then it steadily increases. Next, let’s take a look at npm statistics. As before, we will be looking at the last year’s data.

image7

Number of downloads over the last year corresponds with the interest data from Google trends.

Lastly, we should take a look at job opportunities. I used LinkedIn—one of the most popular job boards for tech—and compared the search results for the “React” and “Angular” keywords. The results may vary depending on where you live, but in the United States, LinkedIn found about 67,000 results for React and 32,000 results for Angular. It was a very basic search, and it may not reflect the worldwide trends. It is, however, something to consider while choosing the framework you want to develop in.

Conclusion

Angular is a full framework. It uses Typescript and HTML templates. Its MVC architecture resembles more backend projects, so if you have experience writing backends than it could be easier for you at the start. It has a steeper learning curve, but once you learn it, you have a complete package to create web applications.

React is a rendering library. It uses ES6 and JSX. It gives you the freedom to choose whatever other libraries you will need. It is more open-ended and doesn’t force you to any particular architecture. It would be a better pick if you already know some javascript.

React has outrun Angular in popularity but that doesn’t mean that Angular is gone. I think it comes to personal preferences, but whichever framework you choose, I’m here to answer any questions and help you out:)

Share

Antoni

Software Engineer

Did you enjoy the read?

If you have any questions, don’t hesitate to ask!

Did you enjoy the read?

If you have any questions, don’t hesitate to ask!