Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Canjs

8 375 vues

Publié le

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
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×