jquery conference austin sept 2013
TRANSCRIPT
![Page 1: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/1.jpg)
The State of jQueryDave Methvin
President, jQuery FoundationjQuery Conference Austin
September, 2013
![Page 2: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/2.jpg)
![Page 3: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/3.jpg)
• Created in March 2012• Coordinates jQuery team work
o Codeo Documentationo Infrastructureo Events
The jQuery Foundation
![Page 4: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/4.jpg)
• A non-profit organization• Funded by
o Conferenceso Donationso Membershipso YOU or your company can be a
member http://jquery.org/join
The jQuery Foundation Is...
![Page 5: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/5.jpg)
Founding Members
Platinum Member
![Page 6: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/6.jpg)
Gold Members
![Page 7: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/7.jpg)
• 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
![Page 8: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/8.jpg)
● Support jQuery projects● Support web developers● Support web standards● Advocate for developer needs● Participate in standards process
○ W3C○ ECMA 262 (JavaScript)
jQuery Foundation Initiatives
![Page 9: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/9.jpg)
Important Incoming News
![Page 10: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/10.jpg)
• jQuery 1.x vs. 2.xo jQuery 1.x still supports IE 6/7/8o jQuery 2.x supports modern browserso Both are maintained by the team
The jQuery Core Plan
![Page 11: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/11.jpg)
• 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.0o 1.11.0 2.1.0o etc.o Patch versions may be on just one
branch
1.x/2.x APIs Stay in Sync
![Page 12: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/12.jpg)
• 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
![Page 13: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/13.jpg)
jQuery Migrate Example
![Page 14: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/14.jpg)
• Shown in the uncompressed version• Problem and solutions documented
jQuery Migrate Warnings
![Page 15: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/15.jpg)
In jQuery, every change is a breaking change
for some poor developer.
The Moral of the Story
![Page 16: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/16.jpg)
Coming This Fall: jQuery 1.11/2.1
![Page 17: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/17.jpg)
Coming This Fall: jQuery 1.11/2.1
![Page 18: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/18.jpg)
● 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
![Page 19: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/19.jpg)
• 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
![Page 20: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/20.jpg)
● 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
![Page 21: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/21.jpg)
• 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!
![Page 22: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/22.jpg)
• 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?
![Page 23: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/23.jpg)
Let's Shut This Guy Up, Forever
![Page 24: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/24.jpg)
● 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
![Page 25: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/25.jpg)
"A poor workman blames his tools."
Know How Your Tools Work
![Page 26: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/26.jpg)
"Плохому танцору яйца мешают."
Know How Your Tools Work
![Page 27: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/27.jpg)
"A poor dancer blames his balls."
Know How Your Tools Work
![Page 28: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/28.jpg)
● 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
![Page 29: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/29.jpg)
● 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?
![Page 30: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/30.jpg)
● 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?
![Page 31: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/31.jpg)
● Slow page load time○ Often a result of .ready() abuse
● "Janky" page behavior when scrolling or during animations
Impact of Too Many Layouts
![Page 32: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/32.jpg)
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
![Page 33: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/33.jpg)
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
![Page 34: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/34.jpg)
http://jsfiddle.net/qjncp/show/
● Google Chrome● Internet Explorer 11
Demo: Finding Forced Layouts
![Page 35: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/35.jpg)
● Scroll event occurs● Inside the scroll event handler
a. Add a little bit of contentb. 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
![Page 36: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/36.jpg)
● Scroll event occurs● Inside the scroll event handler
a. Add a little bit of contentb. 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)
![Page 37: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/37.jpg)
● 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
![Page 38: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/38.jpg)
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
![Page 39: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/39.jpg)
● 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")
![Page 40: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/40.jpg)
● 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")
![Page 41: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/41.jpg)
Throttle high frequency events like mousemove or scroll; handle with requestAnimationFrame
www.html5rocks.com/en/tutorials/speed/rendering/
Avoiding Forced Layout
![Page 42: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/42.jpg)
Modern browsers have the tools to find these issues and make you look like a web development star!
Know Your Tools
![Page 43: jQuery Conference Austin Sept 2013](https://reader037.vdocuments.mx/reader037/viewer/2022110318/55d52274bb61eb717d8b45f1/html5/thumbnails/43.jpg)
Twitter: @davemethvinGitHub: @dmethvinIRC (Freenode): DaveMethvin #jquery-
devEmail: [email protected]
Questions?