Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Canjs

8.343 visualizaciones

Publicado el

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

  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ◆◆◆ https://tinyurl.com/rockhardxxx
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

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

×