Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript App Development

135d480b7bf92956adcf5abd04821376?s=47 Rob Tarr
September 09, 2011

JavaScript App Development

This is from a presentation I gave at our local Web Dev Meetup in Dayton, OH.

135d480b7bf92956adcf5abd04821376?s=128

Rob Tarr

September 09, 2011
Tweet

Transcript

  1. JavaScript Application Development Rob Tarr Sparkbox

  2. None
  3. None
  4. None
  5. Goals

  6. Goals • Clean, reusable code

  7. Goals • Clean, reusable code • Fast execution

  8. Google themselves an a test to see if slowing down

    the search process effected users’ behaviour. They essentially made Google slow down vey marginally for a set period of time. They had two groups: a control group, who use Google as normal, and a test group. The test group’s searching habits were monitored over a period of 6 weeks while delays between 100 – 400 milliseconds were applied to their search environment. The test simply showed that the longer the delay was, the fewer searches people were likely to do. http://www.distilled.net/blog/seo/site-speed-for-dummies-pat1/
  9. Goals • Clean, reusable code • Fast execution • Readable

  10. Goals • Clean, reusable code • Fast execution • Readable

    • Works
  11. Resources

  12. Resources Twitter twitter.com/ A constant stream of new ideas and

    experiments...
  13. Resources Twitter twitter.com/ A constant stream of new ideas and

    experiments... @jeresig @paul_irish @commondream @jashkenas @BrendanEich @cowboy @codylindley @rem
  14. Libraries/Frameworks jQuery jquery.com De facto industry standard JavaScript library for

    navigating the muddy waters of the DOM.
  15. Libraries/Frameworks http://trends.builtwith.com/javascript

  16. Libraries/Frameworks jQuery

  17. Libraries/Frameworks $(“.container a”).live(“click”, function(e) { // do stuff here });

    jQuery
  18. Libraries/Frameworks $(“.container a”).live(“click”, function(e) { // do stuff here });

    jQuery $(“.container”).delegate(“a”, “click”, function(e) { // do stuff here });
  19. Libraries/Frameworks $(“.container a”).live(“click”, function(e) { // do stuff here });

    jQuery $(“.container”).delegate(“a”, “click”, function(e) { // do stuff here }); BAD GOOD
  20. Libraries/Frameworks jQuery

  21. Libraries/Frameworks $(“.page .container a”).bind(“click”, function(e) { // do stuff here

    }); jQuery
  22. Libraries/Frameworks $(“.page .container a”).bind(“click”, function(e) { // do stuff here

    }); jQuery $(“.page”).find(“.container”).find(“a”).bind(“click”, function(e) { // do stuff here });
  23. jspef.com

  24. None
  25. 38.26% ↑ 91.30% ↑ 90.53% ↓ 66.90% ↓

  26. Libraries/Frameworks jQuery

  27. Libraries/Frameworks $(“.page .container a”).bind(“click”, function(e) { $(this).addClass(‘clicked’); $(this).data(‘clickCounter’, $(this).data(‘clickCounter’) +

    1); }); jQuery
  28. Libraries/Frameworks $(“.page .container a”).bind(“click”, function(e) { $(this).addClass(‘clicked’); $(this).data(‘clickCounter’, $(this).data(‘clickCounter’) +

    1); }); jQuery $(“.page .container a”).bind(“click”, function(e) { var $this = $(this); $this.addClass(‘clicked’); $this.data(‘clickCounter’, $this.data(‘clickCounter’) + 1); });
  29. Libraries/Frameworks $(“.page .container a”).bind(“click”, function(e) { $(this).addClass(‘clicked’); $(this).data(‘clickCounter’, $(this).data(‘clickCounter’) +

    1); }); jQuery $(“.page .container a”).bind(“click”, function(e) { var $this = $(this); $this.addClass(‘clicked’); $this.data(‘clickCounter’, $this.data(‘clickCounter’) + 1); }); BAD GOOD
  30. Libraries/Frameworks Modernizr www.modernizr.com Useful for using newer features when the

    browser allows.
  31. Libraries/Frameworks modernizr

  32. Libraries/Frameworks <html lang=”en” class="js flexbox canvas canvastext webgl no-touch geolocation

    postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"> modernizr
  33. Libraries/Frameworks modernizr

  34. Libraries/Frameworks <script> if (Modernizr.geolocation) { // do awesome stuff here

    } </script> modernizr
  35. Libraries/Frameworks RequireJS http://requirejs.org/ For managing dependencies and structuring files in

    a sensible manner.
  36. Libraries/Frameworks LabJS labjs.com/ “The core purpose of LABjs is to

    be an all-purpose, on-demand JavaScript loader...”
  37. Libraries/Frameworks <script> $LAB .script("//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js") .script("js/lib/underscore-1.1.6.js") .script("js/lib/backbone.js") .script("js/lib/backbone-localstorage.js") .script("js/lib/handlebars.js") .wait() .script("js/lib/pubsub.js")

    .wait() .script("js/beer.js") .script("js/favorite.js") .script("js/app.js"); </script> labJS
  38. Libraries/Frameworks Handlebars http://www.handlebarsjs.com/ “Handlebars provides the power necessary to let

    you build semantic templateseffectively with no frustration.”
  39. Libraries/Frameworks <script id="beer-list-tpl" type="text/x-template"> <a href="#" class="fav" title="favorite" alt="favorite">&#x2605;</a> <div

    class="beer"> <span class="name">{{name}}</span> {{#if brewery}} <span class="brewery">{{brewery}}</span> {{/if}} </div> <a href="#" class="delete" title="recycle">&#x267A;</a> </script> handlebars
  40. Libraries/Frameworks Backbone documentcloud.github.com/backbone Provides models, collections and views to structure

    your data and keep things organized.
  41. None
  42. None
  43. None
  44. None
  45. Separation of Concerns MVC(ish) Data, actions and presentation should be

    separated from each other.
  46. None
  47. Code Organization

  48. Mini Question Break?

  49. Demo Time github.com/robtarr/beer-app

  50. Last Call for Questions Some rights reserved by ☺ Lee

    J Haywood
  51. Thanks Rob Tarr Sparkbox tar@heysparkbox.com @robtarr