State of jQuery - AspDotNetStorefront Conference
-
Upload
dmethvin -
Category
Technology
-
view
1.573 -
download
1
description
Transcript of 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: [email protected]
Questions?