Why We May Ditch AngularJS For React

Our team has been building quite a few things with AngularJS, from our products (SweepBoard and devo.ps) to client work for the World Bank. It was a great step forward from backbones.js for building static clients and single page apps.

While building these applications we ran into some performance issues known of the the AngularJS community; AngularJS two way data-binding is at the same time a great strength and its Achilles heel. Dealing with complex and/or large collections of items can significantly slow down rendering. We started looking for a solution to this problem and stumbled upon things like Thierry Nicola’s post (I strongly recommend reading it) about his use of React to improve AngularJS rendering time.

With more recent news of well known players move to React, like GitHub’s Atom editor, the Wiredcraft team is getting serious about making the switch as well.

Dependencies and Components

We’ve been using Node.js for about 3 years now, going as far as co-organizing Javascript conferences in China in Shanghai, Beijing and more recently Hangzhou.

npm is a big reason why we’re so inclined to use Node.js. So much so that we tried to use it in the front-end with AngularJS using browserify as a way of handling dependencies and components. Truth be told, it never felt right; AngularJS dependency injection seems to fundamentally oppose browserify.

In comparison, React is a lot more fitting; everything is a component, you can simply roll your own and import it with a simple require('my-component'). It even provide a commonjs module allowing you to install through npm.

Virtual DOM

If you are experiencing performance issues, “virtual DOM” may be enough of a reason to try React. It provides you with a lightweight implementation of the DOM and events system. Instead of dealing with the browser, you manipulate an in-memory version of the DOM, which is significantly faster.

With AngularJS, data that is binded to the DOM will trigger a full render of the page whenever it changes. That’s what makes it expensive for large or complex sets of data. With the virtual DOM, you don’t do this, instead you work entirely in Javascript and then apply only the changes (thanks to React’s diff algorithm). From React’s own documentation:

React uses a virtual DOM diff implementation for ultra-high performance. It can also render on the server using Node.js — no heavy browser DOM required.

If you want to learn more about it, I recommend you read Pete Hunt’s The Secrets of React’s Virtual DOM (who happens to be React’s lead developer).

Learning curve

Getting started with AngularJS means you need to absorb a lot of specific concepts: directives, filters, factories, services… Combined with some conventions, you get a lot of magic out of it. The problem is, magic has a price. Debugging can be frustrating when you’re still an AngularJS newbie.

React on the other hand has a fairly straightfoward API: create an element with React.createClass() and then render it on the page with React.renderComponent(). No need to chase code over in 3 different places to understand what’s happening. Now, this is an intentional simplification, but getting started with React will most likely be a lot easier than with AngularJS.

A few more things

Like any deal that seems too good to be true, there are a few drawbacks:

• React positions itself as the “V” in MVC; you’ll have to write the “M” and “C” by yourself. Though there are some pretty good third party libraries like react-router-component or react-router to deal with this.

• The recommended application architecture for React, Flux, is actually a tad complicated. If you check out the to-do list example, you’ll see that it’s definitely not geared towards simple applications. You’ll need to learn about concepts like dispatcher or store.

We’re still confident that the advantages far outweigh these few issues, which moreover will likely disappear as React gains adoption.

For those of you interested in digging further, here are a few things worth reading:

• http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look
• http://jonykrau.se/posts/the-value-of-react
• http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/
• http://blog.andyet.com/2014/08/13/opinionated-rundown-of-js-frameworks