0
jQConCondensed edition
Review• Selector performance  – ID  – Tag name  – Name, Class• Use CSS classes to control state• Specificity helps  – Ex: ...
PerformanceVisibility:                             Business:    – Install Firebug & Yslow               – Performance is i...
Contextual jQuery•   Handle initial state with CSS•   Write reusable code•   Delegate event handling•   Anticipate user ac...
Unit Testing•   qUnit•   qUnit•   qUnit•   And qUnit
Grunt• Build tool for JS• Included tasks   – Creates scaffolding   – Lint (JSHint)   – Unit testing (qUnit)   – Concat/Min...
PhantomJS• Headless WebKit  – Like the horseman? Why is this cool?• Grunt + PhantomJS + qUnit = ?
DEMONSTRATION
Recap of Steps•   brew install node•   brew install phantomjs•   npm install -g grunt•   grunt -help (Optional)•   grunt i...
Tools•   YSlow, PageSpeed•   JavaScript Errors Notifier Chrome Extension•   iWebInspector•   JSHint (for vim)
Resources• Wiki pages  – jQuery Conf 2012  – Best Practices: jQuery  – Web Dev Quirks• Read more  – Introducing Grunt  – j...
Upcoming SlideShare
Loading in...5
×

jQuery Conf 2012

932

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
932
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
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
  • Transcript of "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 = ?
    8. 8. DEMONSTRATION
    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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×