Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a jQuery Conf 2012
Semelhante a jQuery Conf 2012 (20)
Último
Último (20)
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
Notas do Editor
- 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