Thursday, August 13, 2015

React.JS with Angular.JS : The combination to improve performance

AngularJS is great front end MV* framework. The most popular feature of AngularJS is its two-way data binding mechanism and this is the strongest point behind its lack of performance.

 Here I am talking about scenario where we need to bind huge amount of data using ng-repeat. To overcome this performance backlog ,we can use React.js which is product of Facebook and they are using in production.

In this article, we will see one very simple example of React.JS with AngularJS.  Have a look on following code.

<html ng-app="fasterAngular">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <script data-require="angular.js@@" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="react@@*" data-semver="0.10.0" src="http://fb.me/react-0.10.0.js"></script>

    <script>

        var ReactComponent = React.createClass({
            displayName: 'ReactComponent',
            render: function () {
                return React.DOM.div(null, this.props.framework);
            }
        });
       

        angular.module('fasterAngular', []).
          controller('mycontroller', ['$scope', function ($scope) {

          }]).directive('fastReact', function () {
              return {
                  restrict: 'E',
                  scope: {
                      framework: '='
                  },
                  link: function (scope, el, attrs) {

                        // Render React virtual DOM
                        React.renderComponent(
                          ReactComponent({ framework: 'I am React DOM' }),
                            el[0]
                         );
                  }
              }
          })


    </script>


</head>
<body>

            <div ng-controller="mycontroller">
                <fast-react></fast-react>
            </div>
</body>
</html>


Here is output.


3 comments:

  1. Thanks a lot for sharing this amazing knowledge with us. This site is fantastic. I always find great knowledge from it.

    ReplyDelete
  2. very informative blog and useful article thank you for sharing with us , keep posting learn more Technology

    React js Certfication Course

    Angularjs Online Training

    ReplyDelete