The last few years were incredibly intense for Front-End Developers. The transition from static server-side templating (where JavaScript’s role was usually cut down to jQuery DOM manipulation) to the Single Page Applications (based mainly on a Front-End routing and REST API) made a huge impact on the whole web industry.

Additionally, this intensity was the reason behind the almost daily introduction of new frameworks, which forced Front-End Developers to start learning never ending list of technologies/preprocessors /compilers popular at this specific moment, however not always so practical nowadays, like Grunt, Bower, RequireJS, etc.

After the very unpredictable years of the rise and fall of JavaScript SPA frameworks (as well as libraries), now we live in times when React, Angular, and Vue are considered superior. Thanks to that the situation in web development is much more stable, and there is a smaller chance that these technologies will be as quickly forgotten as their predecessors.

Since I’m not very experienced with working with Vue, I decided to ditch it in this article and focus on what I know best – React and Angular. With that in mind, how about making a side-to-side comparison?

The beginnings of Angular and React

 

The very first version of Angular was created by Google in 2010. They gave us the MV* (Model, View, Whatever) architectural pattern, dependency injection, and the two-way data binding as the core functionalities of a framework. With the easy usage, fast implementation of directives, and well-documented code, it quickly gained popularity among web developers. Back then these features meant quite a lot, so Angular gained a lot of supporters. And, since it was also well advertised, there were plenty of free courses for every JavaScript development novice that wanted to become a pro.

However, because AngularJS was not a perfect tool, plenty of developers started to complain while digging deeper into this framework. One of the biggest disadvantages of AngularJS was its performance. The two-way data binding, the same concept that sounded so awesome when Angular was launched, at some level of app complexity could be overkill. In 2013 the issues of scalability, performance, and optimization had been resolved by Facebook with the introduction of React. Instead of two-way data binding, React used different programming concept and switched to the unidirectional data flow. A component-based architecture, where we are passing data from the highest component to the lower ones, let us build applications brick by brick and feature by feature. React syntax was clean and easy to both learn and understand, so developers quickly started changing sides, choosing React over Google’s brainchild.  Additionally, thanks to JSX support React taught us one more interesting thing (which at the same time is rather peculiar) – typing HTML inside JavaScript.

In response to Facebook’s moves, Google announced a new version of Angular, which was officially released by the end of 2016. It’s worth mentioning that from here on, every new version of Angular is just called “Angular”, while the previous one is called “AngularJS”. A lot of older concepts remained (dependency injection for example), but Angular gained new abilities. Few of them were borrowed directly from React (for instance component-based structure or one-way data binding), while some are completely new. One of the biggest steps forward was moving from regular JavaScript to a TypeScript – a language developed by Microsoft (which is eventually compiled to JavaScript but introduces a lot of features that are not available in JavaScript). Another new feature added to an Angular was RxJS – a library for handling asynchronous streams of data. Because of these new features, Angular also set up a really high entry threshold for every new developer. To understand how the framework works, you have to not only learn Angular syntax, but also switch to TypeScript, initialize project using Webpack, and have at least a basic understanding of Reactive Programming. To be fair, there is an implementation of Angular that doesn’t have TypeScript, but it’s strongly recommended by Google to use it in your projects.

One more thing. Before we go any further with the comparison, let’s just have a quick look at how React and Angular popularity grew within past few years.

Main differences between Angular and React

 

The first and most important thing to remember is the fact that React is not a framework. It’s “just” a library that deals mainly with View layer of an MVC architecture and, without external packages, can’t provide for example routing. Fortunately, React community is huge, and people can browse a variety of ready-to-use and often updated components that will help them build their apps faster.  On the other hand, Angular is a framework and comes with a lot of built-in modules like an angular router, angular HTTP module, or angular forms. With that, you don’t actually need anything more to start developing a fully functional app. This also means that React may suit you better if you’re working on smaller projects that don’t require a lot of options. It’s also great if you like adding a lot of custom components and want to have more control over your code structure. Otherwise – choose Angular. If you want to know more about differences between a framework and a library, check out our article Framework vs. Library – differences in web development.

How Angular and React work with DOM

 

Another key difference is that React handles HTML using Virtual DOM – a virtual representation of Document Object Model (DOM defines logical structure of documents and is represented as a tree of objects). Virtual DOM is just a lightweight copy of a regular DOM that doesn’t have the ability to directly change what’s on the screen. This way React updates real HTML elements only if it is absolutely necessary. On the other hand, to make its elements reusable and to encapsulate views Angular is using web components.Even when we are still operating on regular HTML files, we can include custom HTML tags and whole application will still work fine across all modern browsers. To achieve this, Angular components are based on a Shadow DOM concept where we can hide whole DOM logic and styling and make them reachable only within a component.

In both cases, there are additional features that are strongly recommended by their creators, but not necessary to use or understand during the development process. I’ll describe them in next paragraphs.

