Angular vs React. An In-depth Comparison

angular-vs-react

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>
 
  1. 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.
  2. 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)

image2

Startup Metrics (lighthouse with mobile simulation)

image1

Memory allocation in MBs ± standard deviation

image6

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.

screenshot_79

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

Angular React
Type A Framework Library to build UI  
Why Choose If you want to use TypeScript If you want to go for “everything-is-JavaScript” approach  
Founders Powered by Google Maintained by Facebook
Initial Release September 2016 March 2013
Application Types If you want to develop Native apps, hybrid apps, and web apps If you want to develop SPA and mobile apps
Ideal for If you want to focus on large-scale, feature-rich applications Suitable for modern web development and native-rendered apps for iOS and Android
Learning Curve A steep learning curve A little bit easier than Angular
Developer-friendly If you want to use the structure-based framework If you want to have flexibility in the development environment
Model   Based on MVC (Model-View-Controller) architecture Based on Virtual DOM (Document Object Model)
Written in TypeScript JavaScript
Data binding Two-way One-way
Rendering Client/Server Side Client/Server Side
Community Support A large community of developers and supporters Facebook developers community
Language Preference Recommends the use of TypeScript Recommends the use of JSX – JavaScript XML
Popularity Widely popular among developers More than 27,000 stars added over the year
Companies Using Used by Google, Forbes, Wix, and weather.com Used by Facebook, Uber, Netflix, Twitter, Reddit, Paypal, Walmart, and others

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.

Please, estimate my article. I did my best!
1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 4.50 out of 5)
Loading…
Share
Share