An overview of CanJS and comparison with Backbone, Angular and Ember
Sebastian Porto@sebasporto
View Slide
•Intro•Features•Demo•Why?
20082012 Part of JMVC 3
CAN.JS MVCViewControllereventsModelmodifyupdates via events
FEATURES
OVERVIEWcan.Constructcan.Observecan.Modelcan.Control can.viewEJSMustachecan.route
can.Constructvar Person = can.Construct({init: function (name) {this.name = name;}});var zack = new Person(”Zack");
OBSERVABLESConstructObservable
can.Observevar state = new can.Observe({selected: null,showSave: false});
can.Observestate.bind('selected',function (oldVal, newVal) {…});state.attr(‘selected’, item);state.attr(‘selected’);
MODELSConstructObservableModel
can.Modelvar Library = can.Model({findAll: ‘GET /libraries’,create: 'POST /libraries',update: 'PUT /libraries/{id}',destroy: 'DELETE /libraries/{id}'}, {});
can.Modelnew Library.List([]);CollectionMembernew Library({name: ‘jQuery’});
VIEWSModel Viewslive bindings
can.viewvar template = can.view("#template",{libraries: this.libraries,state: this.state});can.$(ele).append(template);
EJS<% libs.forEach(function(el, ix) { %><%= el.name %><% }) %><% if (state.isEditing) { %>Save<% } %>
Mustache{{#libraries}}{{name}}{{/libraries}}{{#state.isEditing}}Save{{/state.isEditing}}
CONTROLLERSControllerModel Vieweventsmodify
can.Controlvar Control = can.Control({init: function (ele, options) {…}});var control = new Control('#main’, {});
can.Control'.btn_save click': function (ele, ev) {},'.name keyup': function (ele, ev) {}
Other Goodies•Validations•Dirty attributes•Fixtures•Handlebars helpers(Transformations, filters)
DEMO
WHY?
LEARNING CURVEA subjective comparison
BACKBONEConfused
EMBER“We frequently receive feedback from new developers abouthow frustrating it can be to get started with Ember”Yehuda Katz & Tom Dalehttp://emberjs.com/blog/2013/03/21/making-ember-easier.html
ANGULARWow
Convenience / MagicEasier to Learn
They way you already know,is most likely the right way.
ANGULARfunction Ctrl($scope, $element) {$(‘.tree’, $element).dynatree({});}
That’s not theAngular way!You should usedirectives!
CANinit: function (element, options) {$(‘.tree’, element).dynatree({});…}Yay!
SIZE KB (MIN)EmberAngularCanJSBackbone 183380141
SIZE KB (MIN)Ember + jQuery + HandlebarsAngularCanJS + ZeptoBackbone + _ + Zepto + Mustache 615780269
INTEGRATION
Memory leak safe'.btn_save click': function (ele, ev) {…},
Performancehttp://jsperf.com/angular-vs-knockout-vs-ember/118
SuccinctSource http://paulhammant.com/2013/01/18/client-side-mvc-roundup/
TRY IT OUT!
THANKS... QS?
With #canjs you can do 80% of what you canpossibly need with 20% the learning curve ofthe others.Sebastian Porto @sebasporto
THE REALLY IMPORTANTSTUFFBackbone CanJS Angular EmberEasy to learn ˒ ˒Great docs ˒ ˒ ˒Observable Models ˒ ˒ ˒ ˒Routing ˒ ˒ ˒ ˒Views with live bindings ˒ ˒ ˒Two way bindings ˒ ˒Avoid unnecessary boilerplate ˒ ˒ ˒