Peppy and MooTools

By  on  

This post has been updated after more tinkering and testing.

A while back James Donaghue boasted his new selector engine Peppy. Lets say for giggles that we wanted to use MooTools and Peppy together. Here's how I got things to work.

The JavaScript

//sets peppy as the default engine
Window.$$ = function(selector){
	return new Elements(new peppy.query(selector));
}
//get elements
window.addEvent('domready',function() {
	$$('div').each(function(el) { // straight cash homey
		el.setStyle('color','#f00');
	});
});

I have no idea why you'd want to do this; MooTools' selector engine is rock solid. I was simply playing around and wanted to show you what I came up with.

Recent Features

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    Telephone Link Protocol

    We've always been able to create links with protocols other than the usual HTTP, like mailto, skype, irc ,and more;  they're an excellent convenience to visitors.  With mobile phone browsers having become infinitely more usable, we can now extend that convenience to phone numbers: The tel...

  • By
    HTML5 Input Types Alternative

    As you may know, HTML5 has introduced several new input types: number, date, color, range, etc. The question is: should you start using these controls or not? As much as I want to say "Yes", I think they are not yet ready for any real life...

Discussion

  1. cssProdigy

    Awesome! I’ve been waiting for this. The Peppy selector engine is really faster, and in some tests faster than Sizzle, I thought sizzle might make it’s way to MooTools but Peppy’s better ayway.

  2. carl

    Have you even looked at the source of Peppy? I find it quite funny to compare it to Mootools or Sizzle, it’s not on the same level at all. For example binding DOM mutation events for caching slows down every DOM operation a lot! Way much more than the gain of the faster queries. It gets even the attribute getter wrong: e.getAttribute( a ) || e[a]; It’s good that it’s small but there’s a lot of space for improvements, so to say.

  3. I’m not saying that I believe Peppy is better — quite frankly, it’s not. I just wanted to show you what I had at the end of my experimenting. Hell, I wouldn’t even say that this is quality. It’s not, quite honestly, but it worked.

  4. Ryan

    Hey guys,

    You can also use John Resig’s Sizzle in MooTools, by using this code:

    Window.$$ = function(selector){
        return new Elements(new Sizzle(selector));
    }
    

    This overwrites the $$ function, but you can rename it to whatever you want, obviously.

  5. @Ryan: You stole my upcoming blog article! :) Thanks for the submission!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!