jquery conf 2012
TRANSCRIPT
![Page 1: jQuery Conf 2012](https://reader036.vdocuments.mx/reader036/viewer/2022082808/554f64c0b4c905c8088b4cab/html5/thumbnails/1.jpg)
jQConCondensed edition
![Page 2: jQuery Conf 2012](https://reader036.vdocuments.mx/reader036/viewer/2022082808/554f64c0b4c905c8088b4cab/html5/thumbnails/2.jpg)
Review
• Selector performance– ID– Tag name– Name, Class
• Use CSS classes to control state• Specificity helps– Ex: $(‘div.ui-content’); instead of $(‘.ui-content’)
![Page 3: jQuery Conf 2012](https://reader036.vdocuments.mx/reader036/viewer/2022082808/554f64c0b4c905c8088b4cab/html5/thumbnails/3.jpg)
Performance
Visibility:– Install Firebug & Yslow– Know what is slowing down
your page loads
Interactivity:– Profile your $.ready– Minimize initialization on
page load
Responsiveness:– throttle/debounce events
Business:– Performance is important for the
product– Performance can be expensive– Optimize intelligently - weigh the
LOE and the utility gained– Performance is most important
to sites that get millions of hits
Tips: – Low hanging fruit first– Google Analytics to record data
about your loads– 8-bit PNG's with alpha
![Page 4: jQuery Conf 2012](https://reader036.vdocuments.mx/reader036/viewer/2022082808/554f64c0b4c905c8088b4cab/html5/thumbnails/4.jpg)
Contextual jQuery
• Handle initial state with CSS• Write reusable code• Delegate event handling• Anticipate user actions– Scrolling– Focus/blur– Typing
• .one()
![Page 5: jQuery Conf 2012](https://reader036.vdocuments.mx/reader036/viewer/2022082808/554f64c0b4c905c8088b4cab/html5/thumbnails/5.jpg)
Unit Testing
• qUnit• qUnit• qUnit• And qUnit
![Page 6: jQuery Conf 2012](https://reader036.vdocuments.mx/reader036/viewer/2022082808/554f64c0b4c905c8088b4cab/html5/thumbnails/6.jpg)
Grunt
• Build tool for JS• Included tasks– Creates scaffolding– Lint (JSHint)– Unit testing (qUnit)– Concat/Minify (UglifyJS)
![Page 7: jQuery Conf 2012](https://reader036.vdocuments.mx/reader036/viewer/2022082808/554f64c0b4c905c8088b4cab/html5/thumbnails/7.jpg)
PhantomJS
• Headless WebKit– Like the horseman? Why is this cool?
• Grunt + PhantomJS + qUnit = ?
![Page 8: jQuery Conf 2012](https://reader036.vdocuments.mx/reader036/viewer/2022082808/554f64c0b4c905c8088b4cab/html5/thumbnails/8.jpg)
DEMONSTRATION
![Page 9: jQuery Conf 2012](https://reader036.vdocuments.mx/reader036/viewer/2022082808/554f64c0b4c905c8088b4cab/html5/thumbnails/9.jpg)
Recap of Steps
• brew install node• brew install phantomjs• npm install -g grunt• grunt -help (Optional)• grunt init (Optional)• grunt init:jquery• grunt qunit
![Page 10: jQuery Conf 2012](https://reader036.vdocuments.mx/reader036/viewer/2022082808/554f64c0b4c905c8088b4cab/html5/thumbnails/10.jpg)
Tools
• YSlow, PageSpeed• JavaScript Errors Notifier Chrome Extension• iWebInspector• JSHint (for vim)
![Page 11: jQuery Conf 2012](https://reader036.vdocuments.mx/reader036/viewer/2022082808/554f64c0b4c905c8088b4cab/html5/thumbnails/11.jpg)
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