1. http://canjs.us
@canjsus

2. Why?
• Prevents Leaks
• Ease of Use
• Fast

3. What’s Inside
• can.Construct
• can.Observe
• can.Model
• can.Control
• can.view
• can.EJS
• can.route

4. can.Construct(static, proto)
var Person = can.Construct({
init : function (name) {
this.name = name;
}
});
var curtis = new Person("Curtis");
curtis.name

5. new can.Observe(data)
var person =
new can.Observe({ name: 'josh'});
person.bind('name‟, function(ev,newVal,oldVal){
newVal //-> 'Josh Dean'
oldVal //-> 'josh'
});
person.attr('name') //-> 'josh'
person.name //-> 'josh'
person.attr('name','Josh Dean‟);

6. can.Model(ajax,proto)
var Todo = can.Model({
findAll : '/todo',
findOne : '/todo/{id}',
destroy : 'POST /todo/destroy/{id}',
update : 'POST /todo/{id}',
create : '/todo'
},{});
Todo.findOne({id: 5}, function( todo ) {
todo.attr('name')
});

7. can.Control(proto)
var Tabs = can.Control({
init: function( el ) {
// show first tab
},
'li click': function( el, ev ) {
// hide other tabs
// show selected tab
}
});
new Tabs('#tabs');

8. can.route(route, defaults)
var Routing = can.Control({
':type/:id route': function( data ) {
}
})
new Routing( document.body );
can.route.attr( { type : 'todos', id: 5 } )

9. can.view( idOrURL, data ) -> fragment
<script type='text/ejs' id='messageEJS'>
<h1><%= message %></h1>
</script>
can.view('messageEJS', {
message : 'Hello World'
}) //-> frag <h1>Hello World</h1>

10. EmbeddedJS Templates
Favorite tag is <%= ‟<blink>Blink</blink>‟ %>
-> My favorite tag is <blink>Blink</blink>
Favorite tag is <%== ‟<blink>Blink</blink>‟ %>
-> Favorite tag is Blink

11. EmbeddedJS Templates
<% if( devs ) { %>
<% for( var i = 0; i < devs.length; i++ ) { %>
<li><%= arr[i] %></li>
<% } %>
<% } else { %>
<li>No Developers</li>
<% } %>
can.view('devs.ejs',{devs: ['Andy','Fred']})
//-> frag <li>Andy</li><li>Fred</li>

12. EJS Live Binding
<% if( devs.attr('length') ) { %>
<% list(devs, function(dev){ %>
<li><%= dev.attr(„name‟) %></li>
<% }) %>
<% } else { %>
<li>No Developers</li>
<% } %>
var devs = new can.Observe.List([
{name : 'Andy'}, {name : 'Fred'}
])
can.view('devs.ejs',{devs : devs})
//-> frag <li>Andy</li><li>Fred</li>

13. Why?
• Prevents Leaks
• Speed
• Flexibility + Libraries
• Ease of Use
• Features vs Size

14. A tooltip.
Undo
$('#undo').bind('mouseenter',function(){
$('<div>Undo</div>').tooltipFor(this)
})

15. What’s Wrong?
$.fn.tooltipFor = function(anchor){
var $el = this
.appendTo(document.body)
.offset( $(anchor).offset() )
$(anchor).bind('mouseleave',function(ev){
$el.remove()
})
}

16. Leaks

17. Templated Events “{option} eventName”

18. Templated Events
var Tooltip = can.Control({
init: function( el, options ) {
el.appendTo(document.body)
.offset( $(options.anchor).offset() )
},
'{anchor} mouseleave': function( el, ev ) {
this.element.remove();
}
});
new Tooltip($('<div>Undo</div>'),{
anchor : this
});

19. Non-leaking Global Store
Critical Due Today
File Taxes Brush Teeth
Write talk on CanJS Write talk on CanJS
Emissions Test Check into flight

20. Non-leaking Global Store
Awesome Developers

21. Easy To Use

22. Plugins
• Validations
• Getter / Setter
• Serialize / Deserialize
• Backup / Restore
• Super
• Proxy
$(“#todos”).html( „todos.ejs‟, Todo.findAll() )

23. can.Control and Backbone.View
http://jsperf.com/tabs-timing-test

24. Live Binding
http://jsfiddle.net/JMWf4/5/

25. Live Binding
*can.zepto.js, angular/ember not tested, ask me why http://jsperf.com/canjs-ejs-live-bind

26. Features vs Size
CanJS 8.49kb - jQuery
Backbone 8.97kb -jQuery
+Underscore
Knockout 13kb none
Batman 15kb -pollyfills for ES5
none
Angular 24kb
-jQuery
Ember 39kb +metamorph.js

27. Library Support

28. Questions?
safer
faster
easier
smaller
library-er
http://canjs.us
@canjsus