jQuery Conference Austin Sept 2013
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery Conference Austin Sept 2013

on

  • 1,283 views

The State of jQuery, and some tips on getting the best performance from modern browser engines.

The State of jQuery, and some tips on getting the best performance from modern browser engines.

Statistics

Views

Total Views
1,283
Views on SlideShare
1,283
Embed Views
0

Actions

Likes
1
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery Conference Austin Sept 2013 Presentation Transcript

  • 1. The State of jQuery Dave Methvin President, jQuery Foundation jQuery Conference Austin September, 2013
  • 2. • Created in March 2012 • Coordinates jQuery team work o Code o Documentation o Infrastructure o Events The jQuery Foundation
  • 3. • A non-profit organization • Funded by o Conferences o Donations o Memberships o YOU or your company can be a member  http://jquery.org/join The jQuery Foundation Is...
  • 4. Founding Members Platinum Member
  • 5. Gold Members
  • 6. • http://github.com/jquery • jQuery Core, UI, Mobile • Sizzle selector engine • QUnit unit test framework • jQuery Migrate plugin • TestSwarm CI testing • Documentation sites jQuery Foundation Projects
  • 7. ● Support jQuery projects ● Support web developers ● Support web standards ● Advocate for developer needs ● Participate in standards process ○ W3C ○ ECMA 262 (JavaScript) jQuery Foundation Initiatives
  • 8. Important Incoming News
  • 9. • jQuery 1.x vs. 2.x o jQuery 1.x still supports IE 6/7/8 o jQuery 2.x supports modern browsers o Both are maintained by the team The jQuery Core Plan
  • 10. • Released jQuery 1.9 in January • Released jQuery 2.0 in April • Released jQuery 1.10 in June • API version sync o 1.10.0 2.0.0 o 1.11.0 2.1.0 o etc. o Patch versions may be on just one branch 1.x/2.x APIs Stay in Sync
  • 11. • Identifies things your code is doing that jQuery 1.9+ doesn't support anymore • Actually makes older code work • Lets you use jQuery 1.9+ with code that hasn't been upgraded yet jQuery Migrate Plugin
  • 12. jQuery Migrate Example
  • 13. • Shown in the uncompressed version • Problem and solutions documented jQuery Migrate Warnings
  • 14. In jQuery, every change is a breaking change for some poor developer. The Moral of the Story
  • 15. Coming This Fall: jQuery 1.11/2.1
  • 16. Coming This Fall: jQuery 1.11/2.1
  • 17. ● jQuery team will publish to Bower ● jQuery team will publish to npm ● You can manage dependencies ○ bower install jquery ○ bower install jquery#1.11.0 ○ npm install jquery ● Use a component.json file for Bower ● Use a package.json file for npm 1.11/2.1: Dependency Management
  • 18. • Asynchronous Module Definition • AMD takes care of internal dependencies • You can choose the modules to load • Load just what you need • Use r.js to build a single file • More flexible and granular than previous custom grunt build process 1.11/2.1: Uses AMD internally
  • 19. ● Previously: jQuery runs feature detects all at once, on jquery.js/page load ○ Impacts page load performance ● Now: Individual feature detect runs the first time the feature is used ○ Defers the impact until needed ○ Doesn't run detects for sub-modules that aren't used/called by your code! 1.11/2.1: Just-In-Time Detects
  • 20. • You don't have to use Bower • You don't have to use npm • You don't have to use AMD • Just include from a <script> tag • You'll still get the performance boost 1.11/2.1: Still can use a CDN!
  • 21. • Beta coming out within a month • Give it a try • Tell us when you think it's ready o Which means you have to try it 1.11/2.1: When?
  • 22. Let's Shut This Guy Up, Forever
  • 23. ● Dimensional changes make the browser recalculate/redraw the page ○ Changing element sizes ○ Adding/removing classes or IDs ○ Adding new content ● We've reduced these where possible ○ Ex: .removeClass() when nothing changes ● A lot still depends on jQuery developers 1.11/2.1 Goal: Fewer Forced Layouts
  • 24. "A poor workman blames his tools." Know How Your Tools Work
  • 25. "Плохому танцору яйца мешают." Know How Your Tools Work
  • 26. "A poor dancer blames his balls." Know How Your Tools Work
  • 27. ● jQuery simplifies/shortens code ● It doesn't try to hide the browser model ● You still need to Know the Browser ● Especially the layout engine Understand the Browser
  • 28. ● A.K.A. Reflow ● Whenever you change the HTML or CSS on a page, the browser must re-apply any applicable CSS rules, and must recalculate the layout whenever dimensions of elements change. ● May affect all or just part of the page. What is a Layout?
  • 29. ● Make a change to the document that (potentially) affects dimensions ● Immediately ask the browser about the new dimensions ○ "Immediately" meaning, "Before control returns to the browser from your script." What is a Forced Layout?
  • 30. ● Slow page load time ○ Often a result of .ready() abuse ● "Janky" page behavior when scrolling or during animations Impact of Too Many Layouts
  • 31. http://jsfiddle.net/qjncp/show/ $(".box").on("mouseover mouseout", function(e) { $(this).toggleClass("highlight", e.type === "mouseover"); var size = $(this).width(); $("#heart").width(size); }); Simple Forced Layout Example
  • 32. http://jsfiddle.net/qjncp/show/ $(".box").on("mouseover mouseout", function(e) { $(this).toggleClass("highlight", e.type === "mouseover"); var size = $(this).width(); $("#heart").width(size); }); Simple Forced Layout Example FORCED LAYOUT
  • 33. http://jsfiddle.net/qjncp/show/ ● Google Chrome ● Internet Explorer 11 Demo: Finding Forced Layouts
  • 34. ● Scroll event occurs ● Inside the scroll event handler a. Add a little bit of content b. Ask the browser, "Did I fill it enough?" c. If not, go back to (a) d. Several times through...exit Patterns To Avoid: Infinite Scroll
  • 35. ● Scroll event occurs ● Inside the scroll event handler a. Add a little bit of content b. Ask the browser, "Did I fill it enough?" c. If not, go back to (a) d. Several times through...exit Patterns To Avoid: Infinite Scroll FULL-PAGE FORCED LAYOUT ON EVERY SCROLL EVENT! FULL-PAGE FORCED LAYOUT ON EVERY SCROLL EVENT! (cough, Facebook)
  • 36. ● Use the regularity of grid layouts to simplify your calculations, instead of asking the browser to calculate! ● E.g., each row is 200px high, the page has scrolled down 740px, we need to add 4 more rows of content Infinite Scroll Strategy
  • 37. Don't ask the browser a question that is hard for it to figure out but easy for you to know (or track). $(":hidden") vs $(".hidden") Avoiding Forced Layout
  • 38. ● jQuery selector extension ● Can't use fast native DOM selector code ● ":hidden" elements defined as "don't take up space in the document" ● Selecting these elements forces layout if anything has changed in the DOM $(":hidden")
  • 39. ● Standard CSS selector (by class) ● Uses fast DOM selector code ● Just needs to look at the DOM tree ○ Not CSS, even if CSS has recently changed ● Won't force a layout ● Can be combined with CSS transitions ● Fast and battery efficient $(".hidden")
  • 40. Throttle high frequency events like mousemove or scroll; handle with requestAnimationFrame www.html5rocks.com/en/tutorials/speed/rendering/ Avoiding Forced Layout
  • 41. Modern browsers have the tools to find these issues and make you look like a web development star! Know Your Tools
  • 42. Twitter: @davemethvin GitHub: @dmethvin IRC (Freenode): DaveMethvin #jquery-dev Email: dave@jquery.com Questions?