Comments

React vs. Angular: The Complete Comparison

Do you want to learn about and discover the differences between React vs. Angular? Then keep on reading! I am going to explain to you the similarities, differences, pros, and cons of both React and Angular in this article. You don’t need to be an expert programmer to understand this post but it is encouraged that you are familiar with JavaScript.

*Disclaimer: I have worked extensively with both React and Angular. I used Angular at my job at IBM and React & React Native at my current job. I personally prefer React but will do my best not to taint the article with bias.

History of React vs. Angular

Angular is a JavaScript framework written in TypeScript. It was developed and is maintained by Google, and is described as a “Superheroic JavaScript MVWFramework” on Angular’s webpage. Angular (version 2 and above), originally released in September 2016, is a complete rewrite of AngularJS (released in October 2010). The newest major release is version 6 at the time of writing. Google AdWords, one of the most important projects at Google, uses Angular – so Angular is likely to be around for a while.

React is a JavaScript library developed and maintained by Facebook. It was released in March 2013 and is described as “a JavaScript library for building user interfaces”. React is used far more at Facebook than Angular is at Google if it’s any indication as to how big Facebook is betting on this technology. By this metric, you can also conclude that React will be around for a very long time.

Both Frameworks are available under the MIT license.

Architecture of React vs. Angular

Framework vs. Library

Angular and React have many similarities and many differences. One of them is that Angular is a full-fledged MVC framework and React is merely a JavaScript Library (just the view). Let me elaborate. Angular is considered a framework because it offers strong opinions as to how your application should be structured. It also has much more functionality “out-of-the-box”. You don’t need to decide which routing libraries to use or other such considerations – you can just start coding. However, a drawback is that you have less flexibility – you must use what Angular provides.

Angular provides the following “out of the box”:

  • Templates, based on an extended version of HTML
  • XSS protection
  • Dependency injection
  • Ajax requests by @angular/HTTP
  • Routing, provided by @angular/router
  • Component CSS encapsulation
  • Utilities for unit-testing components.
  • @angular/forms for building forms

React, on the other hand, gives you much more freedom. It only provides the “view” in MVC – you need to solve the M and C on your own. Due to this, you can choose any of your own libraries as you see fit. You will end up using many independent, fast-moving libraries. Because of this, you will need to take care of the corresponding updates and migrations by yourself. In addition, each React project is different and requires a decision requiring its folder hierarchy and architecture. Things can go wrong much more easily due to this.

React provides the following “out of the box”:

  • Instead of classic templates, it has JSX, an XML-like language built on top of JavaScript
  • XSS protection
  • No dependency injection
  • Fetch for Ajax requests
  • Utilities for unit-testing components

Some popular libraries to add functionality are:

  • React-router for routing
  • Redux or MobX for state management
  • Enzyme for additional testing utilities

Regular DOM vs. Virtual Dom

React’s use of a virtual DOM is one of its features that makes it so blazingly fast. You’ve probably heard of it. It was React’s “killer feature” when it was first released. Let me give you an example scenario:

Let’s say that you want to update a user’s age within a block of HTML tags. A virtual DOM only looks at the differences between the previous and current HTML and changes the part that is required to be updated. Git employs a similar method, which distinguishes the changes in a file.

Conversely, Angular opted to use a regular DOM. This will update the entire tree structure of HTML tags until it reaches the user’s age.

So why does this matter? The example above is trivial and probably won’t make any difference in a real app. However, if we’re dealing with hundreds of data requests on the same page (and the HTML block is replaced for every page request) it drastically affects the performance, in addition to the user’s experience.

Templates – JSX or HTML

React decided to combine UI templates and inline JavaScript logic, which no company had ever done before. The result is called “JSX”. Although it may have sounded like a bad idea, Facebook’s gamble paid off big-time. React uses something called a component, which contains both the markup AND logic in the same file. It also uses an XML-like language that allows you to write markup directly in your JavaScript code. JSX is a big advantage for development, because you have everything in one place, and code completion and compile-time checks work better.

Ex. In this example, we declare a variable name and use it inside JSX by wrapping it in curly braces:

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

Angular uses templates that are enhanced HTML with Angular directives (“ng-if” or “ng-for”). React only requires knowledge of JavaScript, but with Angular, you must learn its specific syntax.

