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.


7 comments:

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

    ReplyDelete
    Replies
    1. Great Article android based projects

      Java Training in Chennai

      Project Center in Chennai

      Java Training in Chennai

      projects for cse

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete
  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
  3. We provide Live Instructor-Led Mulesoft online training with 100% job Assistance and 24 X 7 Online Support. For more information about mulesoft course.
    mulesoft self learning | best mulesoft training

    ReplyDelete
  4. Really nice post. provided a helpful information.I hope that you will post more updates like this
    msbi online course | msbi online training

    ReplyDelete