Angular and React

Disclosure: is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

Angular vs React - Detailed Comparison

Posted in Angular, React

We’re living the years of the Javascript, as the language swiftly climbed to the first rank on Github, and is continuously gaining momentum across different applications, not just front-end application development. Nowadays, Javascript is used in the frontend, the backend, building mobile applications and even for building AI applications. The chrome V8 engine is pushing its performance on the server-side as it is doing on the browser.

One hassle that can’t be ignored is the fact that there are too many Javascript frameworks and libraries to wrap your head around, which turns straight web development to rocket science and string theory. Frameworks and libraries are originally intended to accelerate the development process by leveraging the power of the tools created by other professional developers and their solutions to common problems. So to use these tools in a much more efficient way, we have to understand how they work and what they have to offer, to choose only the ones that best fit our functional and non-functional software requirements.

Today, we’ll take a deep dive comparing the 2 most popular Javascript “frameworks,” Angular and React, and you’ll see later why we have the word frameworks between two quotes.

Single-Page Application Vs. Multi-Page Application:

Application development is shifting from the desktop to the browser since it provides a better UX and it’s shareable across many devices. There are two main paradigms or patterns to choose from when developing a web-based application.

These two patterns are Single-page applications or SPA for short, and Multi-page applications (MPA). Now, this doesn’t mean that you can’t have both on the same website, in fact, in most cases you’d want to mix your pages between both to achieve the best UX, depending on the situation.

A SPA is one that doesn’t require reloading which makes for a smoother and faster performance since all the components are shipped to the client-side. Gmail is an excellent example of a SPA. The SPA requests the application shell or the Markup, and the data independently, which makes development easier.

It’s also easy to debug using Chrome. However, SEO is a little bit complex when it comes to the SPA, as it might be required to perform server-side rendering or use some rendering service to avoid confusing the crawler. Also, if the user has his JS turned off, you’d also need to render the pages on the server-side, which would be totally inefficient and mess up the whole SPA idea.

MPA is the traditional pages we’re used to seeing, where most actions requests either data through ajax, or even entire page reloads, it’s much more complex, the front-end and the back-end are usually tightly coupled, however, they are more SEO efficient.

Laying down the basics:

Now that we understand what SPA and MPA are, we can start to wrap our heads around what React and Angular are, and choose the one that best fits for our application.

Angular started out as an MV* framework, i.e. it could be used as MVC or an MVVM architecture. It’s quite flexible, and many people regard this flexibility as a degree of difficulty since there’s not one specific way of doing things. It was created by Google and is used by many companies such as Autodesk, Apple, Microsoft. Angular focuses on building rich SPA, and when it was first released back around 2010, it shocked the world with many new concepts that it introduced.

React on the other hand is a Javascript library for building rich user interfaces.

Although React feels like a framework for many developers for the way it does things, it’s not a framework. React is created and maintained by Facebook, and they use it a lot in their applications. React serves as the view in an MVC architecture, but beyond that, it has introduced a new way of doing things with its component-based architecture.

The different Angular releases:

The angular history is quite confusing, first of all, there are only 5 major releases with Angular 6 that was introduced recently on May 3rd, 2018.

There’s Angular 1.x which is not compatible with any of the later versions since Angular 2 was a complete rewrite of the framework. Components and directives replaced controllers and scope to keep up with the uptake that React caused. Also, starting with Angular 2, the framework started to use Typescript, which is a superset of Javascript that provides static typing and a few compelling features that are not present in the regular Javascript.

It’s worth mentioning, in Angular 1.5+ components were introduced to the framework as well. Angular 3 was skipped due to certain compatibility issues. Angular 4 came afterward, followed by Angular 5 which introduced the angular service workers,  and then came Angular 6. It’s also not recommended to make jumps from Angular 2 to Angular 6, though it’s possible. We’ll stick with Angular 6.


Angular at its core extends the browser’s functionality, by extending and intercepting the event loop and enhancing the HTML parsing done by the processor. First of all, let’s look at a simple Angular application, for this demonstration I’ll be using the Angular 6.

