Why We May Ditch AngularJS For React20 Sep 2014
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 about his use of [React](http://facebook.github.io/react/) to improve AngularJS rendering time (I strongly recommend reading it).
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
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.
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.
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).
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:
This post was original posted on wiredcraft blog.