Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CanJS

sporto
April 11, 2013

 CanJS

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

sporto

April 11, 2013
Tweet

More Decks by sporto

Other Decks in Programming

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