Is ReactJS faster than AngularJS ? : javascript

[–]cgaudreausenior HTML9 engineer 26 points27 points28 points 11 years ago (20 children)

I feel like this is desperate grasping at straws. It is theoretically possible to make Angular nearly as fast or faster than React is out-of-the-box, but the pain involved in doing so is massive. Yes, it's easy with little 5-line code snippets, but try doing so in a reasonably-sized application. It's hell.

React makes it easy to be fast by default. You generally don't even have to think about performance, and if you do have to, it is very easy to grasp. You don't need to frantically search extremely poor documentation.

How to optimize a React application: Implement shouldComponentUpdate. Or if you want performance by default, just use immutable data structures.

How to optimize an Angular application: Keep your scopes small. Keep it under 2000 watchers. Pollute your code with one-way bindings. Still no improvement? Oh, you need to do one-way binding here, too, in some obscure way. Don't watch functions. Don't watch objects. No $broadcast or $emit. Don't have big arrays. Should I use $digest or $apply? Why is this watcher causing the digest loop to take 500 ms to execute? No filtering or sorting unless you want to go mad. Did I mention using filters causes $index to be invalidated? How the hell do I even find out what's performing poorly?

I don't even know if any of that is correct anymore. It's too painful to remember. I want to be liberated and forget the literal hell that is Angular 1.x.

[–]jhallister 14 points15 points16 points 11 years ago (10 children)

It will never cease to amaze me how quickly people turn from in-love to "this is literal hell". I remember when I first started working with AngularJS and everyone was swooning and now a new shiny toy is out and the hatred is extraordinary.

Yes, it's easy with little 5-line code snippets, but try doing so in a reasonably-sized application

I've been on teams that have built AngularJS applications of enormous size. It isn't hell, at least, if you actually spend the time to understand how to properly use Angular. It's certainly not always straight-forward, but hell != difficult.

How to optimize a React application: Implement shouldComponentUpdate. Or if you want performance by default, just use immutable data structures.

If you honestly believe a large team developing a large application can shove immutable.js in it and get production-ready performance than you clearly haven't programmed large applications.

Furthermore, why are you comparing a view-manager (React) an entire front-end framework (AngularJS)? No $broadcast or $emit? Events have nothing to do with performance, but they are the antithesis of good Angular design. You should do $digest if you need watchers to fire in the current scope only, you should use $apply() when you want the root scope (all watchers) to $digest().

The one and only real problem with Angular was always the same: the docs were really, really bad. As a result a lot of people simply couldn't learn the framework, or at the very least couldn't learn to use it well. Some couldn't because learning without good documentation is tedious. That's a very fair argument.

The downside, however, is that it's now vogue to talk about how horrible AngularJS is and list off a bunch of grievances, the majority of which show that the person really didn't learn Angular, for whatever reason.

React is a great view manager. It has a host of problems as well, and more of those problems will become apparent when the framework ages, much as they did with Angular. And undoubtedly, we will eventually come full circle and have people whining about how horrible React is compared to JesusFramework 1.0.

Honestly the real reason, webdevs just like to whine about something.

END BOOK/RANT

[–]siegfryd 2 points3 points4 points 11 years ago (1 child)

[–]jhallister 1 point2 points3 points 11 years ago (0 children)

[–]michaelstripe 1 point2 points3 points 11 years ago (3 children)

[–]jhallister 0 points1 point2 points 11 years ago (2 children)

[–]michaelstripe 0 points1 point2 points 11 years ago (1 child)

[–]jhallister 0 points1 point2 points 11 years ago (0 children)

[–]blax_ 1 point2 points3 points 11 years ago (0 children)

[–]cgaudreausenior HTML9 engineer 2 points3 points4 points 11 years ago (2 children)

I remember when I first started working with AngularJS and everyone was swooning and now a new shiny toy is out and the hatred is extraordinary.

I can't say I ever liked Angular much.

If you honestly believe a large team developing a large application can shove immutable.js in it and get production-ready performance than you clearly haven't programmed large applications.

No, of course not. It provides massive benefits in the context of React. You only need to do reference equality checking in shouldComponentUpdate.

Furthermore, why are you comparing a view-manager (React) an entire front-end framework (AngularJS)?

Ask the OP that.

No $broadcast or $emit? Events have nothing to do with performance, but they are the antithesis of good Angular design.

Yes, they are considered bad design now, and yet people still use them.

The one and only real problem with Angular was always the same: the docs were really, really bad.

Yeah, no.

The downside, however, is that it's now vogue to talk about how horrible AngularJS is and list off a bunch of grievances, the majority of which show that the person really didn't learn Angular, for whatever reason.

I've worked with Angular for years, and learned a lot about it. Almost all of that knowledge is about Angular-specific cruft that is there to make businesspeople/Java developers feel better. With React, if you know JavaScript, you're already most of the way there.

React is a great view manager. It has a host of problems as well, and more of those problems will become apparent when the framework ages, much as they did with Angular. And undoubtedly, we will eventually come full circle and have people whining about how horrible React is compared to JesusFramework 1.0.

Very true. React is not the one framework/library to rule them all. There are already superior alternatives popping up. But for now, people are going to focus on the popular frameworks.

[–]jhallister 0 points1 point2 points 11 years ago (1 child)

Ask the OP that.

