Dec 27, 2019
React vs Angular
In case you were wondering
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.
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.
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.
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.
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?
