Angular vs React. An In-depth Comparison

Choosing a JavaScript framework for your project can be tricky. Before picking any, you need to answer questions: “Is this a valid framework per se?” and “Does it fit well with my project?”  In this article, we’ll compare Angular and React frameworks in a structured manner.

Let’s dive into Angular vs React comparison.

History

React was created by Jordan Walke, a software engineer at Facebook, who was inspired by XHP, an HTML component framework for PHP. It was first deployed on Facebook’s newsfeed in 2011 and later on Instagram.com in 2012. In May 2013, React was open-sourced at JSConf US.

In October 2014, Angular 2.0 was announced at the ng-Europe conference. The 2.0 version changes stirred up a heated debate among developers.  On April 30, 2015, the Angular developers announced that Angular 2 moved from Alpha version to Developer Preview. Angular 2 became Beta in December 2015. The first release was in May 2016, the final version was released on September 14, 2016.

What are the main differences between React and Angular?

DOM

Angular:Regular DOM

It will update the whole tree structure of HTML tags until it reaches the code to change.

ReactJs: Virtual DOM

Only those parts of the application in which the changes occurred will be updated.

State Management

Angular: RxJS powered state management for Angular applications.

@ngrx is a controlled state container designed to help write performant, consistent applications on top of Angular.

React: Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native) and are easily testable.

Dependency Injection

Angular: Dependency injection (DI) is an important application design pattern. Angular has its own DI framework, which is used in the Angular application’s design to increase their efficiency and modularity.

React: With React there is no concept of DI. Props are used to inject data into other components. The developer can easily pass data to components, but sometimes it isn’t clear where this data came from.

Server-Side Rendering

Angular: You have to change your application code a bit to support server-side rendering and the transition to the client app.

React: You have to install some extra packages like react-universal-component, NextJs and also chose the HTTP client library, universal-fetch, isomorphic-fetch, redux-fetch.

Syntax and Language

Angular: HTML, CSS and TypeScript.

ReactJS: CSS and JSX. JXS is the syntactic sugar that allows writing JavaScript that looks like HTML.

Language features

Angular: TypeScript is a language designed for large-scale JavaScript application development. TypeScript adds optional types to JavaScript that support tools for large-scale JavaScript applications for any browser, host and on any OS. TypeScript compiles to readable, standards-based JavaScript. TypeScript allows one to use features from the most recent ECMAScript versions and even some features that are not even in the scope of the standard. These features include:

• Type annotations and compile-time type checking
• Type inference
• Type erasure
• Interfaces
• Enumerated types
• Generics
• Namespaces
• Tuples
• Async/await

React: You can build React applications using TypeScript. But there is another library from Facebook — Flow which is a static type checker for JavaScript.

NPM packages

Angular: Angular has built-in packages for working with routes, styles, HTTPS, animations, SSR, Rx, etc.

React: React doesn’t contain built-in packages.

The user can choose various packages for routing, state management, animation, and so on. The different packages will help you solve specific tasks without additional functionality.

CLI

Angular: The Angular CLI enables building an application that already works, right out of the box. Then you can proceed to create classes, pipes, interfaces, modules, etc. It is very convenient and useful for the developer.

React: The React community has recently come up with a similar CLI tool: create-react-app.

Unlike Angular, it doesn’t allow creating components. You can only initialize the application. But at the same time, it is a very flexible tool containing an incredible amount of settings.

Performance

Angular: Angular 6 has good performance due to rendering with change detection and new template engine (Ivy).

React: React renders with Virtual DOM and outperforms Angular.

Hello World Example

Hello World Angular

To create the Hello World Angular application, you will reach through the following steps:

1. Include angularJS file in the HTML document. Use angular.min.js

!doctype html>
<html>
 <head>
 <script type="text/javascript" src="angular.min.js"></script>
 </head>
 <body>
 </body>
</html>

or the CDN.

<!doctype html>
<html>
 <head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
 </head>
 <body>
 </body>
</html>

2. Indicate the active portion of the Angular application. The directive ng-app tells the Angular which part of our document belongs to the angular application.
3. The directive ng-model and ng-bind are to bind the input text value to the specified HTML element. And just say hello to your first Angular application.

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

Hello World React

The smallest React code sample looks like this:

ReactDOM.render(
 <h1>Hello, world!</h1>,
 document.getElementById('root')
);

It displays a heading saying “Hello, world!” on the page. Open the CodePen online editor to try it on. Feel free to make some changes, and see how they affect the output.

To create first Hello World app, go to GitHub and click the “Download” button, then “Download Starter Kit”. Now you’ll get a copy of a ZIP file. Unzip and copy the directory contained in the download to a location where you’ll be able to find it.

To get started open ~/reactbook/react/build/react.js.

Note, React doesn’t require any directory structure. Move to a different directory or rename react.js however you want.

Create a simple page in your working directory ~/reactbook/01.01.hello.html.

In this file, you include the React library and its DOM add-on via script src tags. Also, you define where your application should be placed on the page using div id=”app”.

<!DOCTYPE html>
<html>
 <head>
 <title>Hello React</title>
 <meta charset="utf-8">
 </head>
 <body>
 <div id="app">
 <!-- my app renders here -->
 </div>
 <script src="react/build/react.js"></script>
 <script src="react/build/react-dom.js"></script>
 <script>
 // my app's code
 </script>
 </body>
</html>

Now  add the code that says “hello”—update 01.01.hello.html and replace // my app’s code with:

ReactDOM.render(
 React.DOM.h1(null, "Hello World!"),
 document.getElementById("app")
);

Load file in your browser and check your new app in action.

Size & performance. Frameworks benchmark

To check the performance, I had a look at this js-framework-benchmark. You can download and run it yourself, or have a look at the interactive result table. But you should know that  such a performance check should not be used to make decisions.

Duration in milliseconds ± standard deviation (Slowdown = Duration / Fastest)

Startup Metrics (lighthouse with mobile simulation)

Memory allocation in MBs ± standard deviation

Learning Curve

Angular: Angular is more difficult to learn from scratch than React. But it gives you the power to create complex applications in exchange for your effort.

CLI also allows one line to generate new modules and components, which eliminates the template code writing. Also, you have to master the Typescript and RxJS.

React: React has a bit friendlier learning curve. Simple applications can be created quickly and efficiently. To create a complex application, you have to understand how React and auxiliary libraries work.

Big names using React and Angular

Angular: Google, YouTube, Upwork, Freelancer, Udemy, PayPal, Nike, Telegram, Weather, iStockphoto, AWS, Crunchbase.

React: Facebook, Instagram, Netflix, New York Times, Yahoo, Khan Academy, Whatsapp, Codecademy, Dropbox, Airbnb, Asana, Atlassian, Intercom, Microsoft, Uber, Lyft

Popularity in 2018

According to the StackOverflow Developer Survey 2018, React is the library developers say they would like to work with.

Also, React has 3 times more stars than Angular on GitHub.

Downloads

According to the NPM downloads report, usage for React has grown 500 percent relative to all npm registry downloads. Mobile, desktop application, and web development are all using React.

While Angular is sustaining in popularity, it is not expected to grow. Downloads of Angular make up about 0.008 percent of all downloads from the npm registry, according to the company.

A frameworks comparison table

Conclusion. How do I choose?

I would like to recommend you not to use only Angular or React. Each framework has advantages for a particular project. And to choose one, you have to know all the requirements first.

Please let me know if I am missing any essential points or concepts which can make this article more comprehensive.