Recently I tweeted…

and it’s the truth, I feel like every 5 seconds there is an article coming out comparing Angular to React! I know you’ve felt the same thing! If you are new to the game, its can seem overwhelming with all these different opinions and whatnot.

I have to give a shout out to Angular vs React: There will be blood one in particular, I just love his imagery haha! To salute that, I added this to mine…

At the surface it seems like a worthy comparison, they are both popular front-end development frameworks but they solve different cases. Its about using the right tool for the job and knowing when to use each!

Some background…

I’ve been developing a large web app using Angular 1.x for the past 2 years. About a year ago, I sprinkled in React to handle drawing SVGs for a charting visualization. It was AWESOME; super fast and predictable! Others had the same idea and create projects like ng-react and Angular + React seed projects to fill this gap.

Recently, I had a green field project that would be embedded in my Angular 1.x project. I started with React ( duh! its what everyone is tweeting about! ). Next, I quickly added Redux to handle state management ( since at its core React is really just a widget framework ). I realized I had no server communication, so I needed to add superagent to handle API requests. Then I realized, Redux doesn’t handle Promises so I needed to add a middleware for that. You can see where this is going right? It never ends! The amount of boilerplate I had to wire together is insane and each component in that boilerplate changes every day ( no kidding in some cases )! Its so common the creator of redux even recognizes it:

After that background you might think I’m a Angular fanboy, honestly I don’t care. Its about the best tool for the job. Lets talk about how you should really be comparing these 2 frameworks!

How to really compare React to Angular!

So in order to accurately compare Angular ( 1 or 2 ) to React you need to add:

Redux

Redux-Promise

Redux-Thunk

React-Redux-Router

Redux-Form

React-Redux

ImmutableJS ( not really but kinda… )

React-Router

React-Dom

Superagent / Fetch / etc

classnames ( not really but kinda… )

…and the list goes on! And this is awesome that its so pluggable! But does anyone actually compare React to Angular with all that? As I continued to dig in, the boilerplate just continued to grow. And its not just me, look at all the boilerplates out there that accomplish what Angular does out of the box.

This makes me feel like comparing Angular to React is more like comparing Java to NodeJS. Java is a monolithic framework vs the micro framework of Node. Now if you are reading this, you are probably like Node Rocks, f*** Java! but thats not the point I’m making here…

Both are good…but know when to use them!

Both frameworks are great! Angular has adapted many of its shortcomings in v2 and React continues to evolve to be a high performance DOM framework. If you aren’t sure when to use what, you really need to look at the problem you’re trying to solve and your project/team.

How big is the team and how many are dedicated to just JavaScript?

Whats the longevity of the project?

Are you building a consumer or enterprise product?

To be honest, if you are building a large-scale product with a long shelf life ( and many people will probably argue with me on this but this is my opinion ), you should look at Angular 2 instead of React. Right out of the box with Angular you get:

MV* Framework

Routing

Animation

Touch

HTTP / Middleware

Testing

in one package with little boilerplate. Angular2 is giving React a run for its money in performance too!

React is a great choice too! It has really shaken the norms of how we do JavaScript, a great tweet Eric Elliott said recently:

I totally agree with him, React has some strong points that beat Angular 1/2 like:

Server-side rendering aka Isomorphic ( < i hate that word… )

Native Mobile

Lightweight DOM Framework

and there are many more!

Finishing up

Just take a step back from the hype and see what fits your problem best first! If you are truly wanting to compare them you should compare things like DOM render/update speeds. Frameworks like Aurelia and Ember are much closer to what Angular is trying to accomplish and a worth comparison.

Feedback?

I would love to hear feedback on why you think otherwise or if I missed something! Follow me on Twitter and Github for more JavaScript opinions/projects/etc.