Slide 1

Slide 1 text

Sebastian Porto @sebasporto

Slide 2

Slide 2 text

•Intro •Features •Demo •Why?

Slide 3

Slide 3 text

2008 2012 Part of JMVC 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

FEATURES

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

OBSERVABLES Construct Observable

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

MODELS Construct Observable Model

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

VIEWS Model Views live bindings

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

    Slide 17

    Slide 17 text

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

    Slide 18

    Slide 18 text

    CONTROLLERS Controller Model View events m odify

    Slide 19

    Slide 19 text

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

    Slide 20

    Slide 20 text

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

    Slide 21

    Slide 21 text

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

    Slide 22

    Slide 22 text

    DEMO

    Slide 23

    Slide 23 text

    WHY?

    Slide 24

    Slide 24 text

    No content

    Slide 25

    Slide 25 text

    LEARNING CURVE A subjective comparison

    Slide 26

    Slide 26 text

    BACKBONE Confused

    Slide 27

    Slide 27 text

    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

    Slide 28

    Slide 28 text

    ANGULAR Wow

    Slide 29

    Slide 29 text

    No content

    Slide 30

    Slide 30 text

    Convenience / Magic Easier to Learn

    Slide 31

    Slide 31 text

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

    Slide 32

    Slide 32 text

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

    Slide 33

    Slide 33 text

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

    Slide 34

    Slide 34 text

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

    Slide 35

    Slide 35 text

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

    Slide 36

    Slide 36 text

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

    Slide 37

    Slide 37 text

    INTEGRATION

    Slide 38

    Slide 38 text

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

    Slide 39

    Slide 39 text

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

    Slide 40

    Slide 40 text

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

    Slide 41

    Slide 41 text

    TRY IT OUT!

    Slide 42

    Slide 42 text

    THANKS... QS?

    Slide 43

    Slide 43 text

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

    Slide 44

    Slide 44 text

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