2. PlanIntroduction Caractristiques Pourquoi CanJS? Demo Q&R
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.
Cr par 5. Un MVC Framework 6. Un MVC FrameworkModel 7. Un MVC
FrameworkModelVue 8. Un MVC Framework Component/ControlModelVue 9.
Un MVC Framework Component/Controlts en EvModelVue 10. Un MVC
Framework Mi seModelts en Evjou rComponent/ControlVue 11. Un MVC
FrameworkMi sets en Evjou rComponent/ControlModelMAJ avec 2 way
bindingVue 12. Un MVC FrameworkMi sets en Evjou
rComponent/ControlModelMAJ avec 2 way bindingVue 13.
Caractristiques 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.
can.Construct.extend(s,p) var Person = can.Construct.extend({ init:
function (name) { this.name = name; } }); var cherif = new
Person("Cherif"); cherif.name 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. 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. can.compute(data) var age =
can.compute(30); age(); //-> 30
age.bind('change',function(ev,newVal,oldVal){ newVal //-> 31
oldVal //-> 30 }); age(31); 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.
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. 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. can.Model.List(s,p) var tasks= new
Task.List(); can.each(tasks,function(task){ }); Task.List =
can.Model.List.extend({ Map: Task },{}); 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. 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. Mustache / Handlebars {{#if devs.length}}
{{#each devs}}
{{name}}
{{/each}} {{else}} pas de dveloppeurs {{/if}}
can.view('devs.mustache',{ devs: new can.List([{name:'Khaled'}]) })
25. EJS pas de dveloppeurs can.view('devs.ejs',{ devs: new
can.List([{name:'Khaled'}]) }) 26. can.Component.extend(p)
can.Component.extend({ tag:"panel", template: "{{#if active}}",
scope: { active: false }, helpers: {} events: { inserted:
function(){...} } }) 27. can.Component.extend(p) {{#each
foodTypes}} {{content}} {{/each}} var foodTypes= new can.List([
{title:"Fruits",content:"oranges"}, ]) 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('
distance:
Temp:{{voyageTemp}}
'); $('#vo').html(template(alger)); 29. Plugins Validations
Getter / Setter Backup / Restore Super Queue Delegate PushState
Fixtures LazyMap 30. POURQUOI? 31. Dcouplage 32. n ( n 1 ) / 2 33.
{ ticker: "SSE", startTime: 1350709200000, // Oct 20, 2012 endTime:
1350795600000 // Oct 21, 2012 } 34. Flexibilit 35. Support des
librairies 36. Faites le votre manire new Slider("#progress",{ min:
0, max: 100 }); $("#progress").slider({ min: 0, max: 100 }); 37.
Faites le votre manire Task = can.Model.extend({ findAll: "/GET
/tasks" },{}) Task = can.Model.extend({ findAll: { crossDomain:
true, dataType: "jsonp", jsonpCallback: "callback" } },{}) 38.
Faites le votre manire 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. Comparaison 40.
CaratristiquesAngularJSBackboneCanJSEmberJSObservablesONOORoutingOOOOView
BindingONOOTwo way BindingsONOOPartial viewsONOOFiltred List
viewsONOOFlexibiltyNOON 41. Courbe d'apprentissageGrande!! 42.
Courbe d'apprentissagePetite 43. Courbe d'apprentissageGrande!! 44.
Courbe d'apprentissage lPetite!! 45. Question / Rponse 46.
http://www.bitovi.com/http://www.bitovi.com/blog/http://canjs.com/https://github.com/bitovi/https://github.com/retro/generator-canjs/
