jQuery Recommendations to the W3C (2011)
2 likes1,673 views
This document discusses jQuery and web standards. It summarizes jQuery's goal of hiding browser compatibility issues while providing a simple API. It also discusses jQuery's success competing with other JavaScript libraries. The document outlines several specifications that are important to jQuery, with the DOM being the most significant. It then lists several standards and features that jQuery has used successfully. The majority of the document proposes additional standards and browser features that would be useful for jQuery and JavaScript libraries going forward, including better DOM manipulation APIs and event handling capabilities.
![HTML string -> DOM support
✦ No good way to do this now
✦ Have to create a DOM element and use
innerHTML
✦ Clunky and quite slow
✦ We want:
✦ someMethod(“<b>stuff</b>”) ->
✦ [ <b> ]](https://image.slidesharecdn.com/jquery-w3c-130228113424-phpapp02/85/jQuery-Recommendations-to-the-W3C-2011-14-320.jpg)
![“Late Events”
✦ There is no way to ask the browser:
✦ “Did an event [foo] already fire on this
element?”
✦ For example:
✦ Did the load event already fire on
window?
✦ Did the submit event already fire on this
form?
✦ etc.](https://image.slidesharecdn.com/jquery-w3c-130228113424-phpapp02/85/jQuery-Recommendations-to-the-W3C-2011-19-320.jpg)
jQuery Recommendations to the W3C (2011)
- 1. jQuery and Standards John Resig http://ejohn.org/ - http://twitter.com/jeresig
- 2. jQuery ✦ A JavaScript library designed to hide painful cross-browser compatibility issues while presenting a solid, usable, API.
- 3. Simple API ✦ $(“div > span”).addClass(“foo”); ✦ “Find some elements” ✦ “Do something with them” ✦ Makes complex manipulation of web pages simple
- 4. Space ✦ Highly competitive space ✦ Released Jan. 2006 - already a dominant player: Prototype JavaScript Library ✦ (Bundled with Ruby on Rails, had some nice coattail growth.) ✦ Other libraries: Dojo, Yahoo UI, MooTools
- 7. Specifications ✦ A few specifications that matter to us: ✦ DOM ✦ HTML ✦ CSS ✦ ECMAScript ✦ DOM more than anything else.
- 8. Concerns ✦ Performance. ✦ Performance. ✦ Performance. ✦ Usability. ✦ Any standards/browser addition that gives us performance benefits we’ll leap on.
- 9. New Standards We’ve Used ✦ Selectors API ✦ querySelectorAll ✦ Selectors API 2 ✦ matchesSelector ✦ Animation Timing ✦ requestAnimationFrame ✦ ECMAScript ✦ bind
- 10. Selectors API ✦ A bit of a failure ✦ Didn’t listen to the needs of libraries ✦ Missed a number of important features/ bug fixes: ✦ Contextual searching is messed up ✦ Error reporting is non-existent ✦ Implementations are inconsistent ✦ But it’s very fast, so we use it.
- 11. Matches Selector ✦ Selectors API 2 gave us matchesSelector ✦ We petitioned browsers to implement this ✦ They did, then it became a standard ✦ Makes our event delegation much faster
- 12. Smooth Animation ✦ requestAnimationFrame was created ✦ Scales animations based upon load ✦ Unfortunately this broke user expectations (expected certain frame rates) ✦ We just backed it out, will have to try again later
- 13. Needs
- 14. HTML string -> DOM support ✦ No good way to do this now ✦ Have to create a DOM element and use innerHTML ✦ Clunky and quite slow ✦ We want: ✦ someMethod(“<b>stuff</b>”) -> ✦ [ <b> ]
- 15. Access to event callbacks ✦ We want to be able to remove individual callbacks ✦ We want to be able to clone callbacks ✦ We want to be able to trigger specific callbacks ✦ All of this requires access to callbacks
- 16. An event for when stylesheets load ✦ Right now we have an event for DOM loaded ✦ And an event for window loaded ✦ But no event for when all the stylesheets load (important for looking at computed styles)
- 17. Will an element fire an event? ✦ For example - if I have a <form> element I want to be able to ask it: ✦ “Will you ever, natively, trigger a submit event?” (true) ✦ If I ask a <div> if it will trigger a submit event, it will return false.
- 18. Unique ID for DOM nodes ✦ We have to manage callbacks and data that we attach to DOM nodes ✦ To do this we have to assign the nodes a unique ID ✦ It’d be much better to have a property that took care of this for us
- 19. “Late Events” ✦ There is no way to ask the browser: ✦ “Did an event [foo] already fire on this element?” ✦ For example: ✦ Did the load event already fire on window? ✦ Did the submit event already fire on this form? ✦ etc.
- 20. Fast DOM mutation events ✦ I know this is being worked on right now (yay!) ✦ A way to have fast DOM mutation events would be awesome ✦ It could allow for some really slick restructuring of applications ✦ And make it easier for us to possibly do caching
- 21. mouseenter/mouseleave ✦ Internet Explorer provides these events ✦ They’re terribly useful (make it so that you don’t have to deal with event bubbling weirdness) ✦ Should be in browsers ✦ Need to verify DOM 3 Events spec
- 22. getComputedStyle ✦ A complete mess right now ✦ There is no consensus over what results should be returned and when ✦ There needs to be something declared here - probably a joint venture between the CSS and DOM working groups. ✦ Test suite for getComputedStyle
- 23. isCSSAuto ✦ There is no way of determining if a CSS property is currently set to “auto” ✦ This should be resolved, makes it much easier to do some types of animations
- 24. A way to sanely toggle visibility ✦ If we’re given an element that is display: none and we want to make it visible (display: block, perhaps) ✦ It is very hard to determine what the right “visible” style should be ✦ Especially if someone does: ✦ div { display: none; } ✦ Hint: It involves nasty use of iframes
- 25. contains() method ✦ We have compareDocumentPosition ✦ This is OK but contains() is very easy to use (in IE) ✦ Easy enough to implement, should be a standard
- 26. Better way of sorting nodes ✦ We have to use compareDocumentPosition now ✦ This is very very slow ✦ A numerical index property on nodes would be very useful (like in IE)
- 27. Is a node in an XML document ✦ A number of behaviors change when you’re in an XML document ✦ (IDs no longer resolve, some properties may not exist - like innerHTML, etc.) ✦ A way to determine if we’re working against an XML document would help
- 28. Support Tests
- 29. Questions? ✦ Questions? ✦ [email protected] ✦ http://ejohn.org/ ✦ http://twitter.com/jeresig