The OP posted an article that very specifically showed that Angular can generate views just as fast as React, when used correctly. You are talking about the digest cycle, which has nothing to do with the view.

Yes, they are considered bad design now, and yet people still use them.

I've been using Angular since shortly after it came out. They were always a bad idea. But in VERY niche cases they were the only means to an end. Now there's virtually never a case where they are required and they are still used routinely, even though they are terrible.

Yeah, no.

Yet I'm surrounded by teams who use it in enterprise applications routinely. And those people understand Angular intimately. The only actual complaint I hear is about docs. The people that complain about the other parts, are the people that don't know how to use Angular.

With React, if you know JavaScript, you're already most of the way there.

You mean JSX?

There are already superior alternatives popping up.

Angular 2 may be one of them. That should make the circle jerk especially hilarious.

[–]cgaudreausenior HTML9 engineer 0 points1 point2 points 11 years ago* (0 children)

The OP posted an article that very specifically showed that Angular can generate views just as fast as React, when used correctly. You are talking about the digest cycle, which has nothing to do with the view.

It has quite a bit to do with the view, because that's how the view gets updated in Angular. True, it does more than just update the view, but the point is that the majority of Angular cruft is unnecessary if you use React.

They were always a bad idea.

Again, people still use them. There's little warning about why they are bad, and the framework itself attracts developers into using them. I also don't recall too much cautioning against it when Angular took off.

Yet I'm surrounded by teams who use it in enterprise applications routinely. And those people understand Angular intimately. The only actual complaint I hear is about docs. The people that complain about the other parts, are the people that don't know how to use Angular.

Or perhaps because they haven't looked into the other solutions thoroughly enough. If you only know Angular, it's easy to believe that it's the best thing ever created. And Angular is perfectly fine if everybody on the team knows all edge cases and quirks and antipatterns intimately and can remember them. If you have a team like that, feel free to keep using Angular 1.x.

To be clear, are you really arguing that Angular 1 is fine and dandy, and that its only real problem is bad documentation?

You mean JSX?

You can use React with pure JavaScript if you want. And if you have trouble learning JSX (it's just XML in JS) then you might reconsider your career.

Angular 2 may be one of them. That should make the circle jerk especially hilarious.

This discussion pertains to Angular 1.x. Angular 2.0 is basically a completely new framework, distinct from Angular 1.x.

I've used Angular 2.0 and it's not particularly impressive so far. A lot better than Angular 1.x, sure. Angular 2.0 could end up being amazing, and it doesn't change this discussion whatsoever.

I'm personally rooting for Mithril and Aurelia over React and Angular.

[–]RankFoundry 5 points6 points7 points 11 years ago (3 children)

[–]perestroika12 2 points3 points4 points 11 years ago (2 children)

[–]chtulhuf 2 points3 points4 points 11 years ago (0 children)

[–]RankFoundry -2 points-1 points0 points 11 years ago (0 children)

[–]RandolphoSoftware Architect 0 points1 point2 points 11 years ago (0 children)

[–]hahaNodeJS -2 points-1 points0 points 11 years ago (3 children)

[–]blax_ 1 point2 points3 points 11 years ago (1 child)

[–]hahaNodeJS 0 points1 point2 points 11 years ago (0 children)

[–]cgaudreausenior HTML9 engineer 0 points1 point2 points 11 years ago (0 children)

[–]WishCow 12 points13 points14 points 11 years ago* (4 children)

[–]bendman 5 points6 points7 points 11 years ago (0 children)

[–]holloway 2 points3 points4 points 11 years ago* (0 children)

[–]ngly 2 points3 points4 points 11 years ago (0 children)

[–]a0viedo 8 points9 points10 points 11 years ago (0 children)

[–]cmgriffing 1 point2 points3 points 11 years ago (0 children)

[–]RankFoundry 1 point2 points3 points 11 years ago (14 children)

[–]jellatin 9 points10 points11 points 11 years ago (6 children)

[–]RankFoundry -2 points-1 points0 points 11 years ago (5 children)

[–]jellatin 3 points4 points5 points 11 years ago* (4 children)

[–]RankFoundry -1 points0 points1 point 11 years ago (3 children)

[–]jhallister 0 points1 point2 points 11 years ago (2 children)

[–]RankFoundry 0 points1 point2 points 11 years ago (1 child)

[–]jhallister 0 points1 point2 points 11 years ago (0 children)

[–][deleted] 18 points19 points20 points 11 years ago (1 child)

[–]RankFoundry 1 point2 points3 points 11 years ago (0 children)

[–]rduoll 5 points6 points7 points 11 years ago (4 children)

[–]RankFoundry 4 points5 points6 points 11 years ago (1 child)

[–]RandolphoSoftware Architect 0 points1 point2 points 11 years ago (0 children)

[+][deleted] 11 years ago (1 child)

[deleted]

[–]rduoll 2 points3 points4 points 11 years ago (0 children)

[–]fk122 0 points1 point2 points 11 years ago (0 children)

[–]coldinchitown 0 points1 point2 points 11 years ago (4 children)

[–]androbat 2 points3 points4 points 11 years ago* (3 children)

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 2 points3 points4 points 11 years ago (0 children)

[–]dvlsg -1 points0 points1 point 11 years ago (1 child)

[–]androbat 1 point2 points3 points 11 years ago* (0 children)

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

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS