View
1.285
Download
1
Category
Preview:
DESCRIPTION
Citation preview
The State of jQuery
Dave Methvin
President, jQuery Foundation
March, 2013
Jan 2006: The birth of jQuery
How It All Started
Feb 2013: jQuery core is used by 64
percent of the top 10,000 sites
Seven Years of Good Luck
• Created in March 2012
The jQuery Foundation
• Created in March 2012
The jQuery Foundation
• Created in March 2012
• Coordinates the work of jQuery team
members and volunteers
The jQuery Foundation
• A non-profit organization
o Volunteer board of directors
o Volunteer president (thats me)
o A few paid staff, mainly devs/ops
• Funded by o Conferences
o Donations – http://jquery.org/donate
o Memberships
o YOU or your company can be a member
http://jquery.org/join
The jQuery Foundation Is...
• Founding Members
jQuery Foundation
• Gold Members
jQuery Foundation
• Organize/fund work on the projects
• Advocate for web developer needs
o W3C web standards
o ECMA TC39 JavaScript standards
• Run two US conferences annually
• License conferences worldwide
The jQuery Foundation's Work
• http://github.com/jquery
• jQuery Core
• jQuery UI
• jQuery Mobile
• Sizzle selector engine
• QUnit unit test framework
• jQuery Migrate plugin
• TestSwarm CI testing
• Documentation sites
jQuery Foundation Projects
• It’s all on Github – not just the code
• File an issue when you see a problem
• Make pull requests against docs
• Join our forum and share knowledge
Join The Community
• jQuery 1.9 vs. 2.0
o jQuery 1.x still supports IE 6/7/8
o jQuery 2.x supports modern browsers
o The two versions stay in API sync
o Both branches maintained by the team
• Heavily publicized changes during 2012
• Released several public betas
• Shipped jQuery 1.9 in January
The jQuery Core Library Plan
Far too many people
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
What We Learned (the Hard Way)
jQuery 1.9: Users Love It!
• Identifies things your code is doing that
jQuery 1.9/2.0 don't support anymore
• Actually changes jQuery back to pre-1.9
behavior so older code just works
• Lets you use jQuery 1.9/2.0 with code
that hasn't been upgraded yet
• Documentation gives advice on how to
remediate the issue
jQuery Migrate Plugin
jQuery Migrate Example
• Shown in the uncompressed version
• Problem and solutions documented
jQuery Migrate Warnings
How Do I Fix This?
Include the minified version of the plugin
and no warnings appear
Shut-Up-and-Fix-It Mode
• Removed $.browser
• Removed .live()
• Fixed $.parseJSON
What We Broke Fixed, and Why
• Usually the wrong inference
• Often assumes future browsers and
versions will be broken the same way
• Horribly misused and misunderstood
Why $.browser Deserves To Go
Chrome added focusin/out two years ago!
Why You Don't Assume Browsers
Opera just announced their future
products will be based on the WebKit
engine, not their own Presto engine.
Browser Name is Only a BRAND
• IE can emulate older versions via <meta name="X-UA-Compatible“ …>
• Can be accidentally lobotomized via that
confounded Address Bar button
• Browser version in the UA string does not
represent the real version
Internet Explorer's Disguises
The Enemy!
Who Else Used $.browser?
Who Else Used $.browser?
Please Don't Do This ...
Not fixing the problem, no code attribution
... copy/pasta is bad!
Use jQuery Migrate or (better) Modernizr!
... copy/pasta is bad!
• It's like global variables, but for events
• Every event that occurs must bubble to document before it can be processed
• Processing events can be expensive,
especially on deep documents
• Still easy to process events globally: o $(document).on("click", "a", linkyClicky);
What's Wrong With .live()?
• Doesn't work well on iPhone/iPad!
• iOS doesn't bubble touch events all the way to document
• Delegated touch events must be processed below the <body> element
Letting all events bubble to document destroys the usefulness of the event
propagation model
What's Wrong With .live()?
Original line: $(".dialog .close").live("click", ...
Direct replacement (poor): $(document).on("click", ".dialog .close" ...
Optimized replacement: $(".dialog").on("click", ".close", ...
Optimize Your Selectors
The Bug: • Before 1.9, $.parseJSON("") returned
null but it's not valid JSON
The Fix: • In 1.9, $.parseJSON("") is an error
JSON Should Be JSON
• We called invalid JSON invalid.
• We're also out of coffee.
The Result: PANIC
In jQuery, every change is
a breaking change for
some poor developer.
The Moral of the Story
Nobody tries the jQuery
alpha and beta builds.
The Other Moral of the Story
• How Big?
Big News!
• How Big?
Big News!
• Released yesterday -- please try it!
• Custom builds can shrink size
• Bare-bones selector engine option
o Basically, just querySelectorAll
• How small?
o Normal build: 28KB minified and gzipped
o Blog example: 17KB
o Tiniest build: 14KB
Big News: jQuery 2.0 Beta 2
Making a public web site?
You don't need 2.0 right now!
jQuery 2.0 is a good fit for:
• Chrome or Firefox plugins
• node.js apps (jsdom, Cheerio)
• Windows 8 Store ("Modern/Metro") apps
• PhoneGap (iPhone/Android/BlackBerry)
• Apps using UIWebKit or WebBrowser
jQuery 2.0: README.NOW
• The jQuery team supports both 1.9 and
2.0; 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
• You can detect platforms and include 1.9
or 2.0, but beware of your code or
plugins using undocumented semantics!
jQuery 2.0 is Forward Looking
EcmaScript 5 is was the 2.0 baseline
Old Android Browsers Lack ES5
:-(
(-:
Old WebKit is the New Old IE
Email: dave@jquery.com
Twitter: @davemethvin
GitHub: @dmethvin
IRC (Freenode): DaveMethvin #jquery-dev
Questions?
Recommended