CanJS is a JavaScript MVC framework that makes developing complex applications simple and fast through features like custom tags, two-way binding, and an easy-to-learn and flexible structure. It emphasizes decoupling and supports customization through plugins and alternative implementations of core behaviors. Compared to other frameworks, CanJS has a small learning curve while maintaining capabilities like routing, views, and observables seen in larger frameworks.

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
Model
Vue

8. Un MVC Framework
Component/Control
Model
Vue

9. Un MVC Framework
Component/Control
ts
en
Ev
Model
Vue

10. Un MVC Framework
à
Mi
se
Model
ts
en
Ev
jou
r
Component/Control
Vue

11. Un MVC Framework
Mi
se
à
ts
en
Ev
jou
r
Component/Control
Model
MAJ avec 2 way binding
Vue

12. Un MVC Framework
Mi
se
à
ts
en
Ev
jou
r
Component/Control
Model
MAJ avec 2 way binding
Vue

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. 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}}
<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. 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

62. Courbe d'apprentissage
Grande!!

63. Courbe d'apprentissage
Petite

64. Courbe d'apprentissage
Grande!!

65. Courbe d'apprentissage
l
Petite!!

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/