ReactJS vs. AngularJS
As a part of the bootcamp that I attended, the Grace Hopper Program at Fullstack Academy, I was required to do a ten minute talk on a topic of my choice. Fullstack had recently switched its curriculum from the MEAN stack to the NERD stack and I was curious about the differences between the two front end technologies: AngularJS which they taught before 2017 and ReactJS which they teach now.
The following is the script for the talk that I gave and also the video of the actual talk. I pulled information from many online sources. If you would like a list, let me know in the comments and I can get that to you.
Apples to Oranges?
How can we compare a full front end framework to a UI view library?
Angular 2 is a full framework while ReactJS is a view layer library. Some might argue that comparing the two is like comparing apples to oranges, but since both are used separately to serve the same purpose, it is beneficial to compare them. Rather than saying the comparison is like comparing apples to oranges, a much better analogy that is employed by a few tech bloggers is that of deciding between purchasing a computer off the shelf or building a computer with off the shelf parts.
While building a computer with off the shelf parts offers flexibility in choice and design, buying a fully built and fully equipped computer allows a user to get started quickly and easily. In this analogy Angular 2 is the computer off the shelf, while ReactJS is the computer that is assembled using off the shelf parts.
With ReactJS, a developer would need to choose which libraries to use for state management architecture, routing, and server requests, among others. There are the tried true libraries for these purposes, redux for state management architecture, react-router for routing, and Fetch or axios for server requests. The choice, however, is up to the developer when it comes to which libraries to use, and whether she wants to use them at all.
On the other hand, Angular 2 comes with all of these tools as part of its framework.
This is just one difference between the two technologies. Let’s take a look at a side by side comparison of the two before we delve deeper into their similarities and differences.
These three tables compare AngularJS, Angular 2, and ReactJS. Although I am focusing on the comparison between Angular 2 and ReactJS, it is interesting to note the popularity of AngularJS by way of it’s GitHub stars. It is also interesting to see that changes that were made from AngularJS to Angular 2; the most notable change being the increased empasis on the component model.
Some of the most notable differences that are visible from these tables is the use of Typescript versus JavaScript and JSX, the Virual DOM versus the Regular DOM, two way data binding versus unidirectional data flow, and the learning curve between the two.
First, let’s take a look at some of the similarities between Angular 2 and React. Both use the component model as building blocks for creating views. The structure of the components do differ in small ways. The first example that you see is a component built with Angular 2. The block that you see that begins with an @ symbol is known as a decorator, and includes the necesarry metadata for the component. The selector property is used to select the HTML element. The “templateUrl” property links to the file with the HTML for the view that the component is responsible for rendering. It is also possible to include the HTML code directly in the decorator function with the property “template.” After the decorator is the class definition which can include any event handlers.
As you see in these examples, one major difference between ReactJS components and Angular 2 components is the use of JSX in ReactJS and plain HTML in Angular 2. This Angular 2 example has no HTML, but the templateUrl file would be written in HTML.
Let’s explore some other differences between Angular 2 and ReactJS. With AngularJS all of the necessary elements, such as routing, server requests, and forms are part of the Angular 2 framework. While with ReactJS you would need to pull these libraries in. There are the popular choices for libraries that serve these functions, but as a beginner it might be difficult to know which libraries to use for server requests or for state management.
ReactJS uses a virtual DOM to render changes to the DOM which is faster and more efficient than rerendering the entire DOM when something changes. The virtual DOM registers the changes and then is compared to the rendered DOM and only the areas that are different are changed.
However, Angular 2’s two way data binding allows for immediate changes to the data on a page once it is marked for two way data binding. Although the data does not persist, it is immediately visible. The same affect using ReactJS requires more code. The state would have to be changed in order for the new data to be rerendered.
Angular 2 does not require knowledge of Typescript, but most Angular 2 apps are coded using Typescript. Developers have only good things to say about Typescript as a language, and other than the fact that it is necessary to take the time to learn it in order to use Angular 2, there is no drawback to it.
There is some Angluar syntax that you would need to learn in order to create functionality, such as looping through data, within a component. While with ReactJS, one only needs to know JavaScript and JSX to loop through data, with Anglar 2 there are specific expressions that would be insterted into the HTML to allow for that type of functionality. Let’s take a look at some Angular specific syntax.
As you see in this example of list creation in Angular 2, the syntax ngFor is very specific to Angular, whereas with React, you are can use regular JavaScript array methods like map.
The opinions on Angular 2 and ReactJS vary. Developers agree that ReactJS is lightweight in comparison to Angular 2, and that it is easier to learn if you know JavaScript. Some are partial to JSX and are therefore proponents of ReactJS, while others find the out of the box architecture of Angular 2 easier to work with. Many are fans of Typescript, which makes them favor Angular 2.
There are those that say that Angular 2 is better for large enterprise projects, while ReactJS is better for smaller projects. Although many would disagree, and ReactJS is used succesfully by large companies such as Netflix and Yahoo.
Developers who work on teams with designers who are not programmers have found that Angular 2 is easier for designers to work with since the HTML is separated into its own file.
The most noteworthy critique of ReactJS is that it isn’t able to pass functionality to different HTML elements through attributes. A feature that Angular 2 does have.
One of the critiques of Angular 2 that holds a lot of weight is that it is sometimes difficult to debug and that it can silently fail, while with ReactJS, any JSX will be announced at the time the script is complied and the errors will include a line number.
The choice between Angular 2 and ReactJS is a personal one. Both technologies are effective and have extensive community support. Personally, I feel that is beneficial to know both and as both innovate and change, it is likely that they will adopt the best features from the other.
