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!
Top comments (2)
It's always interesting to hear people's thoughts on the two since there the debate is ongoing. Thanks for sharing your opinion with us! Love that you broke it down into pros/cons. Makes it nice and easy to read 😊
Thank you for reading! What are your opinions on the two?