React Fiber

I’m not going to go into too much detail, but React Fiber is going to take React from “fast” to “blazingly fast”. Fiber is a backward-compatible, complete rewrite of the React core. It was introduced to React v16 and the upgrade went so smooth that you most likely didn’t even notice it happened. With Fiber, react can pause and resume work as it sees fit to get what matters onto the screen as quickly as possible. I encourage you to do more research into React Fiber – it is a killer feature.

Components

You’ve heard of components, haven’t you? Unless you’ve been living under a rock, I’m sure that you have. Both React and Angular are both component-based. A component receives an input, and after some internal logic returns a rendered UI template (a sign-in form or a table for example) as output. Components should be easy to reuse within other components or even in other projects. For example, you could have a sign-in component consisting of two text inputs (user & password) and a “Login” button. This component may have various properties and underlying logic, but it should be generalized so that you can reuse the component with different data on another page or in another app.

Components are meant to be self-contained “chunks” of your app that you can reuse in different situations. They are meant to encapsulate logic. The web is slowly becoming component-based, so I recommend you start getting accustomed to them right away.

State Management

There are states everywhere in an application. Data morphing over time involves complexity. Do you want to know how it works? The UI is described by the component at a given point in time. Then, the framework re-renders the entire UI of the component when data changes. This ensures that the data is always up to date.

To handle state in React, Redux is often used as the solution. In Angular, you may not need Redux. But, if your application becomes large enough, chances are that you will. Some developers, including me, opt to use MobX instead of Redux. MobX has more “magic” (things automatically done for you behind the scenes) and I personally prefer it. Although Redux and MobX go beyond the scope of this article, I highly encourage you to do some more research on them.

Data Binding

A large difference between React and Angular is one-way vs. two-way binding. Angular uses two-way binding. For example, if you change the UI element (a user input) in Angular, then the corresponding model state changes as well. Additionally, if you change the model state, then the UI element changes – hence, two-way data binding.

However, React only has one-way binding. First, the model state is updated, and then it renders the change in the UI element. However, if you change the UI element, the model state DOES NOT change. You must figure that out for yourself. Some common ways are through callbacks or state management libraries (see State Management in the previous section).

I must admit that Angular’s method is easier to understand at first. However, as the project becomes larger React’s way results in a better data overview (making debugging much easier). Both concepts have their pros and cons. You need to understand the concepts and determine if this influences your framework decision.

TypeScript vs JavaScript/Flow

React uses JavaScript, a dynamically-typed language (which means you don’t have to define the variable’s type). Because many developers already know and love JavaScript, this can be seen as a pro.

Conversely, if you want to use Angular you’ll need to get comfortable with TypeScript. TypeScript is a statically typed language, which means you must define the variable’s type (string, number, array, etc). It is simply a transpiler that compiles TypeScript to JavaScript code, which also means you can write ES5 code in a TypeScript file.

TypeScript’s purpose is to ensure a smooth transition for programmers with an Object Oriented Programming (OOP) background. TypeScript was also released in the period of ES5, and during that time, ES5 was not a class-based OOP language.

Since then, JavaScript has grown and garnered lots of great changes. With ES6, you have modules, classes, spread operators, arrow functions, template literals and more. It allows developers to write declarative code while having the characteristics of a true OOP language (that is, including class-based structure).

But, an advantage of TypeScript is that it offers more consistency in examples found online (React examples can be found in either ES5 or ES6).

You should also probably know that you could use Flow to enable type checking within your React project. It’s a static type-checker developed by Facebook for JavaScript. If you so choose, you can also use TypeScript in your React project (although it isn’t natively included).

Ex1. Property comparison between JavaScript and TypeScript

// JavaScript (ES6)
const name;

// TypeScript
const name: string; // <-- static typed!

Ex2. Argument comparison between JavaScript and TypeScript

// JavaScript (ES6)
function getName(name, age){
   return name + age;
}

// TypeScript
function getName(name: string, age: number){ // <-- static typed!
   return name + age;
}

Ex3. Here is a simple class-object comparison between JavaScript and TypeScript

// JavaScript (ES6)
class Greeter {
   constructor(message) {
      this.greeting = message;
   }

