YUI 2 in 3: Coming in YUI 3.1.0, a Simpler Way To Use YUI 2 Modules

March 11, 2010 at 12:44 pm by Eric Miraglia and Adam Moore | In Development | 13 Comments

Using YUI 2 components in the context of YUI 3 implementations is important for some implementers making the transition between YUI 2 and YUI 3. In some cases, we simply want to transition our code in stages, but we want to do so within the context of a YUI 3 implementation pattern. In other cases, we may be relying on high-level components like YUI DataTable that aren’t yet present in YUI 3.

As part of the upcoming 3.1.0 release, Adam has improved the experience of using YUI 2 components from within YUI 3. To this end, he’s added some intelligence to YUI 3’s loader that allows you to load YUI 2 modules directly from your YUI().use() statement:

YUI().use("yui2-button", function(Y) {
	
	//YAHOO is not a global object; it is sandboxed along
	//with the rest of your YUI 3 functionality.  This line
	//is necessary if you want to use existing implementation
        //code:
	var YAHOO = Y.YUI2;
	
	//YUI 2 implementation code
	var button = new YAHOO.widget.Button("mybutton");
	
});

You’ll find this functionality in the YUI 3 codeline as of build 1933, and we’ve deployed an experimental YUI 3 build (nominally “yui3.1.0pr2″) and an early build of YUI 2.8.0 functionality wrapped for use in YUI 3.

When you download YUI 3’s latest source from GitHub you’ll find some working examples in sandbox/loader (look for files with the 2in3 prefix). These examples demonstrate the use of a number of YUI 2 modules. We’ve posted a simple live example that shows how to use YUI 2 DataTable within YUI 3, which is one of the most frequently requested transitional features.

Key points about the YUI 2 in 3 effort:

This work is available in the latest builds of the upcoming 3.1.0 release (build 1933 and later). It is not available in 3.0.0 or in the 3.1.0pr1 preview.
The project is in an experimental state. Neither the yui3.1.0pr2 build nor the wrapped YUI 2 builds from which it pulls have been extensively tested, although we’ve staged them on the CDN to make it convenient to explore the implementation.
Download the latest build for examples. You’ll find a few of Adam’s proof-of-concept files in sandbox/loader — other than the simple example above, those are the best code references available until the official 3.1.0 release (which is still about a month out).
Your feedback in the forums is welcome — and, if you find problems, we’re interested in hearing about them.
When used this way, YUI 2 does not create a global YAHOO object. YUI 2 components are wrapped in YUI 3 module definitions and they stay contained in the YUI 3 sandbox to which they’re attached. The line from the codesample above, var YAHOO = Y.YUI2;, is needed in order to cut and paste YUI 2-style implementation code — or you can change YAHOO references to Y.YUI2.
YUI 2 releases are supported back to 2.2.2 — the latest bug-fix release for every minor version is supported (2.2.2, 2.3.1, 2.4.1, 2.5.2, 2.6.0, 2.7.0, 2.8.0). You can specify the YUI 2 version to use as follows: YUI({yui2: '2.7.0'}).use('yui2-button', ...). The goal here is to allow you to avoid migrating to 2.8.0 (or later) prior to a YUI 3 migration.

Gallery Is Easier To Use, Too

Adam’s enhancements to YUI 3’s intrinsic loader have improved the experience of working with the rapidly growing YUI 3 Gallery, too. As of 3.1.0, you’ll be able to bring gallery modules into the page from the use() statement without additional configuration — the loader will be able to determine and resolve dependencies for you and will do the right thing with respect to combo’ing the gallery source code with other YUI files. Here’s an example Dav Glass put together for 3.1.0 that demonstrates the use of his YQL Query gallery module in combination with a pre-release build of 3.1.0.

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

13 Comments »

RSS feed for comments on this post. TrackBack URI

It sounds like this deprecates the yui2 loader in the gallery?

Comment by Gabe — March 11, 2010 #
Gabe — Yes, that’s right. It’s worth noting that this does something different than what the Gallery module does. Caridy’s work in the Gallery loads the same YUI 2 files you would normally load; the 2 in 3 project loads YUI 2 components that are wrapped in YUI 3 modules. I can see some instances where you might still want to do the former. But this looks like the right way forward for almost anyone looking to make the transition while bringing pieces of YUI 2 legacy code with them. -Eric

