Your SlideShare is downloading. ×
jQuery Conf 2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

jQuery Conf 2012

899
views

Published on

Published in: Technology, Design

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
899
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

    • 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 = ?
    • 8. DEMONSTRATION
    • 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