Mocking YUI 3 in YUI 2

At Mint.com we have wanted for some time to upgrade to YUI 3. However, since YUI 3 is not backwards compatible with YUI 2, it is hard to justify taking the time to port a large codebase. To alleviate the cost of upgrading, we have decided on a two step approach. During the first phase we will convert our YUI 2 code to use YUI 3 syntax, then in the second phase when we switch to YUI 3, many parts of the code should work right away.

Today&rsquot;s article will share with you the mock YUI 3 object that we wrote to work in YUI 2. To use the code, include all the YUI 2 file for your project normally, then include yui3foryui2.js last. Afterwards you can start coding as if you are running YUI 3.

To make this work we first ported 3 core objects from YUI 3: the DOM event facade object, the Y.Array object, and the Y.Object object. The DOM event facade object was required so that event handler functions receive the normalized YUI 3 event object, while the Y.Array and Y.Object are core features of YUI 3.

We have also emulated Y.DOM, Y.Lang, Y.Node, Y.Base, Y.Widget, Y.Anim, Y.one, Y.all, Y.io, and a variety of other functions. Some features like Y.Lang are identical in YUI 2 and YUI 3, so the YUI 3 object just needed to point to the YUI 2 version. Other features like Y.Base needed to be mocked out from scratch.

To emulate the object attribute system use by YUI 3 we leveraged the YAHOO.util.AttributeProvider class of YUI 2. To emulate Y.Node, we leveraged the YAHOO.util.Element class of YUI 2, and added and modified a few functions. For the Y.all and Y.one we leveraged the YAHOO.util.Selector functions. In short, where there was an existing system in YUI 2 that could be leveraged to emulated something in YUI 3, we used it, writing as little original code as possible.

The following YUI 2 files are required for the mock YUI 3 system:

  • yahoo-dom-event.js
  • selector.js
  • element.js
  • connection.js

Additionally, including the following will add support for JSON and animations:

  • json.js
  • animation.js

Now the goal was not to create a fully functional version of YUI 3 in YUI 2, just to support the most common syntax, so that we can change our codebase to YUI 3 syntax before actually switching. We hope this will reduce the amount of time it takes and bugs that occur when we actually port our code.

If you would also like to use a two step process to upgrade to YUI 3, then download your copy of yui3foryui2.js. Please leave a comment below, if there is a small feature missing and you would like to see it added.