NgReact.js

Intro

Facebook's React library is designed to be used as a view component atop other JavaScript frameworks. NgReact is a pair of proof of concept directives that show how React can cooperate with Angular, resulting in performance gains nearly up to 70% (or, well, losses up to 450%).

Installation

bower install ngReact

Set Up

In your HTML:

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/underscore/underscore-min.js"></script>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>
<script src="bower_components/ngReact/ngReact.min.js"></script>

Declare ngReact as a dependency of your Angular module:

angular.module('ngReactDemo', ['ngReact']);

ngReactComponent Directive

Render a user-defined React component via Angular. This got up to nearly 70% faster performance.

You'll have to create a globally available React component, like this iterator example (but it could be anything):

<script type="text/jsx">
  /** @jsx React.DOM */
  window.Repeater = React.createClass({
    render: function() {

      var scope = this.props.scope;

      var rows = _.map(scope.data, function(datum) {
        var clickHandler = scope.$apply.bind(
          scope,
          scope.clickHandler.bind(null, datum)
        );

        return (
          <tr onClick={clickHandler}>
            <td>{datum['0']}</td>
            <td>{datum['1']}</td>
            <td>{datum['2']}</td>
            <td>{datum['3']}</td>
            <td>{datum['4']}</td>
          </tr>
        );
      });

      return (
        <tbody>
          {rows}
        </tbody>
      );
    }
  });
</script>

And then invoke it using the ng-react-component directive:

<table class="table" ng-react-component="Repeater" data="data"></table>

ngReactRepeat Directive

Render a unit of HTML for each entry in a collection just like you use ng-repeat. This got up to 450% slower performance.

You'll use this directive just like you use ng-repeat. Your HTML will look like this:

<table class="table">
  <tbody>
    <tr ng-react-repeat="row in data" ng-click="clickHandler(row)">
      <td ng-bind="row.0"></td>
      <td ng-bind="row.1"></td>
      <td ng-bind="row.2"></td>
      <td ng-bind="row.3"></td>
      <td ng-bind="row.4"></td>
    </tr>
  </tbody>
</table>

And that's it - just make sure $scope.data exists. Please note that this only supports the ng-bind and ng-click directives and the class and id attributes.

With this code in particular, I would love any help I could get in figuring out how my performance is so bad.