Tweet
Tweet

Slide 1

Slide 1 text

@cherif_b

Slide 2

Slide 2 text

Plan ● Introduction ● Caractéristiques ● Pourquoi CanJS? ● Demo ● Q&R

Slide 3

Slide 3 text

CanJS is a JavaScript library that makes developing complex applications simple and fast. Easy-to-learn, small, and unassuming of your application structure, but with modern features like custom tags and 2-way binding. Creating apps is easy and maintainable.

Slide 4

Slide 4 text

Créé par

Slide 5

Slide 5 text

Un MVC Framework

Slide 6

Slide 6 text

Un MVC Framework Model

Slide 7

Slide 7 text

Un MVC Framework Vue Model

Slide 8

Slide 8 text

Un MVC Framework Component/Control Vue Model

Slide 9

Slide 9 text

Un MVC Framework Component/Control Vue Model Events

Slide 10

Slide 10 text

Un MVC Framework Component/Control Vue Model Events Mise à jour

Slide 11

Slide 11 text

Un MVC Framework Component/Control Vue Model Events Mise à jour MAJ avec 2 way binding

Slide 12

Slide 12 text

Un MVC Framework Component/Control Vue Model Events Mise à jour MAJ avec 2 way binding

Slide 13

Slide 13 text

Caractéristiques can.Contsruct (Constructeurs) can.Control (Controlleurs) can.Map (Objets Observables) can.view (Vue) can.Model (Models) can.Component (Composant) can.route (Routage) can.view.ejs (Embeded JS) can.view.mustache (Mustache/Handlebars) can.compute (Valeurs Observables)

Slide 14

Slide 14 text

can.Construct.extend(s,p) var Person = can.Construct.extend({ init: function (name) { this.name = name; } }); var cherif = new Person("Cherif"); cherif.name

Slide 15

Slide 15 text

new can.Map(data) var person = new can.Map({name:'Cherif'}); person.attr('name') //-> 'Cherif' person.bind('name',function(ev,newVal,oldVal){ newVal //-> 'Khaled' oldVal //-> 'Cherif' }); person.attr('name','Khaled');

Slide 16

Slide 16 text

new can.List(data) var hobbies = new can.List(['JS']); hobbies.attr(0) //-> 'JS' hobbies.bind('add',function(ev,items,index){ items //-> ['bball','football'] index //-> 1 }); hobbies.push('bball','football');

Slide 17

Slide 17 text

can.compute(data) var age = can.compute(30); age(); //-> 30 age.bind('change',function(ev,newVal,oldVal){ newVal //-> 31 oldVal //-> 30 }); age(31);

Slide 18

Slide 18 text

can.compute(getter) var info = can.compute(function(){ return person.attr("name")+" a "+age()+ " ans et aime: "+hobbies.join(', ') }); info() //-> "Cherif a 31 ans et aime JS, bball, football" info.bind('change',function(ev,newVal,oldVal){ newVal //-> "Cherif a 31 ans et aime JS, bball" }); hobbies.pop();

Slide 19

Slide 19 text

can.Model.extend(s,p) var Task = can.Model.extend({ findAll: "GET /tasks", findOne: "GET /tasks/{id}", create: "POST /tasks", update: "PUT /tasks/{id}", destroy: "DELETE /tasks/{id}" },{}) Task.findAll({due:"today"},function(tasks){}) Task.findOne({id: 51},function(task){});

Slide 20

Slide 20 text

can.Model.extend(s,p) var task = new Task({name:"Apprendre CanJS."}); task.save(function(){ task.attr("name","Apprendre JS et CanJS.") .save(function(){ task.destroy() }) })

Slide 21

Slide 21 text

can.Model.List(s,p) var tasks= new Task.List(); can.each(tasks,function(task){ }); Task.List = can.Model.List.extend({ Map: Task },{});

Slide 22

Slide 22 text

