Yahoo User Interface Library 3.0 first look

Congratulations to the YUI team on releasing their first developers preview of YUI 3.0. So far, this appears to be a complete refactoring of the 2.x code base — which makes a certain amount of sense given its diverse roots throughout the company.

This first release a substantial chunk of the 2.x YAHOO.env, YAHOO.lang, and YAHOO.util namespaces, with the roadmap indicating that the initial widget framework is slated for an October release with PR2.

A few quick impressions

Language extensions

They’ve added Prototype and JQuery-style node chaining. So something like this:

var el = YAHOO.Dom.get('slipper'); //=> HTMLElement el
YAHOO.Dom.addClass(el, 'sparkly');
YAHOO.Dom.setStyle(el, 'color', '#f00');
YAHOO.Dom.setStyle(el, 'background-color', '#fff');

can be boiled down to:

Y.get('#slipper').addClass('sparkly').setStyles({'color':'#f00','background-color':'#fff');
/* or, if you don't want it sliding off the screen */
var el2 = Y.get('#slipper');
el2.addClass('sparkly');
el2.setStyles({'color':'#f00',
               'background-color':'#fff'});
/* but I'd like all of my slippers to sparkle! */
Y.all('.slipper').addClass('sparkly');
/* or to be pedantic */
Y.all('.slipper').each(
    function(node){ 
        node.addClass('sparkly') 
    });

Interesting bits here: YAHOO.Dom.get has been refactored to YUI.Node.get, which is itself included in the current YUI object Y, so you get Y.get (confused yet?). They’ve now added a selector API for the use of get and friends, hence ‘#slipper’ instead of ‘slipper’ (or ‘#closet .slipper’ if you just want a subset…), since the 2.x series took either a string id or an HTMLElement for most Dom methods. There’s also a new NodeList class to wrap an array of Nodes and map methods to each of them.

YUI-Loader integration, multiple YUI instances

The standard way to deal with YUI is now something along these lines:

YUI().use('node', function(Y) {
  /* do something.  See the examples above */
});

YUI().use takes a list of modules to be retrieved with loader, and then a callback function to be executed on a successful load. By default, any requested YUI modules will be loaded from the Yahoo CDN in a combined file (to cut down the connection count and load time). You can also send a configuration object to YUI() to use your own copy of the library or your own modules if you’re so inclined (I’ll do a writeup on that later). You can also use the Loader to pull in modules from older versions of YUI, so you could use existing widgets with the new Node and Event frameworks if you were so inclined.

This also allows you to do multiple sandboxed YUI instances within the same page, and loader will take advantaged of the shared code cache if necessary.

Wrapup

That’s all for today. YUI Blog has ongoing coverage by the developers, and I assume this will keep going. The YUI 3.x Website is the authoritative source for documentation of examples, and you can download YUI 3.0 PR1 from SourceForge. Discussion is slowly ramping up in the YUI 3.x Group at Yahoo Groups.

Spread it: add to del.icio.us|Digg it|add to ma.gnolia|Stumble It!||post to facebook

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: