INtroduction au CanJS javascript MVC framework

Présentation du conférence qui été dans le cadre de DzWebDayz Ouargla 'Algérie'

Transcript

1. @cherif_b
2. Plan • Introduction • Caractéristiques • 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 Framework Model
7. Un MVC Framework Vue Model
8. Un MVC Framework Component/Control Vue Model
9. Un MVC Framework Component/Control Vue Model Events
10. Un MVC Framework Component/Control Vue Model Events Mise à jour
11. Un MVC Framework Component/Control Vue Model Events Mise à jour MAJ avec 2 way binding
12. Un MVC Framework Component/Control Vue Model Events Mise à jour MAJ avec 2 way binding
13. 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)
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 /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){});
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}} <li>{{name}}</li> {{/each}} {{else}} <li>pas de développeurs</li> {{/if}} can.view('devs.mustache',{ devs: new can.List([{name:'Khaled'}]) })
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. can.Component.extend(p) can.Component.extend({ tag:"panel", template: "{{#if active}}<content>…", scope: { active: false }, helpers: {} events: { inserted: function(){...} } })
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. 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. Plugins Validations Getter / Setter Backup / Restore Super Queue Delegate PushState Fixtures LazyMap
30. POURQUOI?
31. Découplage
44. n ( n – 1 ) / 2
54. { ticker: "SSE", startTime: 1350709200000, // Oct 20, 2012 endTime: 1350795600000 // Oct 21, 2012 }
55. Flexibilité
56. Support des librairies
57. Faites le à votre maniére <slider min="0" max="100"></slider> new Slider("#progress",{ min: 0, max: 100 }); $("#progress").slider({ min: 0, max: 100 });
58. Faites le à votre maniére Task = can.Model.extend({ findAll: "/GET /tasks" },{}) Task = can.Model.extend({ findAll: { crossDomain: true, dataType: "jsonp", jsonpCallback: "callback" } },{})
59. 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; } },{})
60. Comparaison
61. 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
62. Courbe d'apprentissage Grande!!
63. Courbe d'apprentissage Petite
64. Courbe d'apprentissage Grande!!
65. Courbe d'apprentissage Petite!! l
66. Question / Réponse
67. • http://www.bitovi.com/ • http://www.bitovi.com/blog/ • http://canjs.com/ • https://github.com/bitovi/ • https://github.com/retro/generator-canjs/