jQuery Conf 2012


Published on

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Explain the format, # of attendees, the general vibeBreakout sessions
  • Explain why the selector performance orderExplain why the specificity helps
  • If it takes you more than a day to implement 1 increase in performance, it is probably not worthwhile. Gauge the effort with the importanceYslow - Initialization after page loadProfilingThrottle/debounce
  • Initial state with CSS goes against jQuery Mobile, that may mean a change for UIE.Delegating event handling - CPU saved on initial binding: 1 container vs multiple child elementsExamples: - Scrolling – FB Like/audio/images - Focus/blur – form validation/autocomplete - Typing – load next pages in a multi-step process
  • It seems that the jQuery community has chosen a unit testing framework unanimously.A unit testing framework is only a unit testing framework.qUnit has thrived because of Grunt & PhantomJS
  • This was created by Ben Alman of Bocoup.He created this to solve many problems, but the biggest problem he solved was eliminating the configuration/setup phase of a project to use Linting, unit testing, and Concat/Minify.
  • PhantomJS is cool because it runs like a phantom.Typical qUnit opens an actual browser, this runs on the command line.
  • JSHint has plugins for other editors as well.
  • Slides and notes from the conferencecan be found in the wikiBest PracticesWeb dev quirks – this may or may not be useful to you
  • jQuery Conf 2012

    1. 1. jQConCondensed edition
    2. 2. Review• Selector performance – ID – Tag name – Name, Class• Use CSS classes to control state• Specificity helps – Ex: $(‘div.ui-content’); instead of $(‘.ui-content’)
    3. 3. PerformanceVisibility: Business: – Install Firebug & Yslow – Performance is important for – Know what is slowing down the product your page loads – Performance can be expensive – Optimize intelligently - weigh the LOE and the utility gainedInteractivity: – Performance is most important – Profile your $.ready to sites that get millions of hits – Minimize initialization on page load Tips: – Low hanging fruit firstResponsiveness: – Google Analytics to record data – throttle/debounce events about your loads – 8-bit PNGs with alpha
    4. 4. Contextual jQuery• Handle initial state with CSS• Write reusable code• Delegate event handling• Anticipate user actions – Scrolling – Focus/blur – Typing• .one()
    5. 5. Unit Testing• qUnit• qUnit• qUnit• And qUnit
    6. 6. Grunt• Build tool for JS• Included tasks – Creates scaffolding – Lint (JSHint) – Unit testing (qUnit) – Concat/Minify (UglifyJS)
    7. 7. PhantomJS• Headless WebKit – Like the horseman? Why is this cool?• Grunt + PhantomJS + qUnit = ?
    9. 9. Recap of Steps• brew install node• brew install phantomjs• npm install -g grunt• grunt -help (Optional)• grunt init (Optional)• grunt init:jquery• grunt qunit
    10. 10. Tools• YSlow, PageSpeed• JavaScript Errors Notifier Chrome Extension• iWebInspector• JSHint (for vim)
    11. 11. Resources• Wiki pages – jQuery Conf 2012 – Best Practices: jQuery – Web Dev Quirks• Read more – Introducing Grunt – jQuery Plugins w/ Grunt & qUnit – https://github.com/cowboy/grunt – qUnit Intro