CanJS

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

Transcript

1. Sebastian Porto
   @sebasporto
   

   View Slide

2. •Intro
   •Features
   •Demo
   •Why?
   

   View Slide

3. 2008
   2012 Part of JMVC 3
   

   View Slide

4. CAN.JS MVC
   View
   Controller
   events
   Model
   m
   odify
   updates via events
   

   View Slide

5. FEATURES
   

   View Slide

6. OVERVIEW
   can.Construct
   can.Observe
   can.Model
   can.Control can.view
   EJS
   Mustache
   can.route
   

   View Slide

7. can.Construct
   var Person = can.Construct({
   init: function (name) {
   this.name = name;
   }
   });
   var zack = new Person(”Zack");
   

   View Slide

8. OBSERVABLES
   Construct
   Observable
   

   View Slide

9. can.Observe
   var state = new can.Observe({
   selected: null,
   showSave: false
   });
   

   View Slide

10. can.Observe
    state.bind('selected',
    function (oldVal, newVal) {
    …
    });
    state.attr(‘selected’, item);
    state.attr(‘selected’);
    

    View Slide

11. MODELS
    Construct
    Observable
    Model
    

    View Slide

12. can.Model
    var Library = can.Model({
    findAll: ‘GET /libraries’,
    create: 'POST /libraries',
    update: 'PUT /libraries/{id}',
    destroy: 'DELETE /libraries/{id}'
    }, {});
    

    View Slide

13. can.Model
    new Library.List([]);
    Collection
    Member
    new Library({name: ‘jQuery’});
    

    View Slide

14. VIEWS
    Model Views
    live bindings
    

    View Slide

15. can.view
    var template = can.view("#template",
    {
    libraries: this.libraries,
    state: this.state
    });
    can.$(ele).append(template);
    

    View Slide

16. EJS
    <% libs.forEach(function(el, ix) { %>
    <%= el.name %>
    <% }) %>
    <% if (state.isEditing) { %>
    Save
    <% } %>
    

    View Slide

17. Mustache
    {{#libraries}}
    {{name}}
    {{/libraries}}
    {{#state.isEditing}}
    Save
    {{/state.isEditing}}
    

    View Slide

18. CONTROLLERS
    Controller
    Model View
    events
    m
    odify
    

    View Slide

19. can.Control
    var Control = can.Control({
    init: function (ele, options) {
    …
    }
    });
    var control = new Control('#main’, {});
    

    View Slide

20. can.Control
    '.btn_save click': function (ele, ev) {
    },
    '.name keyup': function (ele, ev) {
    }
    

    View Slide

21. Other Goodies
    •Validations
    •Dirty attributes
    •Fixtures
    •Handlebars helpers
    (Transformations, filters)
    

    View Slide

22. DEMO
    

    View Slide

23. WHY?
    

    View Slide

24. View Slide

25. LEARNING CURVE
    A subjective comparison
    

    View Slide

26. BACKBONE
    Confused
    

    View Slide

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
    

    View Slide

28. ANGULAR
    Wow
    

    View Slide

29. View Slide

30. Convenience / Magic
    Easier to Learn
    

    View Slide

31. They way you already know,
    is most likely the right way.
    

    View Slide

32. ANGULAR
    function Ctrl($scope, $element) {
    $(‘.tree’, $element).dynatree({});
    }
    

    View Slide

33. That’s not the
    Angular way!
    You should use
    directives!
    

    View Slide

34. CAN
    init: function (element, options) {
    $(‘.tree’, element).dynatree({});
    …
    }
    Yay!
    

    View Slide

35. SIZE KB (MIN)
    Ember
    Angular
    CanJS
    Backbone 18
    33
    80
    141
    

    View Slide

36. SIZE KB (MIN)
    Ember + jQuery + Handlebars
    Angular
    CanJS + Zepto
    Backbone + _ + Zepto + Mustache 61
    57
    80
    269
    

    View Slide

37. INTEGRATION
    

    View Slide

38. Memory leak safe
    '.btn_save click': function (ele, ev) {
    …
    },
    

    View Slide

39. Performance
    http://jsperf.com/angular-vs-knockout-vs-ember/118
    

    View Slide

40. Succinct
    Source http://paulhammant.com/2013/01/18/client-side-mvc-roundup/
    

    View Slide

41. TRY IT OUT!
    

    View Slide

42. THANKS... QS?
    

    View Slide

43. With #canjs you can do 80% of what you can
    possibly need with 20% the learning curve of
    the others.
    Sebastian Porto ‏@sebasporto
    

    View Slide

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 ˒ ˒ ˒
    

    View Slide