
Angular vs. React – the tie breaker - tilt
https://www.airpair.com/angularjs/posts/angular-vs-react-the-tie-breaker
======
Lazare
TL;DR: The author thinks that React is amazing at everything, but detests JSX.
Conversely, he hates Angular but loves Angular's directives. So he hacked
together some code that lets him use Angular directives with React, which he
thinks is great and everyone else in the world detests.

If you are one of the handful of people who love React, hate JSX, love
Angula's directives, but hate Angular...then you will find this article very
agreeable. Everyone else will react with a mixture of laughter and confusion.

Sadly, the actual writing and argumentation is poor; if you don't already
agree with the author's rather unique point of view, this article certainly
won't convince you. It's basically just a puff piece so he can link to his
directives-in-React library; eg, important debates about two-way versus one-
way binding are dismissed with a quick "React has a mixin for that", which
rather misses the point. (Of course, to really discuss this, you'd need to
mention Flux, which is studiously ignores, probably because it would distract
from his obsession with templates.)

In short: I don't think the author understands React, and I doubt they
understand Angular either.

~~~
acconrad
> The author thinks that React is amazing at everything, but detests JSX.
> Conversely, he hates Angular but loves Angular's directives.

The hilarious part about this statement is that React _is_ the equivalent of
the Directive component in Angular...so if you like Angular Directives,
there's basically no reason to use React. I'm seriously wondering why this
post got so many upvotes.

~~~
karmajunkie
I'm stuck on an older version of angular, but have directives become more
composable in the last couple of versions? I had real problems composing them
as element directives, which is the only way i'd be able to swallow the
equivalence argument.

~~~
jmkni
Yes they have, everything is gearing towards component-based architecture in
the more recent versions of Angular, and 2.0 is going to be all about
components. This is a good read - [http://teropa.info/blog/2014/10/24/how-ive-
improved-my-angul...](http://teropa.info/blog/2014/10/24/how-ive-improved-my-
angular-apps-by-banning-ng-controller.html)

~~~
lucisferre
Sorry can you elaborate? How have they become _more_ composable? I don't
recall a point at least post 1.X where they were more or less useful for
composition than they are now.

~~~
jmkni
Sure, there are a lot of subtle things which have been improved in later
Angular versions.

First of all, you don't need $scope anymore in controllers, you can still use
it for functions like $watch, but you don't need to inject it in just to add
properties to your controller, you can just use `this.foo = 'bar';`

You also have the controllerAs syntax which I don't think is present in
earlier Angular versions, which provides a shorthand for your controller, and
bindToController for directives, which allows you to bind attribute values
directly to the directives controller without extra syntax.

If I remember other things I will update this comment.

------
yummybear
Here we go again. This article is so obviously biased it's laughable. Right
from the "Everybody knows about the bumpy road to mastering Angular" to the
cherry picking about templates: "Yeah angular wins, but with this third party
component React ties again!".

Here are some other golden nuggets:

"React makes it simple to control the performance. If you implement
shouldComponentUpdate, you can choose which comparison you prefer - model or
presentation." (Oh, "performance" have never been simpler.)

"React gives you the freedom to choose, without the performance penalty. The
outcome really depends on whether you're a good coder or a bad coder." (So
Angular is slow regardless of you are a "good" or "bad" coder, but React
performance depends on you "goodness" \- check)

"When something doesn't work in Angular directives, one option is to re-write
the code in a different way because there's so much magic going on." (Or you
could - like try to find out why something in your directive doesn't work?)

~~~
couchand
I guess I'm not clear on why the statement _Everybody knows about the bumpy
road to mastering Angular_ shows a bias. I've never met a dev who found
Angular easy to pick up. In fact, the rest of the original sentence describes
exactly how learning Angular goes for everyone I've spoken about it with: _it
's quick to get started, then it improves and deteriorates as you go along_.
Emphasis on the "deteriorates".

EDIT: Moreover, your quotation about performance is from the section on "model
complexity", where the original authors were far too generous to Angular. The
model of an Angular app is tightly coupled to the Angular system, whereas a
React app model is just a POJO.

~~~
saiko-chriskun
Angular has been one of the easiest to pick up javascript frameworks I've
worked with.

~~~
couchand
Easy to start, sure, but try building a complete non-trivial application from
scratch.

