jQuery and the W3C

jQuery and Standards John Resig http://ejohn.org/ - http://twitter.com/jeresig

jQuery ✦ A JavaScript library designed to hide painful cross-browser compatibility issues while presenting a solid, usable, API.

Simple API ✦ $(“div > span”).addClass(“foo”); ✦ “Find some elements” ✦ “Do something with them” ✦ Makes complex manipulation of web pages simple

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

Speciﬁcations ✦ A few speciﬁcations that matter to us: ✦ DOM ✦ HTML ✦ CSS ✦ ECMAScript ✦ DOM more than anything else.

Concerns ✦ Performance. ✦ Performance. ✦ Performance. ✦ Usability. ✦ Any standards/browser addition that gives us performance beneﬁts we’ll leap on.

New Standards We’ve Used ✦ Selectors API ✦ querySelectorAll ✦ Selectors API 2 ✦ matchesSelector ✦ Animation Timing ✦ requestAnimationFrame ✦ ECMAScript ✦ bind

Selectors API ✦ A bit of a failure ✦ Didn’t listen to the needs of libraries ✦ Missed a number of important features/ bug ﬁxes: ✦ Contextual searching is messed up ✦ Error reporting is non-existent ✦ Implementations are inconsistent ✦ But it’s very fast, so we use it.

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

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

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>stuﬀ</b>”) -> ✦ [ <b> ]

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 speciﬁc callbacks ✦ All of this requires access to callbacks

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)

Will an element ﬁre 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.

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

“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.

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

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

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

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

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

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

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)

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

Questions? ✦ Questions? ✦ jeresig@gmail.com ✦ http://ejohn.org/ ✦ http://twitter.com/jeresig

jQuery and the W3C

More Related Content

What's hot

Similar to jQuery and the W3C

More from jeresig

Recently uploaded

jQuery and the W3C