To get started with Angular, we’ll install the Angular command line through npm. For this, we’ll run

npm install -g @angular/cli

Next, we’ll create a new application using

ng new [application name]

Angular uses a component-based architecture, basically, each component is made of 4 files, a typescript file that defines and implements the component, an HTML file that presents the view, a CSS file for style and a spec file for testing. Before we make any changes to the application, run the command ng serve and you’ll see the default created application being run on port 4200.

Now, inside of src/app , clear the contents of app.component.html. And let’s create our own new component.

The Angular CLI provides a powerful generator, to create a component we’ll use ng g component componentes/demo. Now our application structure will look like this:

Inside of demo.component.ts, we’ll start implementing our simple two-way binding application. We’ll define a simple message that should start with a default message and later on be changed and displayed on the view. The @component defines the metadata of the component. The selector is the custom HTML name we’ll use to include this component. We’ll add a message variable inside of the demo component class and define its type as a string. Inside of the ngOnInit method, we’ll give it a default value. ngOnInit is a life cycle method that executes before the component is mounted, we can also use the constructor for this purpose, they will both give the same result for this application.

Next, we’ll create the HTML, we’ll use an H1 tag to display the current value of the message variable. The double braces are used to interpolate the value of the message. We’ll also create a form without an action, which consists of a label and an input field of type text. To create a two-way binding, we need to use ngModel which will allow us to change the value of the message variable and then the name property will display the value of the variable inside of the input field. So before we type anything, it should have the default value “Hello” written into it.

To finalize this mini-app, we need to include the app-demo component inside of the app.component.html which is the main component of our application, and actually, include the FormsModule inside of app.module.ts to be able to use ngModel.

App Module

App Module - 2

Now, when we save and head back to the browser, we’ll find our application running with two-way binding.

Angular, in fact, offer 3 methods of binding, not just one. Each one is demonstrated in one line of this snippet.

The first is the one we talked about earlier, the two-way data binding that reflects any change in the data immediately, if the user changes the data then the application sees it right away and vice-versa.

The second method is the one-way data-binding, in which only the application is able to change the data, and it’s reflected immediately as well.

The last method is the one-time data binding, in which the data attribute is only watched changing one time throughout its life cycle and only that changed is seen, if it changes otherwise we won’t pick it up on the application.

Angular will introduce you to many other concepts and there’s actually a lot you can do with Angular, for instance, we’ve mentioned that Angular has been extended to be more component-driven like React is, you can create custom filters in Angular, use form-validations and perform unit testing, along with many other cool things that you can check here on the official documentation. Angular also introduced Dependency Injection which was groundbreaking at the time it was released and changed the way many things are done in development, as Dependency Injection is a useful pattern for increasing code-reusability and enhancing the development process.


React is a twistable, flexible interface-making library created and maintained by Facebook. It’s one of their open source projects that has been adopted by many other companies like Instagram, Yahoo, Wordpress, Walmart, and the list goes on.

React brings a component-based architecture to the game, which revolutionized web development and influenced other frameworks like Angular to follow its lead. Component-based architecture is more maintainable and even easier to maintain than other architectures in web development. It also speeds up the development process by creating reusable components that let the developer focus on each and every detail on the page.

This is how React sees your application’s page and how you should think in React.

application’s page

That being said, you can configure React as the V in your MV* architecture. Let’s look at a simple Hello World program to see the component-based architecture in Action.

I’ve created a simple component called Hello, with default function render that simply returns the header tag “Hello World”.

Hello World

In the Index.js, we merely call that component with the ReactDOM.render() method and pass in the component and where it should insert it, in this case, it will be inserted in the root div in the index.html page.


When we hit npm start, the component is rendered and the magic takes place.

Hello World