~~~
ak39
What would you conclude to be the single most important
issue/hurdle/constraint about Angular when moving from simple app to a non-
trivial application? (Genuine question)

~~~
couchand
Inertia. The best practice for many reasons is to structure your app as lots
of little components, and doing that in Angular is too hard, mostly because
every component is at least three files, likely spread out in different places
in the folder structure. The overhead of refactoring a component into smaller
pieces is huge, since you have to independently split the template, the scope,
and the dependencies.

All of the things that seem useful about Angular become a burden at scale. ng-
repeat is my favorite example: try repeating more than a few hundred non-
trivial components and you'll quickly choke the browser. You end up having to
spend most of the application development time figuring out how to do things
in a way that doesn't make Angular too upset.

------
bryanlarsen
If you think you need something like this, I highly recommend that you take a
few steps back and rethink how you are doing things.

One of the nicest things about designing a React app is that React makes it so
easy to divide your app up into tiny little components that compose and reuse
well, and are really easy to understand. Where an angular app might have 5
different controllers and accompanying templates, a similar React app might
have 50 different components.

One of the reasons that it's so easy to split off a new React component is
because JSX is inline. Putting that into a separate file increases the
impedance and maintenance burden substantially.

In other words your

    
    
      var createItem = function(itemText) {
        return <li>{itemText}</li>;
      };
      return <ul>{this.props.items.map(createItem)}</ul>;
    

Is much more likely to be:

    
    
      return <MyList items={items} />;
    

who wins now?

~~~
couchand
When writing React code I'm always accidentally fighting to make things more
complicated than the system _wants_ , naively opting for the former version,
and only after some refactoring settle on the latter, simpler (but more
numerous) representation.

When writing Angular code I'm always fighting to make things simpler than the
system _wants_ , trying to break my code up into more distinct components, and
only after refactoring or hitting my head against the wall settle on the more
complicated (but fewer in number) representation.

That is, I think, why the comparison between the two is valuable: not because
they are libraries that fill the same niche, but because they encourage
distinct development styles.

~~~
Guillaume86
I think the major achievement of React is the API design: minimal, easy to
grasp, composable and make it hard to do stupid things (overly complicated
code).

------
matthewmacleod
I hate calling this stuff out, but this is stupid. React and Angular are two
totally different things. React isn't even a framework. It's like all that
awful "nodejs vs. Rails" stuff from 1-2 years ago.

------
couchand
Though I understand the complaints about this not being the most apples-to-
apples comparison, I do think there is value in this article. For instance,

 _The best feature we found with React is that never, even once, did we have
to read its code._

Developing Angular applications is a lesson in learning how Angular works,
which means you're not learning how the software should work. You need to know
far too much about the internals of Angular to successfully build applications
with it, which means it's failed as a framework.

~~~
VeejayRampay
The simple presence of "link" and "compile" thingies in 90% of the directives
is a testament that Angular does spill its guts and is not really simple and
intuitive. It annoys me to no end because in the end 95% of developers will
end up copy-pasta'ing stuff from the (horrible) docs or StackOverflow without
really getting it. And the thing is, they're right, they should never have to
care about post-link and compile and whatnot.

I mean don't get me wrong Angular is a great framework that opened a lot of
possibilities for a lot of people and I'm glad it exists but it's a strange
mix of "dead simple" and "oh my god kill me now" levels of sophistication.

~~~
WhitneyLand
ugh, I down voted you but meant to up vote. will try to see how it can be
fixed, sorry, fingers too big.

~~~
couchand
To quote every HN comment thread ever, "I wish there was a way to add some
space between those buttons."

------
dubcanada
Ignoring the bias of this article, this comparison makes no sense. AngularJS
is a giant framework with all sorts of tools and stuff. ReactJS is a view/two
way binding library.

If you are going to compare something, why not do it correctly, and compare it
against like a Flux or something.

------
xixixao
This is such a step back, it's a completely wrong approach trying to mimick it
in React:

    
    
        <ul>
          <li ng-repeat="item in items">{{item}}</li>
        </ul>
    

