jQuery Conference Austin Sept 2013

2,882
-1

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,882
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

jQuery Conference Austin Sept 2013

  1. 1. The State of jQuery Dave Methvin President, jQuery Foundation jQuery Conference Austin September, 2013
  2. 2. • Created in March 2012 • Coordinates jQuery team work o Code o Documentation o Infrastructure o Events The jQuery Foundation
  3. 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. 4. Founding Members Platinum Member
  5. 5. Gold Members
  6. 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. 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. 8. Important Incoming News
  9. 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. 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. 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. 12. jQuery Migrate Example
  13. 13. • Shown in the uncompressed version • Problem and solutions documented jQuery Migrate Warnings
  14. 14. In jQuery, every change is a breaking change for some poor developer. The Moral of the Story
  15. 15. Coming This Fall: jQuery 1.11/2.1
  16. 16. Coming This Fall: jQuery 1.11/2.1
  17. 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. 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. 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. 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. 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. 22. Let's Shut This Guy Up, Forever
  23. 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. 24. "A poor workman blames his tools." Know How Your Tools Work
  25. 25. "Плохому танцору яйца мешают." Know How Your Tools Work
  26. 26. "A poor dancer blames his balls." Know How Your Tools Work
  27. 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. 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. 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. 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. 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. 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. 33. http://jsfiddle.net/qjncp/show/ ● Google Chrome ● Internet Explorer 11 Demo: Finding Forced Layouts
  34. 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. 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. 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. 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. 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. 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. 40. Throttle high frequency events like mousemove or scroll; handle with requestAnimationFrame www.html5rocks.com/en/tutorials/speed/rendering/ Avoiding Forced Layout
  41. 41. Modern browsers have the tools to find these issues and make you look like a web development star! Know Your Tools
  42. 42. Twitter: @davemethvin GitHub: @dmethvin IRC (Freenode): DaveMethvin #jquery-dev Email: dave@jquery.com Questions?
  1. A particular slide catching your eye?

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

×