Yahoo UI gets a selector engine
This is something that I knew was in the works for quite a time having discussed this with Matt Sweeney while I was still at Yahoo!, but today it finally happened. YUI got a CSS selector engine. Two words guys: Freakin’ wicked!.
Really, this is great news
Although some might find it contradictory that I still use Yahoo code on Google projects (mainly prototyping), adding the selector engine has been long overdue and I’m glad it’s finally made it’s way to the public. Previously for any querying work I use to use Jack’s DOM Query which is a lightweight CSS/XPath selector engine. But now I’m glad Yahoo has stepped up and home-brewed their own that will fit nicely into the rest of the YUI framework (c’mon guys, we have to call it a framework now). Making queries is as easy as:
CSS Query with YUI
var elements = YAHOO.util.Selector.query("#content p.hello");Or if you’re anything like me:
CSS Query with YUI shorthands
var Y = YAHOO.util,
Select = Y.Selector;
var elements = Select.query("#content p.hello");The new Selector namespace also includes two other static methods, filter, and test, each of which allow you to match elements with a selector. The way filter works is that you can pass in an arbitrary collection of elements, and test it against a supplied selector like such:
Selector.filter
<div id="example">
<ul>
<li class="hello">hello</li>
<li class="world">world</li>
</ul>
</div>
<script>
var Y = YAHOO.util,
Select = Y.Selector;
var elements = document.getElementsByTagName('li');
var filtered = Select.filter(elements, "#example li.hello");
// filtered === ([li.hello] HTMLElement)
</script>In contrast, Selector.test allows you to pass in a node (either HTML element reference, or a string representing an ID), and test it against a selector; returning a boolean as such:
Selector.test
<div id="example">
<ul>
<li id="hello">hello</li>
<li id="world">world</li>
</ul>
</div>
<script>
var hello = document.getElementById('hello');
var isHelloMatch = Selector.test(hello, "#example li"); // true
var isWorldMatch = Selector.test('world', "#example ul"); // false
</script>Other notes to take into consideration
Albeit it appears they left out the ability to apply a function against a collection, such as what you can do with the DOM Collection utility, you can still use the DOM collection interface to batch your selector collection against a method as such:
Dom.batch with Queries
var Y = YAHOO.util,
Select = Y.Selector,
Dom = Y.Dom;
var collection = Select.query("#example p > span[lang^=us]");
Dom.batch(collection, function(el) {
// do stuff with 'el'...
});This of course requires you to loop through a live list twice. It would be nice to see if we can get the apply (just like it is in DOM) back into the Selector API so we can do stuff like this:
applying methods against collections
var collection = Select.query("#example p > span[lang^=us]", null, null,
function(el) {
// do stuff with 'el'
}
);
// and I'll still have the reference to 'collection' in case I want
// to use it at a later time.
For a full look at the new Selector API, check out the Selector API documents on YDN. Also, see the related blog post about the recent 2.4 release. They’ve got some other cool bits on JSON support, charts, a profiler, and an updated script/css getter.
Congratulations on this release guys. You did a great job.
December 4th, 2007 at 11:00 pm
[…] Check This Out! While looking through the blogosphere we stumbled on an interesting post today. Here’s a quick excerpt: This is something that I knew was in the works for quite a time having discussed this with Matt Sweeney while I was still at Yahoo!, but today it finally happened. YUI got a CSS selector engine. Two words guys: Freakin’ wicked! … […]
December 4th, 2007 at 11:10 pm
Dustin, you know those sites that do comparisons on css query engines? I don’t think there is one for the yui selector yet, naturally, but I have two questions.
If you hear of one, will you post a link? or just tell someone to make one (cough) just kidding
Also, how do you think it will compare.
But wow, this is awesome news, I have been using this setup for sometime now: http://www.zachleat.com/web/2007/07/30/using-dom-query-libraries-in-yui/ but I have faith that the yui has done it right again.
Thanks!
December 4th, 2007 at 11:10 pm
[…] Diaz wrote an interesting post today on Yahoo UI gets a selector engineHere’s a quick […]
December 5th, 2007 at 12:59 am
How’s this any different than say, jQuery or Prototype’s $ function?
Isn’t this easier?
var elements = $('#content p.hello');
I only ask because I thought you were such a big fan of the $ function. But I’m not anywhere near the ninja you are, so I thought I’d ask and learn something ;)
Thanks,
December 5th, 2007 at 1:24 am
Jose. That is exactly what it is. I figured I didn’t have to say it because it was assume already. Having a selector API and some chaining is pretty much the entire draw to jQuery. And Prototype implemented their $$ soon afterward.
The whole point to this is that it’s hooked directly into the YUI framework. Furthermore, I will continue to say, even without a selector API, YUI is the best JavaScript library on the planet. I don’t need to explain why here, I have a plethora of articles to read from that make it clear. I even wrote a selector chain API on top of YUI if you’re looking for something to the likes of jQuery.
December 5th, 2007 at 1:29 am
Will you be updating the DED Chain Library with the new YUI selector engine?
December 5th, 2007 at 2:39 am
Einar,
I believe now would be a good to do so, so perhaps yes. I can also take advantage of some of the other updates that they’ve included in yahoo.js as well as the walker methods in dom.js
December 5th, 2007 at 4:16 am
[…] Diaz has written up his thoughts on the selector engine and shows some examples such as: PLAIN TEXT […]
December 5th, 2007 at 11:11 am
All HTML behaviors start with selectors, so why has Yahoo not implemented this until now?
December 5th, 2007 at 2:30 pm
No, not really…
unless you’re using it on Visual Studio 2008 under a Mac :D
I’ ve take a rapid look at the change and other that the selector engine I find the profiler really interesting
Just a thought:
Now we have linters, we have jsunit to do TDD, we have profilers, i wrote a basic IoC containers and probably there are many out there
I can say that we can definitelly write Agile Javascript Code,
we can be verbose too because we have lots of packers out there…
Andrea one is particular because it pack together js and css(ah, yes! we have separation of concerns too)
Maybe the last thing we need is a Code complexity checker, but Hey! I can’t pretend too much :D
December 5th, 2007 at 3:18 pm
[…] Diaz has written up his thoughts on the selector engine and shows some examples such as: PLAIN TEXT […]
December 5th, 2007 at 3:45 pm
I know you don’t work for Yahoo anymore, but you should definitely write a book on YUI. I would buy it.
December 5th, 2007 at 3:49 pm
Michael, I’ve been asked to write a book on YUI on five separate occasions. It has definitely been tempting, but with my recent book finally out, I think I want to take some time off of the writing gig.
December 8th, 2007 at 10:24 pm
[…] Diaz has written up his thoughts on the selector engine and shows some examples such as: PLAIN TEXT […]
January 5th, 2008 at 11:47 am
Isn’t this pretty similar to jQuery?