React vs Angular

Photo by Joel Filipe on Unsplash

As I’m in the midst of doing a fair few interviews, I try to spend a good part of my time learning about technologies I may be working with once I find the right job. The only thing I know for sure - unless I land a pure backend job - is that I will definitely work with JavaScript (JS from here onwards), which is the most commonly used programming language. If you look at stack overflow’s 2019 survey you can also see that Angular is the second most used JS framework by professional developers, so I decided to have a proper look at it and compare it to React, which I’ve already used for some projects and I’m pretty familiar with.

Overview

React

React is a JS lightweight library for UI development, released (2013) and managed by Facebook and its huge open-source community. It’s also one of the most popular projects on GitHub with 141k stars. React is used by companies such as Facebook, Twitter, Netflix, Airbnb, PayPal, The New York Times, Yahoo, Walmart, Uber, and Microsoft.

Angular

Angular is JS framework for web and mobile development, released by Google in 2016 (Angular 2.0), after rewriting of the previous version, AngularJS (or 1.0), in 2010. It is TypeScript-based. A lot less popular on GitHub, with ‘only’ 55.8k stars. It’s used in many Google applications, such as Adwords, Analytics and Google Cloud, but also by other huge companies, such as McDonald’s, AT&T, HBO, Apple, Forbes, Adobe and Nike.

Angular is less admired than React and faces a lot of skepticism, partially because of the unpopularity of Angular 1.0. Developers used to complain that the framework was an overly complicated one as it required a lot of time to be spent learning, but having Google has a parent definitely works in terms of credibility.

Library vs Framework

First of all, React and Angular are two different frontend tools. React is a lightweight library that only looks after the View of the MVC pattern, whereas Angular is a complete MVC framework.

