Angular vs React: A Component -Based Battle

Piero Borrelli
Feb 2 · 7 min read

In the modern world of web development we can see how, during the years, new patterns and trends in technologies have emerged. The increasing use of the Internet has made web applications more complex than ever. And so it did with developer’s code, which increased in size, maintenance issues, and testing difficulties.

Frameworks started to arise as an answer to this complexity problem, and developers started using them end enjoying them. And today we can identify a new pattern when it comes to using such tools: the usage of web components.

“A web component has become the most basic element of a modern web application UI.”

In particular, we can see the component-based approach being applied in two of the most popular JavaScript frameworks out there: Angular and React. These two frameworks try to get the best possible advantages out of them, and in particular, we can see this approach producing the following benefits.

  • Reuse-based: once you define a component, you can reuse it whenever you want into your application, reducing development time and repetition.
  • Easier testing: meaning that, if you have a problem with a component, you will only need to fix it in one place and then the other instances of it will follow.
  • Better maintenance: similar to above, one place to make modifications and the possibility to reuse bits of code will make your web app easier to maintain.
  • Ability to use third-party working components: start to use quality, tested components that have been developed by others into your application straight away.

This article is an illustration of how two of the most modern JavaScript frameworks out there implement a component-based approach and the differences between them. Let’s begin:

#1 Component Structure

The first difference we are going to analyze is the most basic one: how are these components structured in Angular and React?

#1.2 Angular

“Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.“ — Angular official docs

The first task of an Angular component is to display a page and its specific data, all of this together with support for directives, pipes and string interpolation. While the second is to manage the data-binding between the view and the model. Once we run the ng generate component command to create a new Angular component, we can see the following example structure appear

With this picture, we can identify the following parts:

  • An HTML template view file
  • A TypeScript file for the logic of the component
  • A CSS file for styling the view
  • An occasional .spec.ts file that is used for testing

So every Angular component will usually have its own view, describing how it will look. A TypeScript file to hold the logic, and a CSS file to make the view cooler.

By looking at our .ts file, we can go deeper into discovering the inner working of a component

As you can see, a component is just a simple JavaScript class with something called a decorator, in our case @Component. The selector part is how we will call the component. TemplateUrl specifies where the html view file is located while styleUrls indicates the styling file position in our project.

#1.3 React

Also for React, a component is the most basic element that will compose our UI. In this case, however, we don’t have a separation of files as seen in Angular, instead, we will use an extension of JavaScript called JSX( check the section below for more details about it ). And so we will have all the graphic details and the logic of our component in one place. The styling of it can be either defined inside the same component file or imported from an external one.

Also notice how, in React, we have different options to choose from when creating a new component: using a Class or a Stateless Functional Component.

The first one, similarly to what we saw for Angular, is simply a JavaScript class that extends React.component like this:

class myComponent extends React.Component {

render() {

return <h1>I'm a component.</h1>;

}

}

While the second one, even if it has quite a scary name is simply a function that returns a React component.

function sayHello(props) {

return <h1>Hello, {props.name}</h1>;

}

Using a Stateless Functional Component reduces the overhead of working with classes, provides us with cleaner source code but, most of all doesn’t allow us to work with the state of a component.

#2 JSX vs HTML

As mentioned earlier, a huge difference between Angular and React components is the way in which you define their look. For Angular, you will have a classic HTML file + framework-specific directives such as ng-if or ng-repeat. While, in React, you will have both your logic and your view definition inside the component definition.

The result of this operation is achieved using JSX, an extension of the JavaScript language that allows you to define your code like this:

// a mixture of HTML and JavaScript

const displayStudents = (

<ul>

{students.map(name => <li>{name}</li> )}

</ul>

);

Advantages of the latter approach is that you have everything defined in one place and, once you know HTML and JavaScript, you won’t have to find yourself dealing with framework specifics view directives such as you do in Angular.

#3 JavaScript vs TypeScript

React uses JavaScript while, if you want to start using Angular, you will have to get some traction into using TypeScript. In the first case, many developers already know Javascript so this can be considered as a pro together with the freedom you have when writing code using it. TypeScript is a superset of JavaScript, which allows you to make use of its support for static types, classes and interfaces (some of these features are now part of ES6 latest standards).

Advantages of using JavaScript include:

  • A huge community of developers behind it that make it a popular language
  • Supports native browser
  • Extreme flexibility

let decimal = 10; // variable definition

// function definition

function add(a, b) {

return a + b;

}

Advantages of using TypeScript include:

  • Static typing
  • A better choice for bigger projects
  • A better development experience and testing is made easier

let decimal : number = 10; // typed variable definition

// typed function definition

function add(a : number, b : number) {

return a + b;

}

#4 Regular DOM vs Virtual DOM

While Angular components work by interacting with the regular DOM we are used to working with, React decided to take a radical change on this side. In fact, when working with this framework you will be using what is referred to as the: virtual DOM. A virtual DOM will look at the changes in the previous HTML compared to the current one, and it will make sure to update only the necessary part of it.

This is what makes React so fast and what can give you big advantages when working with hundreds of data requests.

#5 Data Binding

Another big difference that you will encounter between Angular and React when creating components is how they manage data binding. In Angular, we have what is defined as two-way data binding. Meaning that every change to a UI element is reflected into the model, and every modification to the model itself is reflected inside our UI.

While, when working in React we have only one-way data-binding. This will imply that every change made to the state is reflected into the view. However, changing the UI doesn’t update the state.

#6 State Management

State management is extremely important to both frameworks. Angular comes with data-binding bundled in as mentioned above, while React offers different approaches for tackling this task. Each component can have its own state, with them you can create stateful components for keeping memory of the state of a part of the application.

Third-party libraries also became popular when it comes to the state management issue. Redux is one of them. The main idea behind this library is to hold the entire state of the application into a single object, which can be mutated by pure functions implemented separately from the components called reducers.

Redux can be used with both Angular and React and it might become especially useful for developers when their products become large enough.

Conclusion

And that was it, hope this article gave you the tools to understand the importance and the advantages of component-based development and how Angular and React implement them.

Piero Borrelli

Written by

Trying to bring the world of coding and the emotions behind it together. Still don’t know how.

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

How to Secure Your API With JSON Web Tokens

More from JavaScript in Plain English

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade