Angular 1 vs React

Question

I have been using Angular 1 for a while now and am now starting to learn React but cannot figure out the main difference between the two. Seems like React is all about creating components, but can't we do the same in Angular using directives? I'm still at the very beginner level of react (learning through codeschool).

It would be very helpful if someone could provide one case and show me how to solve it using angular 1 and then react.

Below is what I've done in React so far (creating a CommentBox component that will display comments from the Comment component). How could I do this in angular 1 for example so I can see the difference.

CommentBox Component:

class CommentBox extends React.Component {

  render() {
    const comments = this._getComments() || [];

    return(
      <div className="comment-box">
        <h3>Comments</h3>

        <div className="comment-list">
          {comments}
        </div>
      </div>
    );
  }



  _getComments() {
    const commentList = [
      { id: 1, author: 'Clu', body: 'Just say no to love!', avatarUrl: 'images/default-avatar.png' },
      { id: 2, author: 'Anne Droid', body: 'I wanna know what love is...', avatarUrl: 'images/default-avatar.png' }
    ];

    return commentList.map((comment) => {
      return (<Comment
               author={comment.author}
               body={comment.body}
               avatarUrl={comment.avatarUrl}
               key={comment.id} />);
    });
  }

}

Comment Component:

class Comment extends React.Component {

  render() {

    return(
      <div className="comment">
        <img src={this.props.avatarUrl} alt={`${this.props.author}'s picture`} />
        <p className="comment-header">{this.props.author}</p>
        <p className="comment-body">
          {this.props.body}
        </p>

      </div>
    );
  }

}

Answer 1

Bit of background I'm primarily a Angular developer but have dabbled a bit with React and have friends who use React heavily at their day jobs so have some exposure to the differences.

Differences from a developer perspective seem to mostly be that Angular gives you some helper services for common front end tasks and has a built in mechanism for monitoring the data model and updating the view (data binding) and has a built in mechanism for dependency injection ($injector).

React will typically get better performance since it has a virtual in memory copy of the DOM that it applies changes to first then it diffs that against the previous virtual DOM to see what actual changes need to be applied to the real DOM and then it applies those changes (DOM access like reading the size of elements is costly). The flux way of managing the data model through actions is slightly different and typically gets better performance than the digest cycle that runs in angular where all the registered watchers get triggered to check if their value has changed any time a digest occurs (digests/apply cycles in angular can be applied to a scope but ones from $http calls and the like trigger it on $rootScope so all watchers from any interpolations or manually set up watchers in directives have to run their check function to see if the value has changed and do a comparison).

Angular 2+ they played with taking the VirtualDOM concept but I'm pretty sure they ultimately decided it wasn't worth the complexity for the time gain after they had already optimized the digest or eliminated the old process for updating watchers and replaced it with a one way data flow (similar to how flux is working from what I gather). Upgrading a ng1 app to ng2 or a component from ng1 to ng2 should see about a 7x performance gain on the digest cycle based on what they showed in ng-conf a while back. You can also code things in ng1 to avoid having thousands of watchers in the view but it takes more work than just doing everything the naive way.

angular.module('myApp', [])
  .directive('comment', function(){
    return {
      restrict: 'A', //Will match directive name as an attribute <div comment>
      scope: {commment:'='},
      template: `<div className="comment">
        <img src="{{comment.avatarUrl}}" alt="{{comment.author}}'s picture" />
        <p className="comment-header">{{comment.author}}</p>
        <p className="comment-body">
          {{comment.body}}
        </p>

      </div>`,
     // either use babel for this or typically have the
     // template in a separate file with a templateURL pointing to it,
     // could also use the old array.join() way of breaking
     // the template string across multiple lines
    }
  })




.directive('commentBox', function(CommentsService){
    return {
      restrict: 'E', //Will match the directive against an element <comment-box></comment-box>, uses camel case to hyphen case from JS->HTML
      template: `<div comment="commentDatum" ng-repeat="commentDatum in comments"></div>`,
      link:function(scope){
        CommentsService.getComments().then( response => scope.comments = response.data)
      }
    }
  })

  .service('CommentService', function($http){
    return {
      getComments: () => $http.get('mysite.com/commentsEndpoint')
    }
  }) //I did some half baked ES6 version here but could define a class and use that for the service instead is a bit cleaner but maybe clearer this way that $http is being injected by the framework, the CommentService is also automatically injected into the directive since we list it in the params.

Usage in the container looks like:

<comment-box></comment-box>

Also to add you can use Angular and React together but have never tried it myself so can't speak to how that works in reality.