Now, have you heard of Sly, the new selector engine on the block? No? That’s because Harald Kirschner just released it yesterday, 03/25/09, and I can’t tell you how awesome it is.. or can I?

I’ll start you off with a brief description… and graphs!

Sly is a turbocharged, cross-browser, library-agnostic JavaScript class for querying DOM documents using CSS3 selectors.

And turbocharged it sure is, just check out the stats!

The benefits:

• Pure and powerful JavaScript matching algorithm for fast and accurate queries
• Extra optimizations for frequently used selectors and latest browser features
• Works uniformly in DOM documents, fragments or XML documents
• Utility methods for matching and filtering of elements
• Standalone selector parser to produce JavaScript Object representations
• Customizable pseudo-classes, attribute operators and combinators
• Just 3 kB! (minified and gzipped, 8 kB without gzip)
• No dependencies on third-party JS libraries, but developers can override internal methods (like getAttribute) for seamless integration.
• Code follows the MooTools philosophy, respecting strict standards, throwing no warnings and using meaningful variable names

Use it in MooTools?

Yes, that’s right. You can use it in MooTools right now, though I don’t think it’s necessary since the MooTools selector engine is very good. But just like how David Walsh showed us how to use Sizzle and Peppy in MooTools, you can do the following to use Sly:

1
2
3
4
5
6
7
8
9
10
11

Window.implement({
    $Sly: function(selector){
        return new Sly(selector);
    }
});
 
// returns an array of all the anchors in the page
$Sly('a').search();
 
// returns the first anchor on the page
$Sly('a').find();

Now, you may be wondering whether doing this will allow you to use MooTools methods on the elements. Well, the good news is that you can because the MooTools Elements class applies the methods to all elements. Observe:

1
2

// returns the href of the first anchor
$Sly('a').find().get('href');

And lastly, Oskar Krawczyk posted how to replace the $$ function itself (thanks Oskar!):

1
2
3
4
5

Window.implement({
    $$: function(selector){
        return Sly.search(selector);
    }
});

Great job, Harald, great job indeed. Way to represent!

Yesterday, Ajaxian tells us that the Dojo Community will vote on whether they implement the Sizzle selector engine instead of using their own.

Just after reading that I thought whether MooTools would benefit from implementing a selector engine instead of using their own. Apparently I was not alone in this thought as Aaron Newton has posted his thoughts and pros/cons. Here’s my two cents.

Aaron brings up very good pros and cons. I think we should not follow the trend and switch to Sizzle but instead take in what we can and be inspired to improve upon it. We should already be doing that. This would require our awesome MooTools dev team to be up-to-date, but aren’t they continuously learning?

In this way, we can keep to the ‘extensibility’ philosophy. Besides, if we figure out an even better method, who is to say that other developers aren’t looking at MooTools and taking from it what they deem better?

Lastly, why Sizzle and not Peppy? Last I checked, Peppy was beating out Sizzle on SlickSpeed. James recently took a stab at documentation for Peppy too.

At the end of the day, it all depends on what our MooTools dev team wants to do because, after all, MooTools was created for their use, and it’s great if others can use it too.

P.S. Thanks to James Donaghue and John Resig on their awesome work!