State of jQuery - AspDotNetStorefront Conference

The State of jQuery

AspDotNetStorefront ConferenceNovember, 2013

Dave MethvinPresident, jQuery FoundationLead Developer, jQuery Core

•A non-profit organization•Funded by

o Conferenceso Donationso Personal and Corporate Memberships

http://jquery.org/join

The jQuery Foundation Is...

•http://github.com/jquery•jQuery Core, UI, Mobile•Sizzle selector engine•QUnit unit test framework•jQuery Migrate plugin•TestSwarm CI testing•Documentation

jQuery Foundation Projects

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

○ W3C○ ECMA 262 (JavaScript)

jQuery Foundation Initiatives

jQuery Team - World Wide

Not shown: Brazil, Australia

http://contribute.jquery.org

Maybe You?

jQuery Contributors

jQuery - builtwith.com

jQuery Core Bug Trend

jQuery UI - builtwith.com

jQuery UI Bug Trend

Visual Studio 2013 -- ASP.NET

jQuery in 2013

•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 teamo Deprecated features removed

Still supported jQuery Migrate o Same API

The jQuery Core Plan

•Released jQuery 1.9 in January•Released jQuery 2.0 in April

We're Ready to Ship!

are using "latest"versions in live sites!

NEVER HOTLINK:

http://code.jquery.com/jquery-latest.js

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js

Far too many people

What We Learned (the Hard Way)

jQuery 1.9: Users Loved It!

•Identifies things your code is doing that jQuery 1.9+ doesn't support anymore

•Actually makes older code work•Lets you use newer jQuery with older

code that hasn't been upgraded yet

jQuery Migrate Plugin

jQuery Migrate Console Output

•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

•Relatively minor changes from 1.9•Brings 1.x into alignment with 2.x

line•Simplifies cross-version comparisons

o 1.10 --> 2.0o 1.11 --> 2.1o 1.12 --> 2.2

jQuery 1.10

•Chrome or Firefox plugins•node.js apps (jsdom)•Windows 8 Store apps•PhoneGap / Cordova•Embedded UIWebKit or WebBrowser•Intranet applicationsAND•Public web sites that support only

modern browsers (not IE 6/7/8)

jQuery 2.0 is a good fit for

•The jQuery team supports both 1.x and 2.x; there isn't a problem of using an "unsupported version"

•Since 1.x/2.x APIs are the same, there is no problem in using 1.x exclusively on a public web site -- it's recommended

Which version to use?

•Asynchronous Module Definition•AMD takes care of internal

dependencies•You can choose the modules to load•More flexible and granular than

previous custom grunt build process

jQuery 1.11/2.1: Next Version

● Previously: jQuery runs feature detects all at once, on page load○ Impacts page load performance

● Now: Feature detect runs the first time the feature is used○ Defers the (layout) impact until needed

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

jQuery 1.11/2.1: Still Simple

•Beta is out NOW•Give it a try•Tell us when you think it's ready•Which means you have to try it

o http://code.jquery.com/jquery-git1.jso http://code.jquery.com/jquery-git2.js

1.11/2.1: When?

•Removed $.browser•Removed .live()

•Based on the unreliable userAgent string

•Often assumes future browsers and versions will be broken the same way

•Horribly misused and misunderstood

Why $.browser Deserves To Go

Opera's future products will be based on WebKit, not their Presto engine.

Browser Name is Only a BRAND

Browser Directions in 2014

•These are general stats collected from a wide variety of different sites

•Always look at the actual stats for your sites before making decisions about what to include or exclude

Disclaimer

Desktop vs. Mobile

Desktop vs. Mobile - US/Canada

2013 Trend - StatCounter.com

IE ~30%

2013 Trend - W3Counter.com

Chrome Versions - Clicky.com

IE Versions - Clicky.com

IE6 is Dead! (Except in China)

•Desktop is still king•Chrome ahead, but not massively•IE share actually grew in 2013•IE 6/7/8 demise will accelerate

o XP support ends in April 2014

•IE 9+ is on the auto-update patho But maybe the next business plateau?

What it All Means

•Emulation is not the real thing•http://modern.ie

o Free VM imageso Free BrowserStack 3-month

subscriptiono Free compatibility scan

You Need to Test Multiple IEs

This is IE11 running in IE7 emulation -- not the same thing as IE7!

● jQuery ...○ simplifies/shortens code○ hides browser differences○ doesn't try to hide the browser model

● You still need to Know JavaScript● You still need to Know the Browser

○ Especially the layout engine

Web Devs Take Note

How the Programmer Sees It

JavaScript Browser

How the Programmer Sees It

JavaScript Browser

Web Developer's Reality

Browser JavaScript

Mouse

CSS

HTMLContent caching

KeyboardTouch

Screen paints

Layout calculationImage decoding

Focus management

Network requests

Web Developer's Reality

Browser JavaScript

Mouse

CSS

HTMLContent caching

KeyboardTouch

Screen paints

Layout calculationImage decoding

Focus management

Network requests

Optional

Programmers often worry about the performance of things that don't really matter.

Example: Loops and jsperf.com

Example: Loops and jsperf.com

Slowest looping style still only takes 1.4 milliseconds to do 100 iterations of a loop!

Simple, straightforward for loop turns out to be the fastest, no trickery needed!

● Understand the browser● Know the components of

performance○ Asset loading○ Page rendering○ Script execution

● Learn how to find bottlenecks● Measure them in your app/page!

Know (and Use) Your Tools

•http://calendar.perfplanet.com•Webpagetest.org•YSlow•Google PageSpeed Insights•Fiddler•Built-in browser dev tools

Plenty of Free Tools and Info

Two heads (threads) are better than one.

Learn to Love the Browser Model

•Few things happen in other threads•JavaScript runs on the UI thread•Don't block the UI thread!

o Long-running scriptso Synchronous XMLHTTPRequesto Forced Layouts

Most Browser Work is 1 Thread

•Start network requests earlyo Use the browser's HTML asset scano AJAX before the HTML page is ready

(or generate on the server side)

•Image downloading•Image decoding•Web Workers

Make the Most of Parallelism

● CSS at the top, scripts at the bottom● Define <img> tags in initial HTML

○ allows speculative fetching● Non-essential assets after page load

○ "above the fold" should have priority● Minimize use of $(document).ready()

● Don't make the browser recalc layout

Some Performance Guidelines

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

devEmail: dave@jquery.com

Questions?