   greet() {
      return "Hello, " + this.greeting;
   }
}

   let greeter = new Greeter("JavaScript!");
   greeter.greet()

   //  Hello, JavaScript!

// TypeScript
class Greeter {  // <-- static typed!

   greeting: string;

   constructor(message: string) {
      this.greeting = message;
   }

   greet() {
      return "Hello, " + this.greeting;
   }
}

   let greeter = new Greeter("TypeScript!");
   greeter.greet()

   //  Hello, TypeScript!

Mobile Solutions of React vs. Angular

Angular and React both offer solutions to create mobile applications.

Ionic is a framework for developing hybrid mobile applications. It uses a Cordova container that is incorporated with Angular. Ionic provides a robust UI component library that is easy to set up and develop hybrid mobile applications with. However, the resulting app on a device is simply a web app inside of a native web view container. Because of this, the apps can be slow and laggy.

React Native, on the other hand, is a platform developed by Facebook for creating truly native mobile applications using React. The syntax is slightly different, but there are much more similarities than differences. Unlike Ionic, which is simply a glorified web app, React Native produces a truly native UI. It also allows you to create your own components and bind them to native code written in Objective-C, Java, or Swift.

Testing in React vs. Angular

Jest is used by Facebook to tests its React code. It is included in every React project and requires zero configuration to use. It also includes a powerful mocking library. Many times Jest is used in combination with Enzyme (a JavaScript testing utility used at Airbnb).

Jasmine is a testing framework that can be used in Angular. Eric Elliott says that Jasmine “results in millions of ways to write tests and assertions, needing to carefully read each one to understand what it’s doing”. The output, in my opinion, is also very bloated and difficult to read. Here are some educational articles on the integration of Angular with Karma and Mocha.

Learning Curve of React vs. Angular

An important decision you must make in choosing a new technology is its learning curve. The answer depends on your previous experience and familiarity with the related concepts. However, we can still try to assess the number of new things you’ll need to learn before you get started:

React:

The first thing you’ll learn in React is JSX. It may seem awkward to write at first, but it doesn’t add much complexity. You’ll also need to learn how to write components, manage internal state, and use props for configuration. You don’t need to learn any new logical structures or loops since all of this is plain JavaScript.

Once you’re done learning the basics, you’ll need to learn a routing library (since React doesn’t come with one). I recommend react router v4. Next comes state management with Redux or MobX. I’ve already touched upon this subject, so I’ll skip this. Once you’ve learned the basics, a routing library, and state management library, you’re ready to start building apps!

Angular:

Angular has many topics to learn, starting from basic ones such as directives, modules, decorators, components, services, dependency injection, pipes, and templates. After that, there are more advanced topics such as change detection, zones, AoT compilation, and Rx.js.

The entry barrier for Angular is clearly higher than for React. The sheer number of new concepts is confusing to newcomers. And even after you’ve started, the experience might be a bit rough since you need to keep in mind things like Rx.js subscription management and change detection performance.

It may seem like React has a lower barrier for entry, and I would most certainly have to agree. However, that doesn’t mean that React is “better”. I encourage you to try both React and Angular to see which one you personally prefer.

Popularity & Growth Trajectory of React vs. Angular

Before you choose a framework/library to work with, it’s important to look at its popularity for the sole purpose of job prospects. The more popular a technology is, in most cases, the more jobs you can find. Let’s take a look at some statistics:

On GitHub, at the time of writing, Angular (version 2 and above) has 40,963 stars and 732 contributors. However, it also 2,162 issues (which are to be expected, since Angular is a full-fledged framework as opposed to just a library). Over the last 12 months, Angular has managed to garner 35 stars/day (on average).

source: https://bestofjs.org/projects/angular

Conversely, on GitHub, React has 111,927 stars and 1,242 contributors. As far as issues go, React has far less than Angular, at 287 (which is to be expected since React is merely a view library). As you can clearly see, React has more than double the amount of GitHub stars and almost double the number of contributors. Of course, it could also be argued that React came out sooner than Angular (version 2+), so it’s had a longer amount of time to collect these stars/contributors. However, React is growing faster, as it is has collected 97 stars/day over the last 12 months.

source: https://bestofjs.org/projects/react

Other important metrics you need to look at are downloads and Google Trends search hits. According to npmtrends.com, you can see that downloads of both Angular and React are growing at incredible speeds. However, React currently has about 10,000 more downloads than Angular. This is significant.

