React JS took the spotlight in 2015 as being the most popular web technology for front-end application development but Angular 2 has recently stepped on the scene and is ready to contend! Let’s delve into the good, the bad, and the ugly of both sides. It’s React vs Angular 2 and it’s on.

Can we even compare Facebook’s library, React JS, with Google’s comprehensive framework, Angular 2? Well, do they do the same thing? Technically, no. But when you create a React application you will most likely be using libraries such as Redux, react-router, Immutable, and more. I would say that this whole collection of libraries puts React JS on an even playing field with the framework of Angular 2 as they both are different means to the same end. This alone sets the stage for where these technologies start to differ.

(How great is this image above, right? Makes me laugh all the time)

In the blue corner: React JS

Given that React is a collection of multiple libraries that leaves more room for inconsistency in development practices and tutorials as opposed to Angular 2’s basically enforced consistency which is displayed directly by the core Angular team’s embrace of Typescript. This is the root cause of the overwhelming amount of inconsistent React starter kits written in plain ES5 JS as well as Babel while some use JSX and other don’t. Angular 2 definitely makes it a lot easier than React JS to bridge new hires into a development team for this reason. Granted, Angular 2 doesn’t take advantage of the flexibility of JSX at all.

JSX is a syntax similar to HTML that compiles into JavaScript. The syntax allows you to assemble a component’s template from other components and HTML elements. Templates are declared inline using the render method of the component class. These templates become a part of Reacts virtual DOM where all components are first built in memory creating a virtual representation of the DOM tree. The real DOM tree is then created by React JS and sent to the screen. As the DOM reacts to any UI changes it re-renders based off of what the virtual DOM tree and the real one comparatively show. This makes this method very efficient. The beauty of working with this is that your markup and code are within the same file meaning code completion helps you out as you type reference to your component’s functions and variables.

In the red corner: Angular 2

Angular 2, on the contrary uses string-based HTML templates limiting you from code coloring, and full code completion support. These templates are all in separate HTML files. Every UI change in Angular is made just by DOM manipulations. Which brings up the methods of data-binding.

Data binding is not the same as DOM manipulation. DOM deals with elements whereas data binding deals with values. Line 2 of the following snippet shows an example of two-way databinding accredited to the [(ngModel)] attribute allowing the input property to be change the “fruit”. Line 3 in the following snippet shows an example of one-way databinding whereas the value is bound to the div element and can only be viewed, not modified.

<h1>Fruit Basket Madness</h1>

<input type=”text” [(ngModel)]=”fruit” id=”new-fruit” />

<div>{{fruit}}</div>

As opposed to data binding, how does React JS get the same job done? Very simply. Taking a look at the snippet below we bind to the fruit property of the state object. The render method is re-invoked every time the value of the property changes, with the setState method. This prompts the change of the Virtual DOM which is then checked against the real DOM, altering it if changes are present.

render() {

return (

<div className=”container”>

<p>{this.state.fruit}</p>

</div>

);

}

In this case, React requires more code because the state must be changed manually whereas the data binding in Angular 2 is slightly less code but more confusing with templates full of strange custom attributes.

Track bugs visually and manage your front-end development workflow – Here’s how

React vs Angular 2: Size Matters

One of the biggest differences between Angular 2 and React is size. This is mostly because React JS comes “bare bones” until you beef it up with some libraries while Angular2 comes with more to work with off the bat. Even with suggested libraries React is still almost 4 times smaller than Angular 2.

As shown by Restuta Angular 2’s minified version has a size of 566K while the size of React JS with add-ons, minified version is at 144K.

This might interest you too: The Best Web Development and Design Tutorial Channels on YouTube

Final Thoughts – React vs Angular 2

When comparing the two it is like deciding whether to buy a computer off the shelf or building a computer with off the shelf parts. Angular 2 is committed to HTML-centric design making it complex compared to React’s more simple JavaScript focused approach. With Angular 2, you can do fancy things with less code but in contrast you can use React to write plain JavaScript keeping things less complex.

Overall, both technologies provide a robust set of tools for quality, scalable, reactive web applications. For those who prefer to code in plain old JavaScript, React may peak your interest a bit more but for those who want a more mature and complete solution, Angular 2 may be your best bet as it has learned from Angular JS and React JS.

So what is your opinion regarding React vs Angular 2? Let us know in the comments!

The makers of DebugMe hope that you like this post and would love it if you follow us on Twitter. We are tweeting about web design, UI/UX and development related topics multiple times a day. DebugMe is an issue tracking, project management and screenshot tool for every website project. Get visual feedback right away and solve front-end problems faster. Try it now for free.