The recent MVC landscape with Angular+React and Backbone+React

Sun Jun 8, 2014 0

This post might bring in some arguments for both parties that favour one of the framework then the other, but this will be a worth while comparision to take a look at the recent MVC landscape. Just to clarify - I'm still relatively new to Angular.

Lets be clear - React is a component that is designed and focused to replace the 'V' component under a MVC framework. The most recognise MVC frameworks are Backbone & Angular, and it's starting to increasingly standout that React is able to replace the 'V' component due to its virtual dom design, minimal exposure of real dom elements and data-binding handling. It is also proven from this post that Angular + React provides the fastest rendering.

To achieve fast render and low inital load speed, the design of the component hierarchy structure is relatively important. In Angular, React needs to be initiated at the controller. For Backbone, on the other hand needs to be initiated at the router.

Link to Angular+React Demo
Link to Backbone+React Demo

//Angular Example
angular.module('fasterAngular', []).
controller('mycontroller', ['$scope', function($scope){
   $scope.framework = 'ReactJs';
   $scope.data = [];
   // Fill the data map with random data
   $scope.refresh = function(){
       for(var i = 0; i < 1500; ++i) {
           $scope.data[i] = {};
           for(var j = 0; j < 5; ++j) {
               $scope.data[i][j] = Math.random();
           }
       }
   }

   $scope.refresh();

   $scope.$watchCollection('data', function(newValue, oldValue){
       React.renderComponent(
           MYLIST({data:newValue}),
           document.getElementById("fastRepeatArea")
       );
   })
}])

//Backbone example
$(document).ready(function () {
  new (Backbone.Router.extend({
    initialize : function () {
        var data = [];
        var refresh = function () {
          for(var i = 0; i < 1500; ++i) {
                  data[i] = {};
                  for(var j = 0; j < 5; ++j) {
                      data[i][j] = Math.random();
                  }
              }
          React.renderComponent(
            MYLIST({data:data}),
            document.getElementById("fastRepeatArea")
          );
        };
        refresh();
        $('button#refreshBtn').click(function () {
          refresh();
        });
    },
  }))();
});

React is initiated under the same flow and it would achieve the same render speed. This example can be further improved by delegating the data change event and click event to React or using mixins to listen to partial changes. Instead of having it through the Angular controller or Backbone router.

At this point, Angular+React and Backbone+React would be equivalent. Now lets take a look at the required components and initial loading speed.

According to Mithril, Angular takes 7.49ms to load and Backbone takes 18.54ms to load. Another important to note is Backbone is light weight but it still depends upon underscore & jquery. Those add up during initial script request!

I believe this pretty much dictates which combination is the go to framework for heavy web apps. Every second counts to keep your user on your site!

The contender in the market called Facebook React, I'll just call it React for short. React is a 'View' Framework. So in terms of a MVC, its the 'V' Component. Suprisingly React further simplified the entire landscape of 'View' framework. It only expose the real nodes that you have

Lets see how this will look like in React, ive also included the propeller react.backbone. It allows us to feed in backbone models into react and databind with mixin.


<!– html structure –>
<html>
  <body>
  </body>
</html>


//javascript code
/** @jsx React.DOM **/
‘use strict’;

define ([
  'jquery', backbone', 'react', 'react.backbone'
], function (
  $, Backbone, React,
) {

  var CommentComponent = React.createBackboneClass({
    var comments = this.props.collection.map(function(item) {
      return (
        {item.get('comment')}
      )
    });
    return (
      <div>
        {comments}
      </div>
    );
  });

  var StatsComponent = React.createBackboneClass({
    render : function () {
      return (
        <div>
          {/* html template */}
        </div>
      );
    }
  });

  var MenuComponent = React.createBackboneClass({
    render : function () {
      return (
        <div>
          {/* html template */}
        </div>
      );
    }
  });

  var WidgetLayout = React.createBackboneClass({
    componentWillMount : function () {
      this.collection = Backbone.Collection();
    },
    render : function () {
      return (
        <StatsComponent />
        <CommentsComponent collection={this.collection}/>
      )
    };
  });

  var AppLayout = React.createBackboneClass({
    render : function () {
      return (
        <div>
            <MenuComponent />
            <WidgetLayout />
        </div>
      );
    };
  });
  React.renderComponent({
    <AppLayout />,
    $('body')[0]
  });
});

The code base is smaller, easier to understand and to control. Now some may ask about Angular + React comparing with Backbone + React. For this I’ll leave it to next post, but this is now pretty clear Marionette is out of the game.

react backbone angular javascript fast rendering inital loading optimization