Canjs

1,155 views
961 views

Published on

Introduction au CanJS Javascript MVC framework

Published in: Technology

Canjs

  1. 1. @cherif_b
  2. 2. Plan Introduction ● Caractéristiques ● Pourquoi CanJS? ● Demo ● Q&R ●
  3. 3. 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.
  4. 4. Créé par
  5. 5. Un MVC Framework
  6. 6. Un MVC Framework Model
  7. 7. Un MVC Framework Model Vue
  8. 8. Un MVC Framework Component/Control Model Vue
  9. 9. Un MVC Framework Component/Control ts en Ev Model Vue
  10. 10. Un MVC Framework à Mi se Model ts en Ev jou r Component/Control Vue
  11. 11. Un MVC Framework Mi se à ts en Ev jou r Component/Control Model MAJ avec 2 way binding Vue
  12. 12. Un MVC Framework Mi se à ts en Ev jou r Component/Control Model MAJ avec 2 way binding Vue
  13. 13. Caractéristiques can.Map (Objets Observables) can.Contsruct (Constructeurs) can.Control (Controlleurs) can.Model (Models) can.route (Routage) can.Component (Composant) can.compute (Valeurs Observables) can.view.ejs (Embeded JS) can.view (Vue) can.view.mustache (Mustache/Handlebars)
  14. 14. can.Construct.extend(s,p) var Person = can.Construct.extend({ init: function (name) { this.name = name; } }); var cherif = new Person("Cherif"); cherif.name
  15. 15. 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');
  16. 16. 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');
  17. 17. can.compute(data) var age = can.compute(30); age(); //-> 30 age.bind('change',function(ev,newVal,oldVal){ newVal //-> 31 oldVal //-> 30 }); age(31);
  18. 18. 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();
  19. 19. can.Model.extend(s,p) var Task = can.Model.extend({ findAll: "GET findOne: "GET /tasks", /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){});
  20. 20. 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() }) })
  21. 21. can.Model.List(s,p) var tasks= new Task.List(); can.each(tasks,function(task){ }); Task.List = can.Model.List.extend({ Map: Task },{});
  22. 22. 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 } });
  23. 23. 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');
  24. 24. Mustache / Handlebars {{#if devs.length}} {{#each devs}} <li>{{name}}</li> {{/each}} {{else}} <li>pas de développeurs</li> {{/if}} can.view('devs.mustache',{ devs: new can.List([{name:'Khaled'}]) })
  25. 25. EJS <% if( devs.attr('length') ) { %> <% devs.each(function(dev){ %> <li><%= dev.attr('name') %></li> <% }) %> <% } else { %> <li>pas de développeurs</li> <% } %> can.view('devs.ejs',{ devs: new can.List([{name:'Khaled'}]) })
  26. 26. can.Component.extend(p) can.Component.extend({ tag:"panel", template: "{{#if active}}<content>…", scope: { active: false }, helpers: {} events: { inserted: function(){...} } })
  27. 27. can.Component.extend(p) <tabs> {{#each foodTypes}} <panel title='title'> {{content}} </panel> {{/each}} </tabs> var foodTypes= new can.List([ {title:"Fruits",content:"oranges"}, …])
  28. 28. 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('<p><lable>distance:</label> <input can-value="dist"/></p> <p>Temp:{{voyageTemp}}</p>'); $('#vo').html(template(alger));
  29. 29. Plugins Validations Getter / Setter Backup / Restore Super Queue Delegate PushState Fixtures LazyMap
  30. 30. POURQUOI?
  31. 31. Découplage
  32. 32. n ( n – 1 ) / 2
  33. 33. { ticker: "SSE", startTime: 1350709200000, // Oct 20, 2012 endTime: 1350795600000 // Oct 21, 2012 }
  34. 34. Flexibilité
  35. 35. Support des librairies
  36. 36. Faites le à votre maniére <slider min="0" max="100"></slider> new Slider("#progress",{ min: 0, max: 100 }); $("#progress").slider({ min: 0, max: 100 });
  37. 37. Faites le à votre maniére Task = can.Model.extend({ findAll: "/GET /tasks" },{}) Task = can.Model.extend({ findAll: { crossDomain: true, dataType: "jsonp", jsonpCallback: "callback" } },{})
  38. 38. 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; } },{})
  39. 39. Comparaison
  40. 40. Caratéristiques 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
  41. 41. Courbe d'apprentissage Grande!!
  42. 42. Courbe d'apprentissage Petite
  43. 43. Courbe d'apprentissage Grande!!
  44. 44. Courbe d'apprentissage l Petite!!
  45. 45. Question / Réponse
  46. 46. ● http://www.bitovi.com/ ● http://www.bitovi.com/blog/ ● http://canjs.com/ ● https://github.com/bitovi/ ● https://github.com/retro/generator-canjs/

×