React vs Angular

Fight fight fight

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-opinionated.

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

Found many useful items while researching