Successfully reported this slideshow.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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') //-> 'josh' person.name //-> 'josh' person.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 Templates Favorite 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 Events var 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

Editor's Notes

  • Hello, I&apos;m Justin Meyer from BitoviI&apos;m very proud that this is the second time Bitovi (formerly Jupiter) has sponsered JSConfThis year it comes at an important time for us. Not only are we announcing the rebranding at this conference (we are Bitovi now), we are releasing thenext version of JavaScriptMVC&apos;s MVC parts called CanJS.In this talk, I&apos;ll introduce what&apos;s inside CanJS and talk about why, despite a lot of great existing MVC libraries, we think CanJS is the best one the market.
  • It will fix the memory leaks that you probably don’t even know you have.Fastest control initialization and live template binding. Your app will start fast and run fast.And it’s super easy to pick up, we documented the hello out of it.
  • positivity
  • A basic constructor function helper. Useful for providing inheritance. All of JMVC’s constructors inherit from it.
  • A basic constructor function helper. Useful for providing inheritance
  • A basic constructor function helper. Useful for providing inheritance hooks up observes to your back end with declarative service bindings
  • A basic constructor function helper. Useful for providing inheritance
  • A basic constructor function helper. Useful for providing inheritance - A special observe that is cross bound to the route - pretty urls
  • ----- Meeting Notes (4/3/12 00:38) -----embedded js
  • show changing the obseveralph giving the talk
  • Leaking Event HandlersCleaning Data Stores
  • Impossible to create memory leaksPeople don&apos;t know what they are doingCan see it in something as simple as a tool tip where you mouseover the elementand it shows the tooltip widget.You might use this tooltip widget like the following: listen on an anchor element, create the content for the tooltip call tooltipFor with the anchor
  • can.Control fixes this with templated event handlersYou can bind events that will always be unbound auto-magically
  • ----- Meeting Notes (4/3/12 00:38) -----cleaned up
  • The next way CanJS helps with memory is through it’s non-leaking global store. Say we have 2 Todo lists, Critical Todos and today’s todos. These lists might get back data for the same instance of a todo. The problem happens when a user changes properties on a todo that exists in both lists. Both lists need to be listening to property changes on the same todo instance.Model needs to see that the data it retrieves belongs to the same instance and return the previously created instance instead of creating a new one.Most MVC libraries either ignore it or solve it with a model store that has all instances, when data is retrieved for an instance, it checks if the instance is already created and uses that instance instead of creating a new one.The problem with this is for long-lived applications, you are constantly collecting unused instances, which fills memory. The developer has to tell the store when to flush instances.CanJS solves this by keeping things in the store only when it knows you are interested in them. How do you express interest? Well by binding to the instance. So, Model keeps instances in the store only while they have event handlers.This, combined with templated event handling, means that simply by replacing the todo list ELEMENTs with a list of “Awesome Developers”&lt;li class=“&lt;%= todo.attr(‘complete’) ? “done” :”” %&gt;” &gt;Very common, but tricky and critical problem for MVC.CanJS has a non-leaking global store, that allows it to solve the 2 ‘instance’ problem without permanently storing all model instances.
  • All controls are torn down, when all controls are torn down, all event handlers are unbound. When an model instances event handlers are unbound, it’s removed from the store.If you don’t understand this, that’s ok … the big take away is that it’s pretty much impossible to make a leaking CanJS app … You bind and forget ….
  • Set out to make CanJS the best documented library.Awesome overview page with it’s sweet navigation, underlying docs for every function, method, attribute, and demo applications for each component.Annotated SourceAnd hire us for training, support, or development
  • deep bindingthe flexibility to switch between libraries without losing all your skills and even some of your (code)
  • Hello, I&apos;m Justin Meyer from BitoviI&apos;m very proud that this is the second time Bitovi (formerly Jupiter) has sponsered JSConfThis year it comes at an important time for us. Not only are we announcing the rebranding at this conference (we are Bitovi now), we are releasing thenext version of JavaScriptMVC&apos;s MVC parts called CanJS.In this talk, I&apos;ll introduce what&apos;s inside CanJS and talk about why, despite a lot of strong competition, we think CanJS is the best MVC library on the market.
  • ×