However, it’s not the component-based architecture that made React all this famous; React’s virtual DOM is one of the best features it has to offer. Simply said, the Document Object Model is the representation of the web page to the browser, React possess its own virtual DOM that manipulates the actual DOM of the browser, but since it’s much faster than the browser’s DOM, it boosts up the performance a lot. React’s Virtual DOM is able to create more than 200,000 nodes per second, which is more than a wide majority of websites would need. Not only that, but it recreates the DOM for every change, and with The Diffing algorithm it uses, it’s able to cut down the difference calculation from a complexity of O(n3) to O(n). The diffing algorithm is a standalone rich subject that unveils some of React’s magic, here’s the full documentation from React’s official website.

One of React’s beautiful features is the introduction of JSX, the Javascript syntax extension. It’s illustrated in this weird and funny snippet.

Javascript syntax extension

While this is not HTML, it’s not Javascript either. The beauty of JSX is that it helps the developer visualize the content of the page, and it’s much easier to write than traditional Javascript, note that you can ignore the JSX and write traditional JS and React would work just fine, but here’s a little comparison of how the code would look like with and without JSX.

comparison of how the code

With JSX.

Without JSX

Without JSX.

React is also a very rich library, we’ve yet to mention the props and events and forms and the whole bunch of amazing features that React brings along and that you can check in depth on their official documentation page.

Angular vs React: Head on Comparison

Well, certainly Angular and React are quite cool, and getting to know them makes you want to use them both ( although you can do that, we’re here about choosing one). Let’s put them face to face for more comparison points that might be of interest to some developers.

Technology Angular React
Technology type Component-Based Framework using Typescript User Interface Library with a component-based architecture using Javascript
Data binding 2-way data binding 1-way data binding
Size Quite large and since it needs to be shipped to the client side, it increases the initial load time Quite small in size, especially when compared with Angular
Learning Curve Quite steep, given the number of features and options you have in Angular It’s easy to pick up and learn
Performance Comparable to React, Angular 2 and 4 are some Faster than Angular thanks to the Virtual DOM
Simplicity Quite complex Fairly simple but takes some time to set up a project and configure everything
Scalability Easy to scale thanks to the power CLI and generation tools, It’s also used by many large companies Fairly easy to scale and is quite testable which facilitates the scaling procedure

Here’s an important point to mention, in case you’re not considering migrating from your already set architecture, and you just want to spice up your website. If you’re running something like a full Ruby on Rails MVC server, you’d still have both options to consider, Angular and React.

There are gems for Rails Angular, but they are outdated and not quite well maintained, the reason, of course, is that Angular was not really made to be run and developed for the server-side, although there are methods and techniques for using Angular on the server-side, we won’t get into those here.

On the other hand, It’s fairly easy to integrate React with your backend technology, even a strict MVC one, React works well for both, server-side rendering and client-side rendering. For rails, the react-rails gem is well maintained and gets updated regularly, so if you want to keep the entire backend functionalities and just tweak the views, React is definitely your guy. Good news, however, is that most of the backend frameworks nowadays, including Rails, can be run and created in an API mode, and easier than before, with the aid of many packages, gems or libraries. This indeed facilitates building whichever architecture you want for your website, and you’re most probably familiar with the MEAN and MERN stacks since they’re quite popular today.


Web development would be much much easier if we had winners, but we sadly don’t. It really depends on what you want to do and how you want to do it. If simplicity and size are what matters most to you then you should go for React, however, if you don’t care about the learning curve and would like to choose the best scalable option with the highest number of features then Angular is your guy. Both are very well documented and the communities for both are quite mature and helpful and you’d most probably find help whenever you needed.

Just always remember to use these tools to help your development process and not make it more complicated, at the end of the day, these are not magical tools from the outside world, they are tools that you could reinvent  (theoretically at least, it would take you forever to do it practically, and might not be as neat) so try to make the best use out of these tools and also try to be thorough learning and using a certain tool instead of jamming your application with tools that need not be there.

Whether you choose Angular or React, has the best programming community-recommended tutorials for you. 

People are also reading:

Youssef Nader

Youssef Nader

Youssef Nader, Computer Engineering Student at Cairo University. Technology technical writer and blogger, full-stack Web developer, specializes in rails and node. Founder of Yadawy, an E-commerce platform under construction. AI enthusiast, loves reading, traveling and martial arts. View all posts by the Author

