AngularJS vs ReactJS

Asped picture Asped · Jan 26, 2015 · Viewed 19.1k times · Source

I am deciding which JavaScript framework to use for my new web application. I wanted to use Angular, but recently heard about React. The problem is - I have not found a really good comparison between the both. Most of the articles which do a comparison are "pro-react", and are not a big help comparing, but only showing why react is better. e.g.

https://www.codementor.io/reactjs/tutorial/react-vs-angularjs http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look

Any real experience, or comparison which states the pros and cons of both? Thanks for your input

UPDATE - Maybe a small example would help, how to do the same in both frameworks and compare the pros/cons

Example: I have list of companies in a table. Each row is 1 company, each column is some info about the company (name, address, number of employees..) There are a lot of entries, and I need to do some paging and sorting (server side)

Answer

Breno Ferreira picture Breno Ferreira · Jan 26, 2015

I have a reasonable experience with React, and basically none with Angular. So what I'm going to say about Angular is from things I read and heard from other people.

React

Pros

  1. Easy to learn
  2. Isolated components are easier to maintain
  3. The "Always Re-render" way of React is nice to keep it easier to understand when things get complex
  4. Flux is a really good alternative to the MVC pattern. The one-way data flow helps with maintainability and keeping data and DOM elements consistent. Combined with Immutable.JS data structures, it's the cherry on top of the cake :)

Cons

  1. Doesn't play nice with DOM manipulation libs (e.g.: jQuery)
  2. It really changes the way you do things, particularly if you're using Flux, which is good, but it takes a little getting used to.
  3. I found some cases where the re-rendering every time slows down the app when the components handle a large dataset on the render method. Optimising performance in these cases can get a little bit tricky.

Angular

Pros

  1. Good documentation
  2. Members of the community are helpful (it's easy to find good answers here on SO).
  3. Two-way data binding makes some things really easy to implement

Cons

  1. Performance issues: To make two-way data binding it has to check for changes in your data model. It also has to parse your HTML to make it's magic work. This slows things down, and, if the app is running on a mobile device, it drains the battery faster
  2. Logic in spread across HTML and JS: code harder to understand, maintain and debug.
  3. v2 coming to fix some issues, but making all v1 code obsolete