YUI3 Hiddenhancements: Y.cached

Ok, first things first. I totally stole the word “hiddenhancements” from the yayquery guys. If you’re not familiar with them, go and watch a show and then get back to me.

Back? Okay. (Enjoy having their theme song stuck in your head, btw.)

So lately I’ve been doing a LOT of work with YUI 3, which is totally rockin’, and I’m starting to realize that there’s all of this Really Cool Stuff hidden away in YUI Core and other parts of their API that isn’t really mentioned, well, hardly anywhere. So I’m going to be writing some of this stuff up.

(Of course, everything IS documented in the API docs, or at least mentioned. http://developer.yahoo.com/yui/3/api/ is your friend.)

Cache me if you can

So, Y.cached. What does it do? According to the API docs, it “Returns a wrapper for a function which caches the return value of that function, keyed off of the combined argument values.”

In other words, think of it as a filing system attached to your function.

If you pass in some arguments to a function wrapped in Y.cached, YUI will go off and check whether there’s a mailbox labeled with that set of arguments. If there is, it’ll pull out the stuff that’s already stored there and return it, without ever going into your function itself. If the value isn’t stored, YUI will pass your args through to the function, intercept the result when it returns, and store it away in a neatly labeled mailbox, so the NEXT time you call the function it can retrieve it.

So you can see how this potentially could help you skip a lot of duplicate work, if you’re calling the same function with the same values over and over again.

Of course, this doesn’t help you much if your function has side effects, or in other words, does anything other than process some args and return a value. (It also can’t help if you need randomness in your results.) But there’s a whole set of operations that do exactly that: process some args and return a value in a predictable way. For those operations, Y.cached can really speed up your code.

(You can pass in a third argument that will cause Y.cached to blow away the cache and call the function again, but if you’re using that a lot then you’re defeating the purpose.)

If you want to impress your tech lead or something, you can throw around the term memoization when referring to this technique. Then they’ll be all like, whoa this person knows his/her bizness! And they’ll think you’re smart, and then you’ll get a raise.*

*Not guaranteed to actually occur.

An example from YUI

Here’s an example from YUI’s event-target code.

//In this line, they're caching a function that does some string replacement with a regular expression
//With this caching, if you pass in the same string again, the regex won't have to be evaluated twice.
_wildType = Y.cached(function(type) {
        return type.replace(/(.*)(:)(.*)/, "*$2$3");
    });

// .... bunch of other stuff......
// ..... and then later on they call the function just like a normal function.
if (type.indexOf(PREFIX_DELIMITER) > -1) {
            type = _wildType(type);
}

And that’s basically all there is to it!

My current use case

Right now I am working on a widget that does client-side filtering of tables. This widget needs to be fairly generic, so one of the things I do is let people pass in a function that specifies how to filter for a particular command. This function takes a value and returns a boolean, in a way that should always be predictable. As soon as I saw this, I thought to myself, “Boom! Let’s use some totally sweet memoization to speed up this code!”*

Embarassingly, I don’t have actual numbers to show its effect. I might try to gather some tomorrow. But it made a notable difference in the filters’ responsiveness, especially in mega-slow IE7.

And it’s so easy to use, it’s like why not? Go forth and memoize!

* What? I get excited about things like this.

One Response to “YUI3 Hiddenhancements: Y.cached”

  1. Tweets that mention Beautiful Interfaces » Blog Archive » YUI3 Hiddenhancements: Y.cached -- Topsy.com Says:

    [...] This post was mentioned on Twitter by Bri Lance, Christian Wirkus. Christian Wirkus said: RT @yeah_its_me: Blog post: Taking a look at Y.cached http://bit.ly/bBmxqT #yui [...]