Leave a comment

Your email will not be published
Sujit Kumar Singh
Sujit Kumar Singh

Corrections required in this article -
1. Size -> Framework doesn't gets shipped, its the optimized code which gets shipped. Latest versions of Angular and React app would have similar bundle size.

2. Learning -> Include the real stuffs like route, forms, stores, etc and them we will see whose learning curve is higher. Infact I find initial learning curve of React much higher because of multiple plugins options and confusion which one to choose.

3. Performace -> Apps in both would perform equally. But if I talk about specific areas, there may be some ups/downs. Eg- Angular beats React on high number of DOM changes using loop. Also, interim DOM is much memory-efficient than VDOM.

4. Simplicity -> In a large application, understanding Angular's code is much simpler than React because Angular projects are consistent and React projects are inconsistent in terms of project architecture. Not to mention the mess created by React's store :D.

Muhammad Waqar
Muhammad Waqar

thanks so much for the time you invested in doing this.
This was a great article, thanks for doing the tie-backs to javascript too.
Definition according to the typescript official website:
“TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.”
Typescript is starting with the same syntax as javascript. TypeScript is a superset of JavaScript, providing language features that build on those that are provided by the JavaScript specification. In the sections that follow, I demonstrate the most useful TypeScript features for Angular development, many of which I have used in the examples on this website.

Joel Joseph
Joel Joseph

Angular : Size- Quite large and since it needs to be shipped to the client side, it increases the initial load time
React : Quite small in size, especially when compared with Angular.

I had a good laugh when i saw this one , i am sure you are just comparing the size of the framework and react.js library. if you write the an application in angular and react , Angular has smaller bundle size of all.

Also Faster than Angular thanks to the Virtual DOM , this was a miss understanding spread by react team themselves and later they removed this sentence from the home page. its just that virtual DOM is better at checking differences . Please check the performance benchmark :


First off react is not fast and never has been. It is actually the slowest modern spa framework. Also the vdom is not fast it is also slow. You are coding in a non standards compliant way. The code will be a spaghetti dinner. There are more but revise your article by removing your bias. React is a script kiddie junk framework. Microsoft decided to use it in their front ends and they are unbearable on low cpu machines. I dare you to throttle your cpu and use Facebook. You can’t....


Angular is actually much easier to learn if you have a c# or java background.
The DI system, typescript, rxjs, reactive forms and material design library are all plus features.
Also with react you have N number of libraries to worry about when you try
to write a large enough application. I think once the IVY render engine is complete then the bundle size and performance should be on par if not better then React, that is the goal.

React has a lot going for it , it has advanced this field significantly and the main reason
the angular team had to switch to a new framework to compete; and that is what they have
done provided a real alternative..

Egor Pavlikhin
Egor Pavlikhin

Saying that React has a smaller learning curve is ridiculous. To implement the same functionality that you would learn in Angular you need to learn several very different libraries with different concepts. Yes, bare React is easier, but that's only because there is nothing in it to achieve a fully feature app. A 5 hours crash course in Angular is usually enough to cover most of what a typical app needs. For React the same course takes about a week.


Thanks your this beautiful post.
One suggestion, in comparison table in performance row it should be SAME instead of SOME. Thanks.


Thanks a lot, it is a great article! . Regards and blessing from Lima Peru


You have the same paragraph twice. 'Angular will introduce you to many other concepts'

Vijay Singh
Vijay Singh 522 Points

Hi Jools, Fixed the issue. Please have a look.


You end the section about Angular versions with "We’ll stick with AngularJS". But AngularJS is synonym with Angular 1.x. That makes it very confusing because then you proceed with Angular 6!


The author doesn't know what is the difference between AngularJS and Angular, I wonder how he can write this b..ull of s..hit article!

Seongguk Han
Seongguk Han 10 Points

Thanks for posting!!! :D!
I realized that first, i have to decide what i want to make.