source: https://www.npmtrends.com/@angular/core-vs-react

On this chart collected from Google Trends over the last 2 years, you can see that React is on a much faster upwards trajectory than Angular, which has lost much of its momentum. This indicates that React is growing faster than Angular. Regardless, both technologies seem to be doing great and their futures look quite bright.

source: https://trends.google.com/trends/explore?cat=31&date=today%205-y&q=React,Angular

Most Loved, Dreaded, and Wanted Frameworks, Libraries, and Tools

Another important statistic you should look at is the percentage of developers that love, dread, and want to learn a specific technology. A few statistics from Stack Overflow’s 2018 Developer Survey can be found below. React is the 2nd most loved technology. Angular is ranked far lower, in 9th place.

source: https://insights.stackoverflow.com/survey/2018#most-loved-dreaded-and-wanted

As far as dreaded technologies Angular is the 4th most dreaded, whereas React is the 11th most dreaded. That could mean a number of things: developers may find Angular hard to work with, the speed of development could be slow, or maybe it’s just not flashy enough. Either way, it’s not good for Angular to be so high on this list.

source: https://insights.stackoverflow.com/survey/2018#most-loved-dreaded-and-wanted

Lastly, we come to the statistic that shows which technologies developers want to learn the most. It’s not surprising to see React sitting in 1st place. However, Angular is in 4th place, which isn’t too shabby either.

source: https://insights.stackoverflow.com/survey/2018#most-loved-dreaded-and-wanted

Companies Using

HUGE companies are utilizing both React and Angular. I’m talking some of the biggest in the world. Here is just a small sample:

React:

  • Facebook
  • Airbnb
  • Uber
  • Netflix
  • Instagram
  • WhatsApp
  • Dropbox

Angular:

  • Google
  • Nike
  • Forbes
  • Upwork
  • General Motors
  • HBO
  • Sony

Conclusion of React vs. Angular

As you have seen through my many examples, React and Angular are two titans in a cutthroat industry. In a business where only the strongest survive, you can easily conclude that these are some of the best technologies on the market. You can’t go wrong with either one.

Recap

Let’s recap what you’ve learned in this article:

Angular:

  1. Is a full framework
  2. Has a Regular DOM, which renders updates slower than React’s Virtual DOM
  3. The rendered JavaScript and HTML maintains a physical separation
  4. Utilizes Components: emerging web components standard
  5. Data Binding: two-way
  6. You must use TypeScript
  7. Mobile: Ionic and Cordova are slower than React Native
  8. Testing:  Jasmine & Mocha
  9. Learning Curve is higher, but once you understand it you have an entire MVC framework
  10. Scalability: easy to scale
  11. Popularity: dropped since AngularJS (Angular 1)
  12. Open source: GitHub stars: 40,963 / Contributors: 732 / Issue: 2,162
  13. Size: larger, resulting in longer load times and performance on mobile
  14. Used on: Google, Nike, Forbes, Upwork, General Motors, HBO, Sony

React:

  1. Just a small view library
  2. Has a Virtual DOM, which renders updates faster than Angular’s Regular DOM
  3. Uses JSX, which combines markup and logic in the same file (making components easier to read)
  4. Components: emerging web components standard
  5. Data Binding: one-way
  6. You Can use ES6/7 JavaScript, although you can use Typescript or Flow if you so choose
  7. Mobile: React Native is faster than Angular’s solutions
  8. Testing: Jest & Enzyme
  9. Learning Curve is lower, but you only get the view. Because of this, you’re going to have to learn a slew of 3rd party libraries. Ex. State management (Redux or MobX), Asynchronous calls (react-promise, react-thunk, or react-saga), etc.
  10. Scalability: is more testable, so also easy to scale
  11. Popularity: has increased exponentially
  12. Open source: GitHub stars: 111,927 / Contributors: 1,242 / Issues: 287
  13. Size: smaller than Angular, so a bit faster
  14. Used on: Facebook, Airbnb, Uber, Netflix, Instagram, Whatsapp, Dropbox
  15. React Fiber will increase the speed of React dramatically

 

Do you want to become a React master? If so, check out Mosh’s React course. It’s the best React course out there! And if you liked this article, share it with others as well!

