jquery conference austin sept 2013

The State of jQueryDave Methvin

President, jQuery FoundationjQuery Conference Austin

September, 2013

• Created in March 2012• Coordinates jQuery team work

o Codeo Documentationo Infrastructureo Events

The jQuery Foundation

• 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...

Founding Members

Platinum Member

Gold Members

• 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

● Support jQuery projects● Support web developers● Support web standards● Advocate for developer needs● Participate in standards process

○ W3C○ ECMA 262 (JavaScript)

jQuery Foundation Initiatives

Important Incoming News

• 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

• 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

• 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

jQuery Migrate Example

• Shown in the uncompressed version• Problem and solutions documented

jQuery Migrate Warnings

In jQuery, every change is a breaking change

for some poor developer.

The Moral of the Story

Coming This Fall: jQuery 1.11/2.1

Coming This Fall: jQuery 1.11/2.1

● 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

• 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

● 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

• 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!

• 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?

Let's Shut This Guy Up, Forever

● 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

"A poor workman blames his tools."

Know How Your Tools Work

"Плохому танцору яйца мешают."

Know How Your Tools Work

"A poor dancer blames his balls."

Know How Your Tools Work

● 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

● 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?

● 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?

● Slow page load time○ Often a result of .ready() abuse

● "Janky" page behavior when scrolling or during animations

Impact of Too Many Layouts

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

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

http://jsfiddle.net/qjncp/show/

● Google Chrome● Internet Explorer 11

Demo: Finding Forced Layouts

● 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

● 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)

● 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

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

● 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")

● 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")

Throttle high frequency events like mousemove or scroll; handle with requestAnimationFrame

www.html5rocks.com/en/tutorials/speed/rendering/

Avoiding Forced Layout

Modern browsers have the tools to find these issues and make you look like a web development star!

Know Your Tools

Twitter: @davemethvinGitHub: @dmethvinIRC (Freenode): DaveMethvin #jquery-

devEmail: dave@jquery.com

Questions?