Comment by Eric Miraglia — March 11, 2010 #
[...] at YUI HQ, we’re working toward the next major release of YUI, YUI 3.1.0. Yesterday we shared some YUI 3 loader work that Adam Moore has done for 3.1.0. His “YUI 2 in 3″ project allows you to use components like YUI 2 DataTable simply and [...]

Pingback by In the Wild for March 11, 2010 » Yahoo! User Interface Blog (YUIBlog) — March 12, 2010 #
Exciting stuff!
I’m really looking forward to 3.1, for the functionality exposed in this post + the xdr flash module that will be loadable from the CDN.
Xdr flash module loaded from the CDN will let people integrate forms from MyOwnDB in their own pages with one line in their html, without the need to host the swf on their own domain. (Of course, if the browser support native xdr, that will be the prefered method, which is also supported by YUI!)

Keep the good work!

Raph

Comment by raph — March 12, 2010 #
[...] LGPL license. Nate and Eduardo intend to share AlloyUI components on the YUI 3 Gallery, making them as easy to use as any YUI 3, YUI 2, or other Gallery module; they hope to have more news on that effort [...]

Pingback by Previewing AlloyUI, a YUI 3-based Component Library from Liferay » Yahoo! User Interface Blog (YUIBlog) — March 15, 2010 #
[...] of the coming 3.1 release (just a few weeks away) you’ll be able to use all of these modules directly from your use() statement with no additional configuration or [...]

Pingback by Andrew Bialecki Wins the YUI 3 Gallery Contest 2010 with Effects Module » Yahoo! User Interface Blog (YUIBlog) — March 24, 2010 #
Can you use YUI3 animation with a YUI2 component or do you have to keep the YUI2 animation with it’s respective element such as progressmeter?

Comment by Andrew Wooldridge — March 26, 2010 #
BTW there’s a typo in the button code above. it should be

var button = new YAHOO.widget.Button(“mybutton”);

That tripped me up for a min.. :)

Comment by Andrew Wooldridge — March 26, 2010 #
[...] What do I mean by this? First off, take a few minutes to read this article: http://www.yuiblog.com/blog/2010/03/11/yui-2-in-3-coming-soon/ [...]

Pingback by YUI3 and a quiet revolution. « Triptych — March 27, 2010 #
Andrew,

The YUI 2 components pulled in via 2-in-3 continue to use the YUI 2 stack. This isn’t a compatibility layer as much as it is a way to provide seamless, sandboxed integrations as a temporary step while sites are being transitioned — a process that for some applications will last as long as there are necessary components in YUI 2 that don’t have a YUI 3 counterpart (as is true of DataTable today).

There are some efforts to do the more complex work you’re describing in specific cases. For example, Greg Hinch’s DataSource Wrapper (http://yuilibrary.com/gallery/show/datasource-wrapper) aims to remove the dependency of a YUI 2 DataTable on YUI 2 DataSource, subbing in the YUI 3 version.

But that’s not what 2 in 3 aims to do.

-Eric

Comment by Eric Miraglia — March 28, 2010 #
Andrew,

Re: typo, sorry, and thanks for telling me. Fixed now.

-Eric

Comment by Eric Miraglia — March 28, 2010 #
[...] 2 in 3 — Adam extended the power of use() even further with the YUI 2 in 3 project. With the release of 3.1.0, you can now include YUI 2 modules directly from your use() statement, [...]

Pingback by Announcing YUI 3.1.0 » Yahoo! User Interface Blog (YUIBlog) — March 31, 2010 #
Note that your surrounding element (aka “body”) needs to have an additional class of “yui-skin-sam” (if you want to use the provided skin) added so that the CSS files for YUI2 components (such as the data table) will be pulled in via the loader. Using the new “yui3-skin-sam” is not sufficient. (ls_n confirmed via #yui)

Comment by Brian — May 19, 2010 #

Yahoo! User Interface Blog (YUIBlog)