• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CanJS: The Best of Both Worlds
 

CanJS: The Best of Both Worlds

on

  • 7,661 views

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.

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.

Statistics

Views

Total Views
7,661
Views on SlideShare
7,608
Embed Views
53

Actions

Likes
10
Downloads
123
Comments
1

6 Embeds 53

https://twitter.com 45
https://twimg0-a.akamaihd.net 3
https://si0.twimg.com 2
http://twitter.com 1
http://www.docseek.net 1
http://www.slashdocs.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 CanJS: The Best of Both Worlds Presentation Transcript

  • http://canjs.us @canjsusTHE BESTOF BOTH WORLDS
  • Brian Moschel@bitovihttp://bitovi.com
  • 2010WHY 2012WE’REHERE
  • WE {WHATWANT Small Fast Best Practices Productivity Easy to Learn
  • THE TWO WORLDS Light HeavyEasy to Learn Live Binding Small Size Computed Properties Basic MVC Memory Safety
  • THE BEST OF BOTH WORLDS Easy to Learn Live Binding Small Size Computed Properties Basic MVC Memory Safety
  • THE BEST OF BOTH WORLDS Easy to Learn Live Binding Small Size Computed Properties Basic MVC Memory Safety
  • THE BEST OF BOTH WORLDS R&B Hip Hop
  • THE BEST OF BOTH WORLDS R&B Hip Hop
  • WHEREIT CAME FROM... StealJS
  • WHAT’S INSIDE { • can.Construct • can.Observe • can.Model • can.Control • can.view • can.EJS • can.route
  • JUST SHOWME A MATRIXALREADY
  • 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
  • DEMO
  • BESTPRACTICES MVC Separation Memory Safety REST Service LayerRouting Logic in Controller
  • BEST PRACTICESModel - View - Controller can.Construct can.Control can.view can.Observe can.route can.EJS can.Model
  • 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) });
  • 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’);
  • 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);
  • 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>
  • BEST PRACTICESMemory Leaks$(#undo).bind(mouseenter,function(){ $(<div>Undo</div>).tooltipFor(this)})
  • BEST PRACTICESMemory Leaks Undo$(#undo).bind(mouseenter,function(){ $(<div>Undo</div>).tooltipFor(this)})
  • BEST PRACTICESMemory Leaks $.fn.tooltipFor = function(anchor){ var $el = this .appendTo(document.body) .offset( $(anchor).offset() ) $(anchor).bind(mouseleave,function(ev){ $el.remove() }) }
  • BEST PRACTICESMemory Leaks Undo $.fn.tooltipFor = function(anchor){ var $el = this .appendTo(document.body) .offset( $(anchor).offset() ) $(anchor).bind(mouseleave,function(ev){ $el.remove() }) }
  • Leaky Event Handlers: Zombies!
  • Leaky Event Handlers: Zombies!
  • 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});
  • BEST PRACTICESMemory Leaks can.Model Non-Leaking Global Store
  • BEST PRACTICESMemory Leaks can.Model Non-Leaking Global Store Critical File Taxes Write talk on CanJS Emissions Test
  • PRODUCTIVITY Global Store Live Binding DeferredsComputed PropertiesPartial View Support
  • 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})
  • PRODUCTIVITYLive Binding<input type=text value=<%= coffee.attr("roaster") %> />
  • PRODUCTIVITYGlobal Store
  • PRODUCTIVITYDeferreds can.view( todos/todos.ejs, { todos: Todo.findAll(), user: User.findOne( { id: 5 } ) } ) .then(function( frag ){ document.getElementById( todos ) .appendChild( frag ); })
  • 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){ ... })
  • PRODUCTIVITYPlugins • Validations • Getter / Setter • Attribute Converters • Backup / Restore • Super • Proxy
  • EASYPerceived Learning Curve low high low low Library Agnostic
  • EASY Docs!
  • EASY Docs!
  • EASY Docs!
  • EASY Docs!
  • EASY Docs!
  • EASY Docs!
  • EASY Docs!
  • EASY Docs!
  • EASY Docs!
  • EASY Docs!
  • EASY Library Support
  • FAST Live Bind Perf 14 38 63 50Control Initialization 135 81 n/a 135
  • FAST Live Bind Perf
  • FASTControl Initialization
  • SMALL Download Size 8.97k 37k 13k 9.47kDownload Builder
  • SMALLDownloadBuilder
  • SMALLDownload Size 40 30 20 10 0 BackboneJS CanJS KnockoutJS BatmanJS AngularJS EmberJS
  • WHAT’S NEXTLibrary-less Versioncan.route Push StateHandlebars/Mustache Support
  • http://canjs.us @canjsusTHE BESTOF BOTH WORLDS
  • PRODUCTIVITYPartial Views <% for( var i = 0; i < todos.length; i++ ) { %> <li><%== can.view.render( /todos/todo.ejs, { todo: todo[ i ] } ) %> </li> <% } %>
  • 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});