jQueryTO: State of jQuery March 2013


Published on

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

jQueryTO: State of jQuery March 2013

  1. 1. The State of jQuery Dave Methvin President, jQuery Foundation March, 2013
  2. 2. How It All StartedJan 2006: The birth of jQuery
  3. 3. Seven Years of Good LuckFeb 2013: jQuery core is used by 64 percent of the top 10,000 sites
  4. 4. The jQuery Foundation• Created in March 2012
  5. 5. The jQuery Foundation• Created in March 2012
  6. 6. The jQuery Foundation• Created in March 2012• Coordinates the work of jQuery team members and volunteers
  7. 7. The jQuery Foundation Is...• 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
  8. 8. jQuery Foundation• Founding Members
  9. 9. jQuery Foundation• Gold Members
  10. 10. The jQuery Foundations Work• 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
  11. 11. jQuery Foundation Projects• 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
  12. 12. Join The Community• 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
  13. 13. The jQuery Core Library Plan• 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
  14. 14. What We Learned (the Hard Way)Far too many peopleare using "latest"versions in live sites!NEVER HOTLINK:http://code.jquery.com/jquery-latest.jshttp://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js
  15. 15. jQuery 1.9: Users Love It!
  16. 16. jQuery Migrate Plugin• Identifies things your code is doing that jQuery 1.9/2.0 dont 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 hasnt been upgraded yet• Documentation gives advice on how to remediate the issue
  17. 17. jQuery Migrate Example
  18. 18. jQuery Migrate Warnings• Shown in the uncompressed version• Problem and solutions documented
  19. 19. How Do I Fix This?
  20. 20. Shut-Up-and-Fix-It ModeInclude the minified version of the plugin and no warnings appear
  21. 21. What We Broke Fixed, and Why• Removed $.browser• Removed .live()• Fixed $.parseJSON
  22. 22. Why $.browser Deserves To Go• Usually the wrong inference• Often assumes future browsers and versions will be broken the same way• Horribly misused and misunderstood
  23. 23. Why You Dont Assume BrowsersChrome added focusin/out two years ago!
  24. 24. Browser Name is Only a BRANDOpera just announced their future products will be based on the WebKit engine, not their own Presto engine.
  25. 25. Internet Explorers Disguises• 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 The Enemy!
  26. 26. Who Else Used $.browser?
  27. 27. Who Else Used $.browser?
  28. 28. Please Dont Do This ...
  29. 29. ... copy/pasta is bad!Not fixing the problem, no code attribution
  30. 30. ... copy/pasta is bad!Use jQuery Migrate or (better) Modernizr!
  31. 31. Whats Wrong With .live()?• Its 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);
  32. 32. Whats Wrong With .live()?• Doesnt work well on iPhone/iPad!• iOS doesnt 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
  33. 33. Optimize Your SelectorsOriginal line:$(".dialog .close").live("click", ...Direct replacement (poor):$(document).on("click", ".dialog .close" ...Optimized replacement:$(".dialog").on("click", ".close", ...
  34. 34. JSON Should Be JSONThe Bug:• Before 1.9, $.parseJSON("") returned null but its not valid JSONThe Fix:• In 1.9, $.parseJSON("") is an error
  35. 35. The Result: PANIC• We called invalid JSON invalid.• Were also out of coffee.
  36. 36. The Moral of the StoryIn jQuery, every change is a breaking change for some poor developer.
  37. 37. The Other Moral of the StoryNobody tries the jQuery alpha and beta builds.
  38. 38. Big News!• How Big?
  39. 39. Big News!• How Big?
  40. 40. Big News: jQuery 2.0 Beta 2• 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
  41. 41. jQuery 2.0: README.NOW Making a public web site? You dont 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
  42. 42. jQuery 2.0 is Forward Looking• The jQuery team supports both 1.9 and 2.0; there isnt 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 -- its recommended• You can detect platforms and include 1.9 or 2.0, but beware of your code or plugins using undocumented semantics!
  43. 43. Old Android Browsers Lack ES5EcmaScript 5 is was the 2.0 baseline (-: :-(
  44. 44. Old WebKit is the New Old IE
  45. 45. Questions?Email: dave@jquery.comTwitter: @davemethvinGitHub: @dmethvinIRC (Freenode): DaveMethvin #jquery-dev