Download
1 / 11
110 likes | 245 Views
Knockout & JavaScript Tips. April 17, 2012 Sioux Falls, SD. Kwen Peterson. Knockout. What is it? Library that allows you to apply an MVVM pattern to your JavaScript Bundled as part of ASP.NET MVC 4 What are the problems it is trying to solve? Declarative Bindings
E N D
Knockout & JavaScript Tips April 17, 2012 Sioux Falls, SD Kwen Peterson
Knockout • What is it? • Library that allows you to apply an MVVM pattern to your JavaScript • Bundled as part of ASP.NET MVC 4 • What are the problems it is trying to solve? • Declarative Bindings • More readable than X different ajax functions. • Automatic UI Refresh • State changes, UI should update automatically! • Dependency Tracking • Computed values • Templating • Make your JavaScript look like a model
Knockout vs. Backbone • Knockout: • Focused on providing MVVM pattern in JavaScript, two-way data binding, UI, smaller learning curve • “This view has way too many ajax calls!” • Backbone: • Focused on structure of providing model-like binding and interfaces for comsuming REST data, harder learning curve, more powerful? • “I need to design a ‘one page app’ like Gmail.” • Additional libraries: • Knockback: Backbone to handle back-end communication, getting/sending data, Knockout for the view level UI. #Brilliant? • Backbone.Marionette: “Composite application library…” “…to simplify the construction of large scale JavaScript applications.” • Upshot.js: Knockout add-in to handle the back-end data pulls/pushes back to the server. • Spine, SproutCore, batman.js are others. • *Update!* Scott Guthrie (Scott Hanselman’s boss) was on a LIDNUG Q&A yesterday, & said that the focus of ASP.NET 4 was Web API. The focus of the next ASP.NET release will be data modeling, change tracking. Mentioned Upshot.
Demo • http://learn.knockoutjs.com • Single page applications
JavaScript Tips • Use .on() & .off() to attach event handlers • .on() replaces .bind() .delegate() .live() • .off() replaces .unbind() .die() .undelegate() • Have something you need to fire only once? Use .one() • Namespacing • Easy way to avoid object collision • Var my = my || {};
jQuery Tip #1 • Object Caching • // Loop • for (vari=0; i<100; i++) { $(‘ul.special’).append(‘<li>’+i+’</li>’);} • Vs. • var $ul = $(‘ul.special’);for (vari=0; i<100; i++) { $ul.append(‘<li>’+i+’</li>’);} • $(‘#CU1’).show(); $(‘#CU1’).hide(); • Vs. • var$CU1 = $(‘#CU1’);$CU1.show(); $CU1.hide();
jQuery Tip #2 • Optimize Selectors • Selectors are read right to left. • Push the most specific selector as far to the right as possible. • //Instead of this:$(‘#id p’); • // Try one of these:$(‘p’, ‘#id’); • $(‘#id’).find(‘p’); • $(‘#id’).children(‘p’); • Priority: #id tag .class • Native document.getElementBy*()
jQuery Tip #3 • Leverage Event Delegation • // Instead of this: • $(‘table td’).on(‘click’, function() { // Do Something}); • // Do this: • $(‘table’).on(‘click’, ‘td’, function() { // Do Something});
jQuery #4 • Script tags in the header block rendering • ALL requests are blocked while the page waits to download, parse (possibly compile) and execute the script. • Have to have all script & css that is referenced in the header before rendering of the page will start. • Move these out of the header, to the footer if possible • (This is hard, because $(document).ready is so awesome.) • Header: window.q=[]; window.$=function(f){ q.push(f); }; • <script type='text/javascript'>window.q=[];window.$=function(f){q.push(f)}</script> • Footer: $.each(q,function(index,f){ $(f) }); • <script type="text/javascript">$.each(q,function(i,f){$(f)})</script> • *Disclaimer*: The above come from a StackOverflow blog post. There was a counter-argument Hacker News article attempting to debunk it.
Sources • http://johnpapa.net/3-quick-javascript-tips-for-.net-developers • http://www.joezimjs.com/javascript/3-simple-things-to-make-your-jquery-code-awesome/ • http://www.andismith.com/blog/2011/11/on-and-off/ • http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax
