CanJS: The Best of Both Worlds

8,932 views

Published on

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.

Published in: Technology, Business
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total views
8,932
On SlideShare
0
From Embeds
0
Number of Embeds
54
Actions
Shares
0
Downloads
147
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Set out to make CanJS the best documented library.\n\nAwesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.\n\nAnnotated Source\n\n\nAnd hire us for training, support, or development\n
  • Set out to make CanJS the best documented library.\n\nAwesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.\n\nAnnotated Source\n\n\nAnd hire us for training, support, or development\n
  • Set out to make CanJS the best documented library.\n\nAwesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.\n\nAnnotated Source\n\n\nAnd hire us for training, support, or development\n
  • Set out to make CanJS the best documented library.\n\nAwesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.\n\nAnnotated Source\n\n\nAnd hire us for training, support, or development\n
  • Set out to make CanJS the best documented library.\n\nAwesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.\n\nAnnotated Source\n\n\nAnd hire us for training, support, or development\n
  • Set out to make CanJS the best documented library.\n\nAwesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.\n\nAnnotated Source\n\n\nAnd hire us for training, support, or development\n
  • Set out to make CanJS the best documented library.\n\nAwesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.\n\nAnnotated Source\n\n\nAnd hire us for training, support, or development\n
  • Set out to make CanJS the best documented library.\n\nAwesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.\n\nAnnotated Source\n\n\nAnd hire us for training, support, or development\n
  • Set out to make CanJS the best documented library.\n\nAwesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.\n\nAnnotated Source\n\n\nAnd hire us for training, support, or development\n
  • Set out to make CanJS the best documented library.\n\nAwesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.\n\nAnnotated Source\n\n\nAnd hire us for training, support, or development\n
  • Set out to make CanJS the best documented library.\n\nAwesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.\n\nAnnotated Source\n\n\nAnd hire us for training, support, or development\n
  • Set out to make CanJS the best documented library.\n\nAwesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.\n\nAnnotated Source\n\n\nAnd hire us for training, support, or development\n
  • Set out to make CanJS the best documented library.\n\nAwesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.\n\nAnnotated Source\n\n\nAnd hire us for training, support, or development\n
  • Set out to make CanJS the best documented library.\n\nAwesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.\n\nAnnotated Source\n\n\nAnd hire us for training, support, or development\n
  • Set out to make CanJS the best documented library.\n\nAwesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.\n\nAnnotated Source\n\n\nAnd hire us for training, support, or development\n
  • deep binding\n\n\n\nthe flexibility to switch between libraries without losing all your skills and even some of your (code)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • CanJS: The Best of Both Worlds

    1. 1. http://canjs.us @canjsusTHE BESTOF BOTH WORLDS
    2. 2. Brian Moschel@bitovihttp://bitovi.com
    3. 3. 2010WHY 2012WE’REHERE
    4. 4. WE {WHATWANT Small Fast Best Practices Productivity Easy to Learn
    5. 5. THE TWO WORLDS Light HeavyEasy to Learn Live Binding Small Size Computed Properties Basic MVC Memory Safety
    6. 6. THE BEST OF BOTH WORLDS Easy to Learn Live Binding Small Size Computed Properties Basic MVC Memory Safety
    7. 7. THE BEST OF BOTH WORLDS Easy to Learn Live Binding Small Size Computed Properties Basic MVC Memory Safety
    8. 8. THE BEST OF BOTH WORLDS R&B Hip Hop
    9. 9. THE BEST OF BOTH WORLDS R&B Hip Hop
    10. 10. WHEREIT CAME FROM... StealJS
    11. 11. WHAT’S INSIDE { • can.Construct • can.Observe • can.Model • can.Control • can.view • can.EJS • can.route
    12. 12. JUST SHOWME A MATRIXALREADY
    13. 13. 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 SafetyBest Practices REST Service Layer Routing Logic in Controller Global Store Live BindingProductivity Deferreds Computed Properties Partial View Support Perceived Learning Curve low high low lowEasy to Learn Library Agnostic
    14. 14. DEMO
    15. 15. BESTPRACTICES MVC Separation Memory Safety REST Service LayerRouting Logic in Controller
    16. 16. BEST PRACTICESModel - View - Controller can.Construct can.Control can.view can.Observe can.route can.EJS can.Model
    17. 17. BEST PRACTICEScan.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) });
    18. 18. BEST PRACTICEScan.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’);
    19. 19. BEST PRACTICEScan.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);
    20. 20. BEST PRACTICEScan.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>
    21. 21. BEST PRACTICESMemory Leaks$(#undo).bind(mouseenter,function(){ $(<div>Undo</div>).tooltipFor(this)})
    22. 22. BEST PRACTICESMemory Leaks Undo$(#undo).bind(mouseenter,function(){ $(<div>Undo</div>).tooltipFor(this)})
    23. 23. BEST PRACTICESMemory Leaks $.fn.tooltipFor = function(anchor){ var $el = this .appendTo(document.body) .offset( $(anchor).offset() ) $(anchor).bind(mouseleave,function(ev){ $el.remove() }) }
    24. 24. BEST PRACTICESMemory Leaks Undo $.fn.tooltipFor = function(anchor){ var $el = this .appendTo(document.body) .offset( $(anchor).offset() ) $(anchor).bind(mouseleave,function(ev){ $el.remove() }) }
    25. 25. Leaky Event Handlers: Zombies!
    26. 26. Leaky Event Handlers: Zombies!
    27. 27. BEST PRACTICEScan.Control and Templated Eventsvar 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});
    28. 28. BEST PRACTICESMemory Leaks can.Model Non-Leaking Global Store
    29. 29. BEST PRACTICESMemory Leaks can.Model Non-Leaking Global Store Critical File Taxes Write talk on CanJS Emissions Test
    30. 30. PRODUCTIVITY Global Store Live Binding DeferredsComputed PropertiesPartial View Support
    31. 31. PRODUCTIVITYLive 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})
    32. 32. PRODUCTIVITYLive Binding<input type=text value=<%= coffee.attr("roaster") %> />
    33. 33. PRODUCTIVITYGlobal Store
    34. 34. PRODUCTIVITYDeferreds can.view( todos/todos.ejs, { todos: Todo.findAll(), user: User.findOne( { id: 5 } ) } ) .then(function( frag ){ document.getElementById( todos ) .appendChild( frag ); })
    35. 35. PRODUCTIVITYcan.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){ ... })
    36. 36. PRODUCTIVITYPlugins • Validations • Getter / Setter • Attribute Converters • Backup / Restore • Super • Proxy
    37. 37. EASYPerceived Learning Curve low high low low Library Agnostic
    38. 38. EASY Docs!
    39. 39. EASY Docs!
    40. 40. EASY Docs!
    41. 41. EASY Docs!
    42. 42. EASY Docs!
    43. 43. EASY Docs!
    44. 44. EASY Docs!
    45. 45. EASY Docs!
    46. 46. EASY Docs!
    47. 47. EASY Docs!
    48. 48. EASY Library Support
    49. 49. FAST Live Bind Perf 14 38 63 50Control Initialization 135 81 n/a 135
    50. 50. FAST Live Bind Perf
    51. 51. FASTControl Initialization
    52. 52. SMALL Download Size 8.97k 37k 13k 9.47kDownload Builder
    53. 53. SMALLDownloadBuilder
    54. 54. SMALLDownload Size 40 30 20 10 0 BackboneJS CanJS KnockoutJS BatmanJS AngularJS EmberJS
    55. 55. WHAT’S NEXTLibrary-less Versioncan.route Push StateHandlebars/Mustache Support
    56. 56. http://canjs.us @canjsusTHE BESTOF BOTH WORLDS
    57. 57. PRODUCTIVITYPartial Views <% for( var i = 0; i < todos.length; i++ ) { %> <li><%== can.view.render( /todos/todo.ejs, { todo: todo[ i ] } ) %> </li> <% } %>
    58. 58. PRODUCTIVITYcan.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});

    ×