Canjs

• 1. http://canjs.us@canjsus

2. Why? Prevents Leaks Ease of Use Fast 3. Whats 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 DeanoldVal //-> josh});person.attr(name) //-> joshperson.name //-> joshperson.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 ) -> fragmentcan.view(messageEJS, {message : Hello World}) //-> frag Hello World 10. EmbeddedJS TemplatesFavorite tag is -> My favorite tag is BlinkFavorite tag is -> Favorite tag is Blink 11. EmbeddedJS Templates No Developerscan.view(devs.ejs,{devs: [Andy,Fred]})//-> frag AndyFred 12. EJS Live Binding No Developersvar devs = new can.Observe.List([{name : Andy}, {name : Fred}])can.view(devs.ejs,{devs : devs})//-> frag AndyFred 13. Why? Prevents Leaks Speed Flexibility + Libraries Ease of Use Features vs Size 14. A tooltip.Undo$(#undo).bind(mouseenter,function(){$(

).tooltipFor(this)}) 15. Whats 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 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($(

),{anchor : this}); 19. Non-leaking Global StoreCritical Due Today File TaxesBrush Teeth Write talk on CanJS Write talk on CanJS Emissions TestCheck 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? saferfaster easier smaller library-erhttp://canjs.us@canjsus