Framework comparison notes

compare.md

Module Loaders

• comparison

RequireJS / r.js

• Stable
• Solved most problems
• Extensions for everything

Browserify

• Works nice out of the box
• Build necessary
• NPM / Browserify

Webpack

• ES6 / CJS / AMD out of the box
• Great with non-static CJS dependencies.
• Build necessary
• Hot module replacement

StealJS

• Progressive loading algorithim
• Exporting
• Based on ES6 Module Loader technology
• Hot module replacement

Frameworks

React

render () {
  var fullName = this.props.firstName + " " + this.props.lastName;
  return (
      <div>
        <h2>{fullName}</h2>
      </div>
    );
}

• POJO
• JSX - HTML in your JS.
• Diffing
• "Reactive Architecture"

Angular

$scope.fullName = function() {
  return $scope.firstName + " " + $scope.lastName;
}

or

var fullName = function() {
  $scope.fullName = $scope.firstName + " " + $scope.lastName;
}
$scope.$watch('firstName', fullName, true);
$scope.$watch('lastName', fullName, true);

• POJOs
• Embedable in the page (JSish in your HTML)
• Dependency injection
• Limited input support, internationalization

Backbone

• Lightweight
• Simple

Ember

App.Person = Ember.Object.extend({
  // these will be supplied by `create`
  firstName: null,
  lastName: null,

  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  }.property('firstName', 'lastName')
});

var ironMan = App.Person.create({
  firstName: "Tony",
  lastName:  "Stark"
});

ironMan.get('fullName'); // "Tony Stark"

• Onboarding
• Tree based routing
• Convention over configuration
• Handlebars driven
• Automatic batching

CanJS

var person = new can.Map({first: "Justin", last: "Meyer"});

var fullName = can.compute(function(){
  return person.attr("first")+" "+person.attr("last")
});

fullName() //-> "Justin Meyer"

or

var Person = can.Map.extend({
  define: {
    fullName: {
      get: function(){
        return this.attr("first")+" "+this.attr("last");
      }
    }
  }
});

var me = new Person({first:"Justin", last: "Meyer"})
me.attr("fullName") //-> "Justin Meyer"