Because of that Angular also comes with more functionality ready to use. For example, React doesn’t have a built-in router whereas Angular does (provided by @angular/router`); React doesn’t have dependency injection, but Angular does. Angular is quite opinionated and you have less flexibility; on the other hand you won’t have to decide which libraries to choose for certain core features.

Different Languages

React

React uses JS combined with JSX , a syntax extension to JS, which kind of looks like HTML but it’s not. It lets you have HTML-like text co-existing with JS, so write markup directly into your JS code. JSX code needs to be translated to JS before hitting the browser, and that is achieved thanks to Babel, a JS compiler.

const element = <h1>Hello, I am JSX!</h1>;

Angular

Angular can use JS or TypeScript, a superset of JS. TypeScript is more compact than vanilla JS, hence easier to navigate and typos are easily spotted; for those reasons refactoring also becomes easier.

Self-Sufficiency

React

React is a UI library, for that reason React apps need extra libraries to be used: some of the most popular are Redux and React Router. Things like data binding, component-based routing, project generation, form validation, and dependency injection also need extra libraries.

Angular

Angular is a complete framework for web development, and usually does not require additional libraries. All the functions already mentioned — data binding, component-based routing, project generation, form validation, and dependency injection — can be implemented with the tools that come with Angular straight out of the box.

Data Binding

React

In React all information can only go one way. If you update the state the child components will update accordingly; if you change the UI element though the state won’t change. Any piece of information can only go ‘down’. If you want the state to change from a component to its parents you will have to resource to either callbacks or state management libraries such as Redux. Unidirectional binding is predictable, which facilitates the debugging process.

React’s unidirectional data flow

Angular

Angular uses two-way binding. Changing the state will change the UI and vice versa; it’s a bidirectional process, and it’s automatic.

Angular’s bidirectional data flow
Angular’s bidirectional data flow

Bidirectional data binding means less complicated data flow and less code; at the same time there is a higher risk of accidentally not following the Single Source Of Truth principle if the data is comes from multiple sources. On top of that, bidirectional data-binding negatively affects the performance since Angular automatically develops a watcher for each binding.

Virtual vs Regular DOM

React

React uses a virtual Document Object Model (DOM) which is one of the main reasons why it’s is fast. Web apps can be very complex and editing the tree structure of the HTML DOM can be confusing and cause problems in terms of performance.

With a virtual DOM, which is basically a lightweight abstraction of the HTML DOM, any change in the virtual DOM can be compared to the actual DOM, which will be updated if and only where required. This enables easily implementing minor data changes in one element without updating the structure of the whole tree. This way, the entire page seems to be re-rendered every time, whereas only changes subcomponents are re-rendered.

Re-render child components on parent state change
Re-render child components on parent state change

Angular

This is not the case with Angular’s real DOM, which updates the entire tree even even when the changes have taken place in a single element. The real DOM is slower and can be less effective than the virtual DOM. To compensate for this problem Angular uses change detection to identify components that need to be re-rendered.

Architecture

React

There is no ‘right structure’ for a React app, however, you need to design the app structure at the beginning of each project following some basic principles (ask me about my final project at Flatiron 🙈) which can make it a little longer and difficult when starting. It’s all made of reusable components.

Also, React offers only View layer, while Model and Controller are added by using other libraries.

Angular

The structure of Angular is fixed and more complex: there are three layers — Model, Controller and View. An object — related to one model — is initialised by the Controller and displayed by the View. The application consists of different reusable components, each being written in different files. TypeScript to implement components, HTML to define the view, CSS to define the style.

Performance

React

React’s performance greatly improved with the introduction of the virtual DOM. Virtual DOM trees are lightweight and built on server, hence the load on browser is reduced. Also, since the data-binding process is unidirectional, bindings are not assigned watchers as in the case of Angular, which means that no additional workload is created.

Angular

Angular performs worse, especially in the case of complex and dynamic web apps. The reason for that is mainly the bidirectional data-binding. Each binding is assigned a watcher to track the changes. Because of this, the more bindings you have, the more watchers: the process becomes longer and more complex, thus affecting performance.

Universality

React

React is a framework which can be used both for web and mobile development. For mobile development, there is an additional framework — React Native, which allows you to create your own components and bind them to native code written in Objective-C, Java, or Swift.

React can be used to build both single-page and multiple-page web applications.

Angular

Angular works for both web and mobile development. For hybrid development a big part of it is done by Ionic. Angular has an additional mobile development framework, counterpart of React Native: NativeScript.

Angular can also be used for both single and multiple-page web apps.

Learning Curve

React

React seems to be a lot easier to learn than Angular, as long as you are already familiar with JS. Learning it will require you to become familiar with JSX (won’t take very long at all), a router library (React Router), and a state management library (Redux). You’ll also need to learn how to write components, how to manage internal state, and how to use props for configuration. There is no predefined project structure, so it takes quite some time to learn how to set up a project and its architecture. There are many best practices in React, and you will need to learn them to do things properly.

Angular

Angular is a framework, and learning all the concepts associated with it (TypeScript, directives, modules, decorators, components, services, dependency injection, pipes and templates) will take much more time than in the case of React. Angular is more complex to understand, there is a lot of syntax, and component management can be complex. Some features are embedded into the framework core, so the developer cannot avoid learning and using them.

Try different options before deciding

Wrapping up

React is a framework for UI development, which can become a full-fledged tool with the help of additional libraries. It may seems simpler at first but that simplicity may seem to disappear when you have to learn to work with several additional JS frameworks and tools.

Angular is a complete mobile and web development framework. It’s more complex and everyone seems to agree that it can take quite some time to master.

As a new developer I wouldn’t overthink too much what to pick at first. If you’re at the stage where you’re ready to pick up your first framework, maybe you could work with React, as its core features are a lot less than Angular’s. But at the end of the day it’s all just JS: learn to be a developer who’s agile and quick in picking up and learning new tools; the more you learn, the better you will be at learning, whatever the topic. A lot of that knowledge is transferable, and will make it easier to pick up another framework or library.

Who’s going to stop you?

Knowledge is power

Web developer, always learning

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

YodaOS: A modern OS for Node.js community

刷題日記(9)136. Single Number

7 Tips for Using React Query in Large Projects

Lego town

How to implement a stack in vanilla JavaScript and ES6

⛅️ AWS Products and Components ⛅️

AWS Lambda Node.js 使用记录

15 Tailwind CSS UI Kits, both free and paid

Alt text

Notes on JavaScript data types, Error handling, es6 block binding, function parameter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Fedemcmac

Fedemcmac

Web developer, always learning

More from Medium

React vs Angular

Angular Directive alternative in React

React VS Angular: The Definitive Comparison

React to Angular: Use Redux for State Management in Angular with TypeScript