jQuery Conf 2012
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


jQuery Conf 2012






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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 Presentation Transcript

  • 1. jQConCondensed edition
  • 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. 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. Contextual jQuery• Handle initial state with CSS• Write reusable code• Delegate event handling• Anticipate user actions – Scrolling – Focus/blur – Typing• .one()
  • 5. Unit Testing• qUnit• qUnit• qUnit• And qUnit
  • 6. Grunt• Build tool for JS• Included tasks – Creates scaffolding – Lint (JSHint) – Unit testing (qUnit) – Concat/Minify (UglifyJS)
  • 7. PhantomJS• Headless WebKit – Like the horseman? Why is this cool?• Grunt + PhantomJS + qUnit = ?
  • 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. Tools• YSlow, PageSpeed• JavaScript Errors Notifier Chrome Extension• iWebInspector• JSHint (for vim)
  • 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