I am a Software Engineer who loves to Blog, Write, make YouTube videos, Play Guitar/Sing/Make Music, & Enjoy Life to the absolute fullest!
Tags: , , , ,

47 responses to “React vs. Angular: The Complete Comparison”

  1. Nehmia says:

    Thank you for the in-depth comparison between Angular and React. I wanted to point out that there is a type on the Recap regarding testing frameworks. Looks like the testing frameworks are interchanged between Angular and React. (Should be Angular: Jasmine and Mocha, React:Just and Enzyme)

  2. Nik Anderson says:

    Nik Anderson
    I think React is much better than Angular because of this data flow architecture. I wrote about it here https://interviewquestions.cc/react-interview-questions/#Q4_What_is_the_main_difference_between_React_and_Angular

  3. Siva says:

    Good Reference mosh,now we r using Angular6 for cretate web app,but some of the difficulties faced Mosed of the js files aren,t working in Our Angular Part. Now a days Most of the Html Action are js based.If we use typescript to rewrite js files into ts is take more time taken,And some Confusion.we r holding our Projects,
    Mosh, is Js files support in Reactjs?
    I’m Waiting For UR Answer! 🙂

  4. jm says:

    This doesn’t seem like an unbiased comparison to me, your phrasing suggests you really prefer react. It’s not upsetting, mainly just something you should disclose.

    • afam4eva says:

      I thought i was the only one who noticed. 30% into the article, ii could already tell that he favours REACT over Angular. I’m currently lerning Angular and if i had seen this article ear;ier, i would have probably opted for React instead but i’ll continue with Angular and probably learn React later. Only then can i compare.

      • chandr123kar says:

        Hi afam4eva..Just cool..spa logics are same like handling requests , authentication.just we need to opt the best for project. And nothing wrong on knowing angular..

    • Johnny_Five says:

      I’ve used both, extensively, at different jobs. I do prefer React. I’ve updated the article with a disclaimer at the top.

    • hans verauf says:

      Yes he clearly bends to React.

      I have used both and find that work on a tiny little applications with “custom” control tend to go React, while when we have to build larger more structured applications, Angular pulls ahead.

      We have a application with over 400 forms in Angular and I would have had to do sooooo much more not to loose control in React.

      So I my guess is Mosh works on smaller jobs.

  5. In the example:

    let greeter = new Greeter(“JavaScript!”);

    it seems nothing will happen unless you call:

    greeter.greet();

    Other than that it was a very interesting reading! Thanks! 🙂

  6. Karthi says:

    Angular : Module + Component based architecture
    React: Component based architecture

  7. Nice work Mr Mosh. Great Article for Beginners…

  8. Jaime says:

    No mention of Nativescript?

  9. cftaskforce says:

    Thank you for this article. Very helpful in making decisions between which framework to use.

  10. Janmejay Ambardekar says:

    Yes, the statements in article tells that he is more fanboy of React.

  11. Mathew Joseph says:

    Always been a fan of your courses and articles. Great work.

  12. Sachin Bahegavankar says:

    Angular says: hmmm okay! just wait !

    • Miki says:

      Angular will disappear shortly as will all other template based UI solutions simply because they are the wrong way to approach UI development (they are impractical and barely work … barely. All UIs I’ve seen except React just barely work and seem like they can fall apart at any moment even when a tiny change occurs). People that say that Angular has any advantages (even one!) over React are fooling themselves to a certain degree as there are none. There are numerous rather simple scenarios in React that cannot be achieved in Angular without doing a back flip and headstand at the same time (now picture adding one more additional scenario on top of that and the task becomes impossible).

  13. James says:

    Thanks. Potential employers keep asking me whether I have skills in these two technologies. This is a good starting point.

  14. Suneel says:

    Thanks for sharing. It is definitely a biased article favoring React.

  15. John Qian says:

    One gripe: it looks like the “Most Dreaded” list is the exact inverse of the “Most Loved” list–completely redundant.

  16. Hoang says:

    Hi sir, first of all, thanks for the great comparison, it opened my mind a lot.
    However, there are 1 thing that I concern: When comparing the mobile development, you used Ionic to compare with React Native, basically hybrid vs native, but I would like to hear your opinion about NativeScript vs React Native since they both create native performance.

  17. Decision making Article!! Loved it!! 🙂

  18. Michael says:

    Choose React if you work with Django.. Trust me it saves more time than you’d think

  19. Liam Murphy says:

    Really great article; with so many technologies out there the risk of picking, and getting stuck with, the “wrong” one is very high….many wonderful years spent on Silverlight being a case in point. Angular has Google behind it, and typescript is very nice IMHO, but React seems to be the way to go with ASP.NET Core as my backend….

  20. Jaffar Khan says:

    Thanks for showing interest in sharing your knowledge, one of the in-depth article I’ve ever read.

  21. Cool Blue says:

    I disagree with the comparison of the size where you point that Angular is larger. You can use angular lazy loading, and your app will load fast.

  22. Saghav Amal Shiva says:

    Great Article for Beginners…

  23. Grégor González says:

    Thank you, this is something I wanted to see, a really good comparison.

    I started learning with react but suddenly had to do a angular project, I think angular is easy to learn, more than react (I suffered starting with react.), but this depends on the info at hand. Still preffer angular but react is in everything, is a huge market for react/react native developers. And that’s why is the best option (for me).

  24. Haroon Ejaz says:

    I have found your channel on youtube a few days ago, you have a got a permanent fan sir!

  25. Great article, thank you! We are trying to choose between React and Angular and one of the most important features is to keep compatibility with IE11. Unfortunately necessary. Can you please comment on which solution it is going to be easier to keep IE11 running smooth, as I understand these is quite challenging. Thanks!

  26. Thanks Mosh,
    I am your fan and student. I enrolled react and angular courses. i really enjoyed that and it is really helped me in my work. I refer them as a reference als.

    And what you explaind here that is totally mindblowing.When and where we have to useyou totally described neetly.
    Thanks for this.
    God Bless you

  27. Joe T says:

    I’ve been using Angular for over a year now and want to learn React, but what always holds me back is that it’s only the view. I then have to find/learn third party libraries for simple things like routing. Angular has that all built in. Yes, it may take longer (though coming from a C# background I found it easy) but then you don’t have to go outside for things that I deem as essential as basic.

  28. “Angular uses two-way binding”
    Angular support both two way and one way binding.

  29. Seriously says:

    This article is so biased.
    “Angular has two way data-binding”… Yes but no, angular has one way data-binding with custom event emission from child to parent.

    “React has virtual dom while angular does not”… Nope, angular has a virtual Dom too.

    “React native is faster than ionic” … Are you serious? Why not comparing with nativescript?

    You talk about component. React has absolutely no style encapsulation.

    You just tell us that angular is a framework without saying a word about its features. Tree-shaking, server-side rendering, ahead of time compilation…

  30. burak says:

    thanks for this great article

  31. Rajaram Ramachandran says:

    Excellent article!!! As a beginner i have enjoyed throughout the article.

  32. AngularReact says:

    Two-way binding is not a default approach. Most of the time developer uses one-way binding. Only components that handle data could be two-way binded but it’s not necessary.
    You write about wonderful virtual dom in React but nothing about JIT, and extremely fast way that Anuglar detects changes. For me React lets unexperienced developer made architectural mistakes. In my opinion for large projects Angular is better – more organized, more readable code.

  33. spamshaker says:

    Well, React convention is not really cutting edge, the jsx templates are mostly copied from flex mxml though flex allowed two ways binding ages ago. It sounds only ported with some tweaks. The idea is the same behind both, means either mxml or jsx have to be transoformed to plain langage AS/JS and uses xml structure for base. Virtualization sounds similar to Flex DataGrid as well. I am really crying for removing flash from browsers, Action Script code worked with any browser contained plugin without headaches around it.

  34. Trump2020 says:

    Too many snowflakes crying about a React bias. It’s his damn opinion, his article and he can be bias if he wants to. You don’t have to read it you know?? Some people don’t deserve the internet…

  35. Moriss says:

    Thank you for this article!
    It would be great to read about top famous websites built with Angular (something like that about React JS: https://anyforsoft.com/blog/10-famous-websites-built-react-js?utm_source=quora&utm_medium=referral )

Leave a Reply

Connect with Me
  • Categories
  • Popular Posts

    %d bloggers like this: