CanJS

An overview of CanJS and comparison with Backbone, Angular and Ember

Transcript

1. Sebastian Porto @sebasporto
2. •Intro •Features •Demo •Why?
3. 2008 2012 Part of JMVC 3
4. CAN.JS MVC View Controller events Model m odify updates via events
5. FEATURES
6. OVERVIEW can.Construct can.Observe can.Model can.Control can.view EJS Mustache can.route
7. can.Construct var Person = can.Construct({ init: function (name) { this.name = name; } }); var zack = new Person(”Zack");
8. OBSERVABLES Construct Observable
9. can.Observe var state = new can.Observe({ selected: null, showSave: false });
10. can.Observe state.bind('selected', function (oldVal, newVal) { … }); state.attr(‘selected’, item); state.attr(‘selected’);
11. MODELS Construct Observable Model
12. can.Model var Library = can.Model({ findAll: ‘GET /libraries’, create: 'POST /libraries', update: 'PUT /libraries/{id}', destroy: 'DELETE /libraries/{id}' }, {});
13. can.Model new Library.List([]); Collection Member new Library({name: ‘jQuery’});
14. VIEWS Model Views live bindings
15. can.view var template = can.view("#template", { libraries: this.libraries, state: this.state }); can.$(ele).append(template);
16. EJS <% libs.forEach(function(el, ix) { %> <li><%= el.name %></li> <% }) %> <% if (state.isEditing) { %> <button>Save</button> <% } %>
17. Mustache {{#libraries}} <li>{{name}}</li> {{/libraries}} {{#state.isEditing}} <button>Save</button> {{/state.isEditing}}
18. CONTROLLERS Controller Model View events m odify
19. can.Control var Control = can.Control({ init: function (ele, options) { … } }); var control = new Control('#main’, {});
20. can.Control '.btn_save click': function (ele, ev) { }, '.name keyup': function (ele, ev) { }
21. Other Goodies •Validations •Dirty attributes •Fixtures •Handlebars helpers (Transformations, filters)
22. DEMO
23. WHY?
25. LEARNING CURVE A subjective comparison
26. BACKBONE Confused
27. EMBER “We frequently receive feedback from new developers about how frustrating it can be to get started with Ember” Yehuda Katz & Tom Dale http://emberjs.com/blog/2013/03/21/making-ember-easier.html
28. ANGULAR Wow
30. Convenience / Magic Easier to Learn
31. They way you already know, is most likely the right way.
32. ANGULAR function Ctrl($scope, $element) { $(‘.tree’, $element).dynatree({}); }
33. That’s not the Angular way! You should use directives!
34. CAN init: function (element, options) { $(‘.tree’, element).dynatree({}); … } Yay!
35. SIZE KB (MIN) Ember Angular CanJS Backbone 18 33 80 141
36. SIZE KB (MIN) Ember + jQuery + Handlebars Angular CanJS + Zepto Backbone + _ + Zepto + Mustache 61 57 80 269
37. INTEGRATION
38. Memory leak safe '.btn_save click': function (ele, ev) { … },
39. Performance http://jsperf.com/angular-vs-knockout-vs-ember/118
40. Succinct Source http://paulhammant.com/2013/01/18/client-side-mvc-roundup/
41. TRY IT OUT!
42. THANKS... QS?
43. With #canjs you can do 80% of what you can possibly need with 20% the learning curve of the others. Sebastian Porto ‏@sebasporto
44. THE REALLY IMPORTANT STUFF Backbone CanJS Angular Ember Easy to learn ˒ ˒ Great docs ˒ ˒ ˒ Observable Models ˒ ˒ ˒ ˒ Routing ˒ ˒ ˒ ˒ Views with live bindings ˒ ˒ ˒ Two way bindings ˒ ˒ Avoid unnecessary boilerplate ˒ ˒ ˒