React vs Angular

Fight fight fight

Created by Gavin Mogan / @halkeye

Angular is a very opinionated framework.

Provides you with a lot of things, kinda like rails, but if you need to do things in way it doesn't support, then you spend a lot of time fighting with it.

ng-repeat confuses everyone

React is very non-opionated.

Doesn't do a lot for you, but very plugin friendly.

Data only flows one way.

What react doesn't do

  • Validation
  • MVC
  • Templates
  • Anything other than view layer
  • Support browsers before IE8

What react does do well

  • Views
  • Server side Rendering
  • Really strongly pushes for reusable components
  • Reusable Components
  • Nested Components
  • Testing

Watches, ewwwww

With Angular if you wanted to change one value when other deep linked value changed, you'd have to use watches.

This would lead to very weird conditions, $apply statements wrapping code, etc

React only re-renders with attributes change, or state changes

No deep linking

Directives Vs Components - Angular

  • In an attempt to make templating less confusing, angular has made everything into html and/or attributes
  • Angular has directives, but are also kinda confusing
Simple Example:

<html ng-app="testApp">
  <body ng-controller="testController">
    <hello-world name="{{name}}"/>
var app = angular.module("testApp", []);
app.controller("testController", function($scope) { $ = "Gavin Mogan"; });
app.directive("helloWorld", function() {
    return {
        restrict: "E",
        template: "<div>Hello, {{name}}!</div>",
        scope: { name: "@" }

Directives Vs Components - React

  • Everything is a component/element
  • First class citizen
  • Data is fetched from elsewhere and rendered through components.

  <div id="main"></div>

var React = require('react');
var HelloWorld = React.createClass({
  render() {
    return <div>Hello,{}!</div>;
React.render(<HelloWorld name="Gavin Mogan" />, document.body);

React - Nesting is easy and Encouraged

var React = require('react');
var Person = React.createClass({
  render() {
    return <div>{}!</div>;
var HelloWorld = React.createClass({
  render() {
    return <div>Hello, <Person person={this.props.person} />!</div>;

Passing data can be tedious though

var React = require('react');
var Person = React.createClass({
  render() {
    return <div>{}!</div>;
var HelloWorld = React.createClass({
  render() {
    return <div>Hello, <Person {...this.props.person} />!</div>;


Facebook has provided first class unit testing tools

var shallowRenderer = TestUtils.createRenderer();
var component = shallowRenderer.getRenderOutput();

Then just make sure things are as you expect



Angular - ng-repeat

Comment {{$index}}:

React - Raw Javascript

var comments =, idx) {
  return (<div>
    Comment {idx}: 
    <Comment {...comment} />

Dev Tools






  • browserify
  • npm
  • webpack
  • babel
  • eslint

Cool Modules - React-Router

Can act as a controller like apparatus

Supposed to be IE8 compatible again next major release (with polyfills)


Cool Modules - TransitiveNumber


Cool Modules - ReactSpeech

 <Speech text="I have the default settings" /> 

Cool Modules - MaskedInput

 <MaskedInput pattern="1111 1111 1111 1111" name="card" size="20" onChange={this._onChange}/> 

Bonus - NPM and shims are our friends

  "bootstrap-sass": "^3.3.4",
  "consolelog": "^2.1.3",
  "es5-shim": "^4.1.5",
  "es6-shim": "^0.31.3",
  "flux": "^2.0.3",
  "flux-dispatcher": "^1.0.6",
  "flux-store": "^1.1.5",
  "font-awesome": "^4.3.0",
  "html5shiv": "^3.7.2",
  "i18next-client": "^1.9.0",
  "isarray": "0.0.1",
  "json-loader": "^0.5.2",
  "json3": "^3.3.2",
  "mirrorkey": "^1.2.0",
  "object-assign": "^2.0.0",
  "react": "^0.13.3",
  "react-bootstrap": "^0.23.1",
  "react-maskedinput": "^2.0.0",
  "react-router": "^0.13.3",
  "react-toggle": "^1.2.3",
  "reqwest": "^1.1.5",
  "store": "^1.3.17",
  "whatwg-fetch": "^0.9.0"



Found many useful items while researching