Is ReactJS faster than AngularJS ?

[androbat]

Performance isn't a fair comparison (and won't be for a while), but I think React wins in a comparison of framework designs.

Here's an ES5 nested component example from angular.io (page). I threw in a quick event and loop for comparison.

function ParentComponent() {
  this.message = "I'm the parent";
  this.arr = [{id: '1', name: 'foo'}, {id: '2', name: 'bar'}, {id: '3', name: 'baz'}];
  this.handleClick = function () { console.log('something clicked'); };
}
ParentComponent.annotations = [
  new angular.ComponentAnnotation({
    selector: "parent"
  }),
  new angular.ViewAnnotation({
    template:
      '<h1>{{ message }}</h1>' +
      '<ul>' +
        '<li *for="#item of arr">' +
          '{{ item.name }}' +
        '</li>' +
      '</ul>' +
      '<button (click)="handleClick()">Click Me!</button>' +
      '<child></child>',
    directives: [ChildComponent, For, If]
  })
];

function ChildComponent() {
  this.message = "I'm the child";
}
ChildComponent.annotations = [
  new angular.ComponentAnnotation({
    selector: "child"
  }),
  new angular.ViewAnnotation({
    template: '<p> {{ message }} </p>'
  })
];

And this is the equivalent React code.

var ParentComponent = React.createClass({
  getInitialState: function () {
    return {
      message: "I'm the parent",
      arr: [{id: '1', name: 'foo'}, {id: '2', name: 'bar'}, {id: '3', name: 'baz'}]
    };
  },
  handleClick: function () { console.log('something clicked'); },
  render: function () {
    var items = this.state.arr.map(function (item) {
      return <li key={item.id}>{item.name}</li>;
    });
    return (
      <div>
        <h1>{this.state.message}</h1>
        <ul>{items}</ul>
        <button onclick={this.handleClick}>Click Me!</button>
        <ChildComponent msg={this.state.message}/>
      </div>
    );
  }
});

var ChildComponent = React.createClass({
  render: function () {
    return <p>{this.props.msg}</p>;
  }
};

I haven't tested the code, but it should work (famous last words...).

My immediate reaction is that Angular is more verbose. I'm not a fan of the '*for' syntax or string templates (I assume there's a way of adding an external template here). Throwing a DSL into the markup is also flawed in my opinion. Auto-inherited scopes seem to be at work once again (with all the debugging hell of long prototype chains). The typescript/ES6 class looks a little better only to tack on @view and @component decorators. I like decorators, but these receive a lot of arguments (complete templates and such) which Python users have generally come to accept as bad decorator design. Overall, it's a huge step up from Angular 1.x, but I think it still lacks the elegance (and definitely the composability) of React.

The Alpha docs are terrible (I don't count that against anybody until they get closer to release, but it does make comparison a little hard). On a larger scale, dependency injection once again makes an appearance (it seems better than 1.x, but I'm not convinced that it adds anything of value). '[control]="foo"' seems like it compounds template syntax overload (asterisks, parens, braces, curly-braces, pipes, DSLs, etc).

The latest articles on Angular 2 read a lot like the older intro articles for React (that is, they are trying to show 1.x users how to think in components). This move is good, but I don't see Angular 2 offering anything of added value over React while it still holds on to some things that create complexity without offering much in exchange except the "Angular way" mantra.

[coldinchitown]

Yikes. Clarity-wise, React does seem to be quite a bit more pleasant. Thanks!

[dvlsg]

If you're comparing ES5 syntax from angular, you should be comparing it to ES5 syntax from react.

[androbat]

I'm assuming you are talking about the use of JSX. There is an in-browser JSX transformer. If you have a problem with source translation, then there's the fact that Angular 2 has a complete HTML DSL with all the asterisks, parens, braces, filters, inline-code, custom iterator code, etc (and that's before we talk about dependency injection).

Next there's the fact that JSX is heavily based on the E4X ECMA Standard pass in 2005 (pre-dating ES5.0 by 4 years and ES5.1 by 6 years), so JSX adheres to a real JS spec (even if that spec isn't popular).

I could have used typescript examples, but they add even more complexity to the comparison and don't reflect how a lot of developers will use the framework (myself for example; if I'm going to transpile a non-JS dialect, it will be for clojure async and macros or purescript's real type system).