can.route(route,defaults) can.route("tasks/:id",{ type: "tasks"}); can.route.bind("change", function(){ if(can.route.attr('type') == "tasks"){ var id = can.route.attr('id’); if( id ){ Task.findOne({id: id}); }e } });

Slide 23

Slide 23 text

can.Control.extend( p ) var Tabs = can.Control.extend({ init: function( el,options ) { // Afficher le premier onglet }, 'li click': function( el, ev ) { // Masquer les autes onglet // Afficher l'onglet selectioné } }); new Tabs('#tabs');

Slide 24

Slide 24 text

Mustache / Handlebars {{#if devs.length}} {{#each devs}}
  • {{name}}
    • {{/each}} {{else}}
  • pas de développeurs
    • {{/if}} can.view('devs.mustache',{ devs: new can.List([{name:'Khaled'}]) })

    Slide 25

    Slide 25 text

    EJS <% if( devs.attr('length') ) { %> <% devs.each(function(dev){ %>
  • <%= dev.attr('name') %>
    • <% }) %> <% } else { %>
  • pas de développeurs
    • <% } %> can.view('devs.ejs',{ devs: new can.List([{name:'Khaled'}]) })

    Slide 26

    Slide 26 text

    can.Component.extend(p) can.Component.extend({ tag:"panel", template: "{{#if active}}…", scope: { active: false }, helpers: {} events: { inserted: function(){...} } })

    Slide 27

    Slide 27 text

    can.Component.extend(p) {{#each foodTypes}} {{content}} {{/each}} var foodTypes= new can.List([ {title:"Fruits",content:"oranges"}, …])

    Slide 28

    Slide 28 text

    2 way binding var Voyage= can.Map.extend({ voyageTemp:function(){ return this.attr('dist')/110 //km/h } }); var alger=new Voyage({ dist:563.67 }); var template=can.view.mustache('

    distance:\

    \

    Temp:{{voyageTemp}}

    '); $('#vo').html(template(alger));

    Slide 29

    Slide 29 text

    Plugins Validations Getter / Setter Backup / Restore Super Queue Delegate PushState Fixtures LazyMap

    Slide 30

    Slide 30 text

    POURQUOI?

    Slide 31

    Slide 31 text

    Découplage

    Slide 32

    Slide 32 text

    No content

    Slide 33

    Slide 33 text

    No content

    Slide 34

    Slide 34 text

    No content

    Slide 35

    Slide 35 text

    No content

    Slide 36

    Slide 36 text

    No content

    Slide 37

    Slide 37 text

    No content

    Slide 38

    Slide 38 text

    No content

    Slide 39

    Slide 39 text

    No content

    Slide 40

    Slide 40 text

    No content

    Slide 41

    Slide 41 text

    No content

    Slide 42

    Slide 42 text

    No content

    Slide 43

    Slide 43 text

    No content

    Slide 44

    Slide 44 text

    n ( n – 1 ) / 2

    Slide 45

    Slide 45 text

    No content

    Slide 46

    Slide 46 text

    No content

    Slide 47

    Slide 47 text

    No content

    Slide 48

    Slide 48 text

    No content

    Slide 49

    Slide 49 text

    No content

    Slide 50

    Slide 50 text

    No content

    Slide 51

    Slide 51 text

    No content

    Slide 52

    Slide 52 text

    No content

    Slide 53

    Slide 53 text

    No content

    Slide 54

    Slide 54 text

    { ticker: "SSE", startTime: 1350709200000, // Oct 20, 2012 endTime: 1350795600000 // Oct 21, 2012 }

    Slide 55

    Slide 55 text

    Flexibilité

    Slide 56

    Slide 56 text

    Support des librairies

    Slide 57

    Slide 57 text

    Faites le à votre maniére new Slider("#progress",{ min: 0, max: 100 }); $("#progress").slider({ min: 0, max: 100 });

    Slide 58

    Slide 58 text

    Faites le à votre maniére Task = can.Model.extend({ findAll: "/GET /tasks" },{}) Task = can.Model.extend({ findAll: { crossDomain: true, dataType: "jsonp", jsonpCallback: "callback" } },{})

    Slide 59

    Slide 59 text

    Faites le à votre maniére Task = can.Model.extend({ findAll: "/GET /tasks" },{}) Task = can.Model.extend({ findAll: function(params){ var deferred = $.Deferred(); connect(function(data){ deferred.resolve(Task.models(data)) }); return deferred; } },{})

    Slide 60

    Slide 60 text

    Comparaison

    Slide 61

    Slide 61 text

    AngularJS Backbone CanJS EmberJS Observables O N O O Routing O O O O View Binding O N O O Two way Bindings O N O O Partial views O N O O Filtred List views O N O O Flexibilty N O O N Caratéristiques

    Slide 62

    Slide 62 text

    Courbe d'apprentissage Grande!!

    Slide 63

    Slide 63 text

    Courbe d'apprentissage Petite

    Slide 64

    Slide 64 text

    Courbe d'apprentissage Grande!!

    Slide 65

    Slide 65 text

    Courbe d'apprentissage Petite!! l

    Slide 66

    Slide 66 text

    Question / Réponse

    Slide 67

    Slide 67 text

    ● http://www.bitovi.com/ ● http://www.bitovi.com/blog/ ● http://canjs.com/ ● https://github.com/bitovi/ ● https://github.com/retro/generator-canjs/