React JS vs Angular 2

In this blog we are going to discuss in summary, difference between the two most popular JS (library/framework) i.e Angular 2 and React JS

On the very first note, React JS is just a library and Angular 2 is a whole framework (which is still undergoing changes). But we can have a comparison for both.

1. Component: Both React and Angular 2 are based on a Component model. But they both differ in the way the component is used.

in Angular 2 :

import { Component } from 'angular2/core';

@Component({
    selector: 'any-selector',
    templateUrl: 'app/demo.template.html'
})

export class DemoComponent { }

In React :

import React from 'react';

export default class DemoComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: 'Hello World!' };
  }

  render() {
    return (
      <div>
        <p>{this.state.message}</p>
      </div>
    );
  }
}

We can see that both React and Angular 2 uses component (which is based on class feature of ES6)
Component used in Angular 2 is quite difficult as compared to React. As they use annotation or can say, decorators (which has a quite unusual syntax with JS code).

On the other side, Angular 2 uses template URL to store HTML (which is separate from JS code)
But React uses inline HTML code (which is coupled component with HTML and JS code ie. messy code).

2. ECMA 6 : Both React and Angular 2 uses latest ECMA 6 features but React uses Babel  to transpile ES6/ES2015 code into its ES5 counterpart. While Angular use typescript (mostly) which uses adds static types inside javascript. This static types used inside JS is a demerit in itself.

3 DataFlow : Angular 2 is based on bi-directional data flow while React JS is based on uni-directional data flow.

4. Routing : Angular 2 has its own routing functionality in its own framework. While React relies on another library “react-router”.

5. DOM : React JS use Virtual DOM (Javascript representation of actual DOM) to manipulate the actual DOM , which makes it quite fast and efficient in comparison to Angular 2 which directly manipulate actual DOM.

6. Tooling Support : For tool used to support React we need to search for those which supports JSX feature . Although there are many tools in the market which support JSX. But Angular 2 does not require any special tool as it stores HTML in a separate file.

7. Architecture : React does not provide any architecture , but facebook developers suggest to use either flux or redux based architecture which supports unidirectional data flow.On the other hand, Angular was based on MVC architecture earlier but later in Angular 2, architecture is based on the component with bidirectional data flow with the concept of dependency injection (most opinionated ) .

So we can see that both React and Angular 2 have pros and cons when compared with each other with respect to their core concepts.

FOUND THIS USEFUL? SHARE IT

comments (3)

  1. Heber López

    Although i liked this post, there are some things i don’t quite agree with, such as:

    * On the other side, Angular 2 uses template URL to store HTML (which is separate from JS code): this is optional, i’ve seen people use inline ES2015 templates instead for 1 time bindings.

    * But React uses inline HTML code (which is coupled component with HTML and JS code ie. messy code): although i do think too that it is messy, a lot of people i know from the react ecosystem say exactly the oposite, when they started it felt like a mess and then it made so much sense for them, which lead me to think it depends on the developer’s code styles.

    * While Angular use typescript (mostly) which uses adds static types inside javascript. This static types used inside JS is a demerit in itself: here I 100% disagree, being able to have types at build time not only prevents a huge number of defects on large projects, but also helps a lot when trying to develop in a more functional programming way.

    Last but not least, although angular does provide two way data binding, the current tendency on ng2 apps is to use one way bindings + events with a redux-like architecture, same as react.

    Cheers!

    Reply
  2. Ruffiem

    Nice read. I would say it’s like any other programming language, choose the one you feel the more comfortable with and the one that fits your needs. Angular API offer much more possibilitied thought React is easier to master and you can bundle up with other libraries to achieve what angular achieves but oh, well, I guess it’s like oranges and bananas

    Reply

Leave a Reply

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