State of jQuery - AspDotNetStorefront Conference
-
Upload
dmethvin -
Category
Technology
-
view
1.575 -
download
1
description
Transcript of State of jQuery - AspDotNetStorefront Conference
![Page 1: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/1.jpg)
The State of jQuery
AspDotNetStorefront ConferenceNovember, 2013
![Page 2: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/2.jpg)
![Page 3: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/3.jpg)
Dave MethvinPresident, jQuery FoundationLead Developer, jQuery Core
![Page 4: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/4.jpg)
•A non-profit organization•Funded by
o Conferenceso Donationso Personal and Corporate Memberships
http://jquery.org/join
The jQuery Foundation Is...
![Page 5: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/5.jpg)
•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
![Page 6: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/6.jpg)
● Support jQuery development● Support web developers● Support web standards● Advocate for developer needs● Participate in standards process
○ W3C○ ECMA 262 (JavaScript)
jQuery Foundation Initiatives
![Page 7: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/7.jpg)
jQuery Team - World Wide
Not shown: Brazil, Australia
![Page 8: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/8.jpg)
http://contribute.jquery.org
Maybe You?
jQuery Contributors
![Page 9: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/9.jpg)
jQuery - builtwith.com
![Page 10: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/10.jpg)
jQuery Core Bug Trend
![Page 11: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/11.jpg)
jQuery UI - builtwith.com
![Page 12: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/12.jpg)
jQuery UI Bug Trend
![Page 13: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/13.jpg)
Visual Studio 2013 -- ASP.NET
![Page 14: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/14.jpg)
jQuery in 2013
![Page 15: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/15.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 teamo Deprecated features removed
Still supported jQuery Migrate o Same API
The jQuery Core Plan
![Page 16: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/16.jpg)
•Released jQuery 1.9 in January•Released jQuery 2.0 in April
We're Ready to Ship!
![Page 17: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/17.jpg)
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)
![Page 18: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/18.jpg)
jQuery 1.9: Users Loved It!
![Page 19: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/19.jpg)
•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
![Page 20: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/20.jpg)
jQuery Migrate Console Output
![Page 21: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/21.jpg)
•Shown in the uncompressed version•Problem and solutions documented
jQuery Migrate Warnings
![Page 22: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/22.jpg)
In jQuery, every change is a breaking change for some poor developer.
The Moral of the Story
![Page 23: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/23.jpg)
•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
![Page 24: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/24.jpg)
•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
![Page 25: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/25.jpg)
•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?
![Page 26: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/26.jpg)
•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
![Page 27: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/27.jpg)
● 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
![Page 28: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/28.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
jQuery 1.11/2.1: Still Simple
![Page 29: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/29.jpg)
•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?
![Page 30: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/30.jpg)
•Removed $.browser•Removed .live()
![Page 31: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/31.jpg)
•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
![Page 32: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/32.jpg)
Opera's future products will be based on WebKit, not their Presto engine.
Browser Name is Only a BRAND
![Page 33: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/33.jpg)
Browser Directions in 2014
![Page 34: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/34.jpg)
•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
![Page 35: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/35.jpg)
Desktop vs. Mobile
![Page 36: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/36.jpg)
Desktop vs. Mobile - US/Canada
![Page 37: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/37.jpg)
2013 Trend - StatCounter.com
IE ~30%
![Page 38: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/38.jpg)
2013 Trend - W3Counter.com
![Page 39: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/39.jpg)
Chrome Versions - Clicky.com
![Page 40: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/40.jpg)
IE Versions - Clicky.com
![Page 41: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/41.jpg)
IE6 is Dead! (Except in China)
![Page 42: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/42.jpg)
•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
![Page 43: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/43.jpg)
•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!
![Page 44: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/44.jpg)
![Page 45: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/45.jpg)
● 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
![Page 46: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/46.jpg)
How the Programmer Sees It
JavaScript Browser
![Page 47: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/47.jpg)
How the Programmer Sees It
JavaScript Browser
![Page 48: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/48.jpg)
Web Developer's Reality
Browser JavaScript
Mouse
CSS
HTMLContent caching
KeyboardTouch
Screen paints
Layout calculationImage decoding
Focus management
Network requests
![Page 49: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/49.jpg)
Web Developer's Reality
Browser JavaScript
Mouse
CSS
HTMLContent caching
KeyboardTouch
Screen paints
Layout calculationImage decoding
Focus management
Network requests
Optional
![Page 50: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/50.jpg)
Programmers often worry about the performance of things that don't really matter.
![Page 51: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/51.jpg)
Example: Loops and jsperf.com
![Page 52: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/52.jpg)
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!
![Page 53: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/53.jpg)
● 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
![Page 54: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/54.jpg)
•http://calendar.perfplanet.com•Webpagetest.org•YSlow•Google PageSpeed Insights•Fiddler•Built-in browser dev tools
Plenty of Free Tools and Info
![Page 55: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/55.jpg)
Two heads (threads) are better than one.
Learn to Love the Browser Model
![Page 56: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/56.jpg)
•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
![Page 57: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/57.jpg)
•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
![Page 58: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/58.jpg)
● 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
![Page 59: State of jQuery - AspDotNetStorefront Conference](https://reader036.fdocuments.us/reader036/viewer/2022081414/54b78e8a4a7959b12c8b470d/html5/thumbnails/59.jpg)
Twitter: @davemethvinGitHub: @dmethvinIRC (Freenode): DaveMethvin #jquery-
devEmail: [email protected]
Questions?