Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Canjs

8,087 views

Published on

Introduction to CanJS and why you should use it as your MVC framework

  • Be the first to comment

Canjs

  1. 1. http://canjs.us@canjsus
  2. 2. Why?• Prevents Leaks• Ease of Use• Fast
  3. 3. What’s Inside• can.Construct• can.Observe• can.Model• can.Control• can.view• can.EJS• can.route
  4. 4. can.Construct(static, proto)var Person = can.Construct({ init : function (name) { this.name = name; }});var curtis = new Person("Curtis");curtis.name
  5. 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) //-> joshperson.name //-> joshperson.attr(name,Josh Dean‟);
  6. 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. 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. 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. 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. 10. EmbeddedJS TemplatesFavorite tag is <%= ‟<blink>Blink</blink>‟ %>-> My favorite tag is <blink>Blink</blink>Favorite tag is <%== ‟<blink>Blink</blink>‟ %>-> Favorite tag is Blink
  11. 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. 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. 13. Why?• Prevents Leaks• Speed• Flexibility + Libraries• Ease of Use• Features vs Size
  14. 14. A tooltip. Undo$(#undo).bind(mouseenter,function(){ $(<div>Undo</div>).tooltipFor(this)})
  15. 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. 16. Leaks
  17. 17. Templated Events “{option} eventName”
  18. 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($(<div>Undo</div>),{ anchor : this});
  19. 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. 20. Non-leaking Global Store Awesome Developers
  21. 21. Easy To Use
  22. 22. Plugins• Validations• Getter / Setter• Serialize / Deserialize• Backup / Restore• Super• Proxy$(“#todos”).html( „todos.ejs‟, Todo.findAll() )
  23. 23. can.Control and Backbone.View http://jsperf.com/tabs-timing-test
  24. 24. Live Binding http://jsfiddle.net/JMWf4/5/
  25. 25. Live Binding*can.zepto.js, angular/ember not tested, ask me why http://jsperf.com/canjs-ejs-live-bind
  26. 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. 27. Library Support
  28. 28. Questions? safer faster easier smaller library-er http://canjs.us @canjsus

×