To handle React’s JavaScript approach and to feel more comfortable with DOM elements that are based on Virtual DOM, React is using JSX – a preprocessor that makes your code more elegant and readable. JSX gives the natural feeling of DOM structure since what you are doing is writing HTML in JavaScript (what at first may seem a bit weird). The only problem with this approach is that you have to remember about the special syntax for some specific HTML-like attributes if you want to avoid naming conflicts. For example, “Class”, a reserved word in JS, is now “className”.

On the other hand, Angular by default uses TypeScript. It hugely extends JavaScript language by making it more similar to strongly typed programming languages (like Java) and gives it such “superpowers” and new features as enums, decorators, or interfaces. However, this also means that learning curve for every new Angular developer is much higher than for the React one. To start a new project, you have to understand what is a part of TypeScript and where Angular syntax comes in. Oh, and don’t forget about Reactive Extensions supported by Angular if you want to handle asynchronous requests (which are a topic for a whole new article).

 

Below, you can see how Angular and React look in really basic apps that have the same functionalities. All they do is allow you to click a button, which fires a fake request for a movie directors list. Nothing special, but gives you a basic overview and shows how to code in a React or Angular way. (I’m, of course, not using either RxJS nor Redux, so a real app would look much different).

 

Similarities between Angular and React

 

Ok, so since we now know what are the main differences between React an Angular, now it’s time to take a look at their similarities.

Component-based architecture

 

Say goodbye to Angular’s old $scope and start thinking in a more modular way. Angular’s 1.5 version has already attempted to take this approach, but since it was still based on a ‘scope’, it led users to performance issues that dealt with a large amount of data. To avoid these problems, Angular and React switched to unidirectional data flow and passing data from the top-level component (called container or ‘smart component’) down to the lower components (called ‘dumb components’ or ‘presentational components’).

However, changing core concept of passing data within entire app led to another problem – how to properly manage application state? So far the most popular solution in this instance is Redux. Adding one global store and dispatching actions to it “helps to write applications that behave consistently and run in different environments”. That’s why you can use Redux both in React and Angular. However, you can also skip Redux implementation and try to solve problems in a reactive way mentioned before – via Reactive Extensions and RxJS.

Every component has its own lifecycle methods fired when some particular action occurs. For example, you can use “ngOnInit” method in Angular, while in React we have “componentDidMount”,. Both of them will execute code inside methods after the component is created. Similarly, before you delete any component, you may want to run some function. To do so, you would use “ngOnDestroy” method in Angular or “componentWillUnmount” in React.

Community and libraries

 

Theoretically, even if Angular provides you with everything necessary to build an application, you’ll quickly find out that it ‘d be good to implement some third party libraries created by the community. Here lies the true value of stars and numbers of unresolved issues on GitHub. Without the large community, even a great library or framework can be hard to implement. Fortunately, there are a lot of React and Angular supporters creating great tools that will resolve your problems during the development phase. Need help with something specific? On GitHub, you’ll find catalogs of Components & Libraries for both Angular and React.

Since Angular and React are based on similar concepts, you can find the libraries created for both of them, such as UI-Router, the great external state-based routing library. There are also implementations of the most popular UI frameworks and concepts – Bootstrap or Material Design (note: the version of Material Design for Angular still might be missing some components), so it is really easy to adapt the same layout in both ways. You are even able to use React components inside Angular!:)

Since the last few years, JavaScript language evolved and became noticeable in both web and mobile web apps. Not a long time ago the only solution of combining desktops and mobiles was to create a hybrid app. Nowadays, thanks to the knowledge of React or Angular (or both) developers can go even step further and manage native apps that are written in JavaScript and later compiled to their native languages. Angular’s main claim is “One framework. Mobile & desktop.”, what explains a lot. Angular comes with Ionic 2 or NativeScript, React on the other hand can be used via React Native.

Performance

 

Like I’ve said before, SPA frameworks came a long way when it comes to performance. A lot of lessons were learned, a lot of things have changed. So far it’s really hard to compare React and Angular regarding performance because they both are extremely fast and effective. However, the release of the next React may change a lot. It’s going to be rewritten and, once version 16.0 is launched, React Fiber might be the ruler performance thanks to its incremental rendering.

Summary

 

React and Angular were made to solve similar issues but in a quite different way. If you like to have a full-fledged framework (plus much more, that you might not even use) right from the beginning of app development process – choose Angular. If you want to be more flexible in terms of what you use and how – choose React. With React you can start developing right after minimal configuration, so it might be a better choice for smaller projects.

It’s hard to say “Angular is better” or “React rules, forget Angular”. Those are great tools for creating Single Page Applications, so try both of them and stick to what suits you best.

 

To make memorizing all this knowledge about Angular and React a bit easier we’ve prepared an infographic – enjoy!