The equivalent in ES6 (which is React's preferred way to do things now):

    
    
      return <ul>
        {this.props.items.map(item => <li>{item}</li>)}
      </ul>;
    

It's just code! This gets better as you use a better language than
JavaScript[0]:

    
    
      <ul>
        {<li>{item}</li> for item in @props.items}
      </ul>
    

Shorter, way more explicit, no new attributes to learn. Enjoy.

[0] [https://github.com/jsdf/coffee-react](https://github.com/jsdf/coffee-
react)

------
robotnoises
Fun read, though it seems that either React is almost always the better choice
over Angular 1.*, or this author just prefers React over Angular.

I'm thinking the latter is the more likely of the two, but consider my
interest piqued. I am a full time Angular developer, but for some time now I
have felt obligated to try out React.

Side question: does anyone have any real experience with integrating Firebase
with React a la ReactFire? I am currently working on an early-stage app using
AngularFire, but it's still early enough to change if given a compelling
reason to do so.

~~~
dubcanada
I'm going to be a little blunt and say this.

You're a full time Angular developer, you obviously know more about Angular
then you do React. So why would you switch to using React? At the end of the
day both can do the job just as well.

~~~
wmil
You need to keep yourself marketable. There are plenty of interviewers who
expect most good JS devs to have React knowledge. It's the hot framework right
now.

~~~
bryanlarsen
Angular 2.0 takes a lot of the good stuff from React so I think it's much more
pragmatic for the average Angular dev to wait for that and learn that first.
If Angular 2.0 fizzles, then learn React.

------
vkjv
I've always thought that flow-control in XML / templates is very messy. That's
one of the things that I really like about JSX. It's a very simple, easy to
understand transformation to function calls to make HTML generating code look
more like HTML, but it's just JS. You don't need to invent flow control
attributes on HTML that are really JS, because you are just using JS.

This completely removes that. I'm glad it works for you though and happy
hacking!

------
hokkos
I don't see the point of templates in react, it is just another DSL to
remember and to easily forget, javascript is better, allow you to build all
the most complex things that templates can't. Also template have a price,
another element in the hierarchy, it means allocation, vdom diffing, when an
if or a forEach in javascript is simpler and less heavy. Not having template
is a win.

------
Vespasian
I see the points why React may be a good choice. Having only worked with
Angular so far I really like it's dependency injection and the possibility to
make use of services and directives.

However from what I understand React does not implement these features so what
additional libraries could be used to keep these mechanisms?

Edit: I'm working in Research so my projects typically have a limited scope
and user base.

~~~
lingojs
Directives are replaced by React components. I would argue, IMO, that
directives are actually a half-assed implementation of components.

In terms of services, I would recommend using Flux to perform actions / store
your state. This is what a lot of developers are leaning towards these days.
There was a great talk at React Conf about Reflux, I've never used it, but the
presentation has convinced me to try it out on my next project:
[https://www.youtube.com/watch?v=xsSnOQynTHs](https://www.youtube.com/watch?v=xsSnOQynTHs)

When you build with React, imagine building an application in Angular using
only Directives. It isn't that simple, but that is sort of the idea with React
components.

I started with Angular (and still work day to day with it at work) but if
someone asked me how I would architect an application tomorrow, I would go
with Flux + React + ES6, no questions asked. Also, Angular2 is heavily
influenced by React, so learning React now will allow you to have a better
understanding of Angular2.

~~~
tilt
Just to point out that Dan Abramov's talk is about Redux, his implementation
of Flux (not Reflux)

[https://github.com/gaearon/redux](https://github.com/gaearon/redux)

------
vcarl
One benefit of React that I haven't seen discussed: Learning it made me feel
like I was improving as a programmer. The best way to improve React
applications is to learn more about the concepts behind function reactive
programming, which is a skill that transfers far beyond the world of frontend
development.

------
andybak
Did anyone make it to the end?

The punchline is critical - the article is really about this:
[http://wix.github.io/react-templates/](http://wix.github.io/react-templates/)

which I must admit is intriguing

~~~
savanaly
Nope, I did not make it to the end haha. Titling your blog post "Angular vs.
React" is a sure way to get clicks, but also a sure way to make the large bulk
of the discussion around it be about the rivalry and not about the actual
content of the post.

------
omouse
It's an interesting comparison but not something I would put much weight into
when it comes to making a decision for my next project. Both React and
AngularJS can be introduced progressively so as a 20% time project introducing
either of them into existing projects wouldn't be too bad and you can make
your own informed opinion then.

------
pygy_
to @asanagi who's shadowbanned: [this comment of
yours]([https://news.ycombinator.com/item?id=9428765](https://news.ycombinator.com/item?id=9428765))
was flagged, I suppose by users, and you've been out ever since.

You may want to appeal to hn@ycombinator.com, your comment wasn't egregious
IMO, but the snark made it look trollish.

Looking at your comment history, I see other comments that would probably have
gotten you (shadow)banned as well.

[https://news.ycombinator.com/item?id=9850480](https://news.ycombinator.com/item?id=9850480)

[https://news.ycombinator.com/item?id=9766989](https://news.ycombinator.com/item?id=9766989)

You may want to tone down the aggressiveness in some of your posts.

Edit: addressing your concern about gender, since I feel to some extent
sympathetic to what you feel, but not to your reactions.

People who systematically graft a men (agressors) vs women (victims) on topics
like domestic violence or prostitution do grind my gears, since it's only part
of the narrative and they tend to be blind to the rest of it.

That being said we've been through a heavily misogynistic period (see the
women's right movement in the 20th century or this story about raganwald's
mother: [http://braythwayt.com/posterous/2012/03/29/a-womans-
story.ht...](http://braythwayt.com/posterous/2012/03/29/a-womans-story.html)),
and, due to networks effects, it requires sustained action to correct (see
[http://ncase.me/polygons/](http://ncase.me/polygons/)), removing the old
biases is not enough.

Still, invoking imaginary hard core feminists in that thread about positive
discrimination towards women in academia was a bad idea. Without more context,
I would have flagged it if I had seen it back then.

------
matthuggins
Oh god, I didn't think it would be possible to dislike react, but you went and
threw a hideous renovating language on top of it. This makes it seem like you
don't understand how components work. Why even use react in the first place
then?

------
Cthulhu_
Yet another Angular VS React comparison that misses the blatantly obvious -
the two are not the same. React is a UI component, Angular is a complete
framework. Please stop.

------
akilism
There is no best. There is just a best for you/your style.

------
bite_victim
Angular vs Ember perhaps would be more appropriate.

~~~
aikah
Ember choices didn't make sense to me until I learn Rails.

I love Rails,I just learned it recently[1] but Javascript is no Ruby. Ember is
SPA oriented.

Angular is much more lightweight. It has good integration with legacy jquery
plugins and can be used as a widget in a page as well as in a single page
application. Angular 1 doesn't rely on a compiler or an complex asset pipeline
which makes it way more simple than Ember,React and co.

[1]: After hearing for years that Rails was bad, which it isn't at all, on the
contrary, I would definitely write a large web app like a SHOP or a complex
CRM with it. On the other hand on the client side, I prefer widgets to SPA
since SEO is a core requirement.

------
rajington
NOTE: This article seems to be a couple of MONTHS old. Look at the age in the
comments section.

------
programminggeek
Real Question: Why would you use these instead of something like Knockout.js?

~~~
disease
Because it's from Microsoft and they are EVIL!

Seriously though, I've worked on projects with Angular and Backbone and have
messed around with React, but every project both big and small that I have
started has ended up using KnockoutJS.

It is easy to learn, performs amazingly well even with tens of thousands of
records, has extremely powerful custom bindings to extend its functionality
and even has excellent templating to boot!

Of course in the end people (including myself) just go with what they know
and/or want to learn - so which JS framework is "the best" is just a matter of
opinion. Having said that, I'd love to hear from someone that has years of
Knockout experience explain why they think it is inferior to any other library
OR framework.

------
xrd
I wish there were something here about testing. Last I looked, Angular has a
better testing story than React. This is one thing I like about Angular a lot,
the importance the authors put towards making testable JS code.

~~~
insin
James Shore (of Let’s Code: Test-Driven JavaScript) has Testability as part of
the criteria for his An Unconventional Review of... series of posts.

An Unconventional Review of Angular JS:
[http://www.letscodejavascript.com/v3/blog/2015/01/angular_re...](http://www.letscodejavascript.com/v3/blog/2015/01/angular_review)

An Unconventional Review of React:
[http://www.letscodejavascript.com/v3/blog/2014/09/react_revi...](http://www.letscodejavascript.com/v3/blog/2014/09/react_review)

------
davidhariri
This is a very __bad __article. I 'm not sure I really have more to say about
it. Shocked to see this at the top of HN.

~~~
aikah
What do you expect, HN is a bit of a "fashion magazine" for coder. "Angular?
it's so 2013" /s

