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">
  <head></head>
  <body ng-controller="testController">
    <hello-world name="{{name}}"/>
  </body>
</html>
var app = angular.module("testApp", []);
app.controller("testController", function($scope) { $scope.name = "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.
Example: 

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

var React = require('react');
var HelloWorld = React.createClass({
  render() {
    return <div>Hello,{this.props.name}!</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>{this.props.person.name}!</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>{this.props.name}!</div>;
  }
});
var HelloWorld = React.createClass({
  render() {
    return <div>Hello, <Person {...this.props.person} />!</div>;
  }
});

Testing

Facebook has provided first class unit testing tools


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

Then just make sure things are as you expect


expect(component.props.className).to.equal('MyComponent');

Loops

Angular - ng-repeat




  Comment {{$index}}:

React - Raw Javascript


var comments = this.props.comments.map(function(comment, idx) {
  return (<div>
    Comment {idx}: 
    <Comment {...comment} />
  </div>);
});
<div>{comments}</div>

Dev Tools

Angular

ngmin/ngannotate

React

Reactify/jsx

General

  • 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)

React-Router

Cool Modules - TransitiveNumber

<TransitiveNumber>2:00</TransitiveNumber>
TransitiveNumber

Cool Modules - ReactSpeech

Demo 
 <Speech text="I have the default settings" />
react-speech

Cool Modules - MaskedInput

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

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"
}

THE END

More

Found many useful items while researching