React vs Angular 2 Comparison: A Heavyweight Bout for the JavaScript Title

React vs Angular 2 Comparison: A Heavyweight Bout for the JavaScript Title

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.

react-vs-angular2

(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.

Related content: Where is JavaScript going in 2017?

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 workflowHere’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.

SHARE ON:Share on LinkedInTweet about this on TwitterShare on Facebook

25 thoughts on “React vs Angular 2 Comparison: A Heavyweight Bout for the JavaScript Title

  1. The weight comparison is not strictly fair to angular 2 because I believe a FRP library like RxJS is included in that weight. RxJS allows you do ALL kinds of things that React can only dream off..well unless you take in a FRP library there as well. However, the biggest mistake of angular 2 is the horrible template syntax. It is god-awful and does not lend itself to any kind of searchability. JSX is a much more elegant solution and does not require you to learn a new language just to use a framework. JSX is also more inherently flexible. The choice of typescript is better in angular 2. typescript is a dream, it allows you to catch all sorts of errors. BUt there is nothing preventing you to use typescript in react nowadays – there are great starter kits.
    About the only advantage I can see for angular 2 is the tight integration with RxJS observables which makes things like event throttling and aync programming dead easy. But with a little bit of legwork, you can have that in React as well.
    All in all, React feels a better choice at this point in time.

  2. There are a few things worth noting, one is that if you’re using Redux for state management, your redux component isn’t any larger than an angular one, in fact it is likely smaller as you can reduce most of your components to static render functions. Beyond this, React’s JSX is far more consistent with fewer surprises than ng2. I’ve worked on several projects in both, and I’ll take React every time I’m given a choice. Beyond ng2’s weird templating dsl, you have to deal with the awkward dependency injection system still, while react can use simple cjs or es6 syntax, which is much easier to follow. ng1/2 directive/component registration compared to the element/attribute tags get a little wierd with the camelCase here, hyphen-case there mish-mash.

    React has some weirdness regarding refs to elements and it’s event lifecycle, but it’s still much more straight forward than ng2’s.

    As to the weight, you can go a *LOT* smaller, I’ve build a stand-alone material design inspired datepicker[1][2] that weighs in around 20k min+gzip, and that’s with redux, preact, preact-compat and a few odds and ends. I could use closure compiler to reduce it farther, but it’s still pretty light, for effectively a full starter framework. The source is pretty clean, though I don’t have testing in place, I should be able to wire that in. The only weirdness is mostly because it has to “clean up” after itself including destroying the DOM container, and unbinding events I otherwise wouldn’t. Still have a couple features to work out, then flushing out the demp, then will release it on npm as 1.0

    Another cool thing about React, it’s easy to have your components in NPM as separate package modules… beyond that there’s HMR, react developer tools and redux developer tools.

    [1] http://tracker1.github.io/md-datepicker/
    [2] https://github.com/tracker1/md-datepicker

    1. I’m an Angular2 fan, but I have yet to see a 45KB angular 2 bundle. I barely get that 145KB while gzipped! (Angular 2 version r.c.-1) Bundle built with angular-cli, their own tool. Having the following included in the bundle: core, common, compiler, http, router, platform-browser and rxjs of course. No point in making a comparison with a different set of barrels, since you’ll need all those in about 99% of the cases. So, I really am curious: how did you get to 45 KB (which at least you meant gzipped I assume, right?)

  3. What I dislike about Angular is its scope madness – there are so many scopes that it confuses the heck out of me – if you have lots of components keeping track of all the scopes is insanely difficult.
    In React you have a one way data flow from top to bottom and there’s no confusion there. If you use the Flux architecture managing the data flow is very straightforward.
    Also in Angular there are all sorts of bottlenecks all having to do with how it refreshes DOM – in React, DOM is refreshed only if it has been changed (tracking via virtual DOM), in Angular is is always refreshed. They addressed this problem in Angular 2 however. Also React lends itself to using mutability which allows for extremely good performance optimization.

  4. One thing that I luv about working with React is that I am mostly writing Javascript. While when I work with Angular, sure I became a better Angular developer but I don’t need these skills outside of Angular, where as with React I feel I have become a better JavaScript developer.

Leave a Reply

Your email address will not be published. Required fields are marked *