My Take on Comparing Angular and React

Background

I recently decided to build a project with Angular to learn the framework. Before this, the main JavaScript framework that I had used was React. After seeing some of the similarities and differences between the two, I decided it would be good to dive deeper into why I might want to use one over the other.

My First Impressions

The first thing I noticed about Angular was how similar it was to React. It has a main index.html file, which serves as the template, just like React. It also has a main.ts file which serves as the jumping off point for your Angular application. This is similar to the index.js file in a React application. Both use npm for packages and thus have a node_modules folder and a package.json file. Both frameworks make use of components, which are reusable chunks of JavaScript (or in the case of Angular, Typescript) and html that are the building blocks of your application. Additionally, you can create mobile apps with both frameworks.

I did notice some major differences though. For one, Angular uses TypeScript which is a superset of JavaScript. If you would like to learn more about TypeScript, check out my blog. Also, each Angular component has its own HTML file, whereas React uses JSX in the component itself. JSX is a, "syntax extension" to JavaScript and allows you to create React elements that look very similar to XML.

Another big difference is the use of Angular directives to help create logic in the HTML files. One example is ngIf which allows you to create an if statement inside of your HTML. The following is from the docs:

<div *ngIf="condition">Content to render when condition is true.</div>

With React, I have typically written functions in my components to conditionally render elements with if/else blocks like so:

renderPrice = () => {
    if (this.props.concert.attributes.price_range !== "-") {
      return <p>${this.props.concert.attributes.price_range}</p>
    } else {
      return <p>Price Unknown</p>
    }
  }

These functions are then called within React's render() function using JSX.

A Little Bit of History

Angular was developed and released in 2016 by Google. Angular was based off of AngularJS, which was created by Misko Hevery and Adam Abrons in 2009. However AngularJS was completely re-written and transformed into Angular to include things, such as TypeScript and modularity.

React was developed by Jordan Walke, a Software Engineer at Facebook. It was originally called FaxJS, was inspired by XHP, and used internally. It was first deployed in 2011 and open-sourced in 2013.

Angular

Pros

Angular comes with everything a developer needs to create applications. As mentioned earlier, it utilizes TypeScript which compiles to plain JavaScript and the documentation is all centered around TypeScript. The use of TypeScript is considered a pro by most developers because it allows errors to be caught quickly. Angular comes with routing, templating, and more without needing to install additional packages.

Cons

One con to Angular is that although it comes with everything you need to build an application, it can be hard to add additional packages and get them to seamlessly work with Angular components and TypeScript. Also, some say that the learning curve is steep for Angular mainly due to the syntax.

Some companies that use Angular are Google (Gmail), Microsoft, Xbox, and Udacity.

React

Pros

React's exciting features include the Virtual DOM and state. See my blog about the virtual DOM and how it works here. Basically, the virtual DOM allows React to batch updates to the DOM and only make changes to the necessary elements. This feature makes React super fast! State allows each component to contain dynamic data in its own object. This is a great way to package up variables that will change, instead of spreading them out throughout your code. Additionally, including extra packages with React is usually pretty straightforward and easy to incorporate.

Cons

Here are some potential cons of React: You can use TypeScript with React, however the documentation is written in JavaScript so it might not be as straightforward as Angular out of the box. React has routing as well (react-router), but requires installing a different package that isn't included with create-react-app.

Companies that currently use React are Facebook, Instagram, Airbnb, Twitter, Netlix and more.

Wrapping it Up

Deciding whether to get started with Angular or React ultimately depends on your use case. Angular comes with everything you need to build a single-page web application out of the box, while React is sometimes seen as more customizable. Also, some say that Angular has a little bit of a steeper learning curve than React.

Let me know which framework you prefer and why. Thanks for reading!

References

• AngularJS Wiki
• React Wiki
• Youtube Video