Talk given at Throne of JS July 2012. There are two types of MVC libraries in JavaScript: light and heavy. CanJS is the best of both worlds.

1. http://canjs.us
@canjsus
THE BEST
OF BOTH WORLDS

2. Brian Moschel
@bitovi
http://bitovi.com

3. 2010
WHY 2012
WE’RE
HERE

4. WE
{
WHAT
WANT
Small
Fast
Best Practices
Productivity
Easy to Learn

5. THE TWO WORLDS
Light Heavy
Easy to Learn Live Binding
Small Size Computed Properties
Basic MVC Memory Safety

6. THE BEST OF BOTH WORLDS
Easy to Learn Live Binding
Small Size Computed Properties
Basic MVC Memory Safety

7. THE BEST OF BOTH WORLDS
Easy to Learn Live Binding
Small Size Computed Properties
Basic MVC Memory Safety

8. THE BEST OF BOTH WORLDS
R&B Hip Hop

9. THE BEST OF BOTH WORLDS
R&B Hip Hop

10. WHERE
IT CAME FROM...
StealJS

11. WHAT’S
INSIDE
{
• can.Construct
• can.Observe
• can.Model
• can.Control
• can.view
• can.EJS
• can.route

13. JUST SHOW
ME A MATRIX
ALREADY

14. Download Size 8.97k 37k 13k 9.47k
Small
Download Builder
Live Bind Perf 14 38 63 50
Fast- JSPerf
Control Initialization 135 81 n/a 135
MVC Separation
Memory Safety
Best Practices
REST Service Layer
Routing Logic in Controller
Global Store
Live Binding
Productivity Deferreds
Computed Properties
Partial View Support
Perceived Learning Curve low high low low
Easy to Learn
Library Agnostic

15. DEMO

16. BEST
PRACTICES
MVC Separation
Memory Safety
REST Service Layer
Routing Logic in Controller

17. BEST PRACTICES
Model - View - Controller
can.Construct can.Control can.view
can.Observe can.route can.EJS
can.Model

18. BEST PRACTICES
can.Model
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')
});

19. BEST PRACTICES
can.Model and can.Observe
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’);

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

21. BEST PRACTICES
can.view and can.EJS
<script type='text/ejs' id='messageEJS'>
<h1><%= message %></h1>
</script>
can.view('messageEJS', {
message : 'Hello World'
}) //-> frag <h1>Hello World</h1>

22. BEST PRACTICES
Memory Leaks
$('#undo').bind('mouseenter',function(){
$('<div>Undo</div>').tooltipFor(this)
})

23. BEST PRACTICES
Memory Leaks
Undo
$('#undo').bind('mouseenter',function(){
$('<div>Undo</div>').tooltipFor(this)
})

24. BEST PRACTICES
Memory Leaks
$.fn.tooltipFor = function(anchor){
var $el = this
.appendTo(document.body)
.offset( $(anchor).offset() )
$(anchor).bind('mouseleave',function(ev){
$el.remove()
})
}

25. BEST PRACTICES
Memory Leaks
Undo
$.fn.tooltipFor = function(anchor){
var $el = this
.appendTo(document.body)
.offset( $(anchor).offset() )
$(anchor).bind('mouseleave',function(ev){
$el.remove()
})
}

26. Leaky Event Handlers: Zombies!

27. Leaky Event Handlers: Zombies!

28. BEST PRACTICES
can.Control and 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
});

29. BEST PRACTICES
Memory Leaks
can.Model Non-Leaking Global Store

30. BEST PRACTICES
Memory Leaks
can.Model Non-Leaking Global Store
Critical
File Taxes
Write talk on CanJS
Emissions Test

31. PRODUCTIVITY
Global Store
Live Binding
Deferreds
Computed Properties
Partial View Support

32. PRODUCTIVITY
Live Binding
<% if( devs.attr('length') ) { %>
<% devs.each( function( dev ) { %>
<li><%= dev.attr('name') %></li>
<% }) %>
<% } else { %>
<li>No Developers</li>
<% } %>
devs = new can.Observe.List(['Andy','Fred'])
can.view('devs',{devs: devs})

33. PRODUCTIVITY
Live Binding
<input type='text'
value='<%= coffee.attr("roaster") %>' />

34. PRODUCTIVITY
Global Store

35. PRODUCTIVITY
Deferreds
can.view( 'todos/todos.ejs', {
todos: Todo.findAll(),
user: User.findOne( { id: 5 } )
} )
.then(function( frag ){
document.getElementById( 'todos' )
.appendChild( frag );
})

36. PRODUCTIVITY
can.compute
var Person = can.Observe({
fullName: can.compute(function(){
return this.attr("first") + " " +
this.attr("last")
})
});
var me = new Person({
first: "Justin",
last: "Meyer"
});
me.fullName() //-> "Justin Meyer"
me.fullName.bind("change",
function(ev,newVal,oldVal){ ... })

37. PRODUCTIVITY
Plugins
• Validations
• Getter / Setter
• Attribute Converters
• Backup / Restore
• Super
• Proxy

38. EASY
Perceived Learning Curve low high low low
Library Agnostic

39. EASY Docs!

40. EASY Docs!

41. EASY Docs!

42. EASY Docs!

43. EASY Docs!

44. EASY Docs!

45. EASY Docs!

46. EASY Docs!

47. EASY Docs!

48. EASY Docs!

49. EASY Library Support

50. FAST
Live Bind Perf 14 38 63 50
Control Initialization 135 81 n/a 135

51. FAST Live Bind Perf

52. FASTControl Initialization

53. SMALL
Download Size 8.97k 37k 13k 9.47k
Download Builder

54. SMALL
Download
Builder

55. SMALL
Download Size
40
30
20
10
0
BackboneJS CanJS KnockoutJS BatmanJS AngularJS EmberJS

56. WHAT’S NEXT
Library-less Version
can.route Push State
Handlebars/Mustache Support

57. http://canjs.us
@canjsus
THE BEST
OF BOTH WORLDS

58. PRODUCTIVITY
Partial Views
<% for( var i = 0; i < todos.length; i++ ) { %>
<li><%== can.view.render( '/todos/todo.ejs', {
todo: todo[ i ]
} ) %>
</li>
<% } %>

59. PRODUCTIVITY
can.compute
var project = new can.Observe({
progress: 0.5
});
var computed = can.compute(function(val){
if(val) {
project.attr('progress', val / 100);
} else {
return project.attr('progress') * 100;
}
});
new Slider({val : computed});