jQuery Conf 2012
- 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. Performance Visibility: 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 gained Interactivity: – Performance is most important – Profile your $.ready to sites that get millions of hits – Minimize initialization on page load Tips: – Low hanging fruit first Responsiveness: – Google Analytics to record data – throttle/debounce events about your loads – 8-bit PNG's 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
Editor's Notes
- #2: Explain the format, # of attendees, the general vibeBreakout sessions
- #3: Explain why the selector performance orderExplain why the specificity helps
- #4: 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
- #5: 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
- #6: 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
- #7: 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.
- #8: PhantomJS is cool because it runs like a phantom.Typical qUnit opens an actual browser, this runs on the command line.
- #11: JSHint has plugins for other editors as well.
- #12: Slides and notes from the conferencecan be found in the wikiBest PracticesWeb dev quirks – this may or may not be useful to you