yui 2 to yui-2-in-3

Question

I am working to change YUI2 code to YUI 2-in-3 form. I need to access Y.YUI2 object(YAHOO object) in my JS codes .

I need this object globally because this object is being used in hundreds of places in the JS codes so I want an easier way to access it rather than access it via a callback everytime I need it.As I have only one HTML file there should be an easier way.

I am using SimpleYUI. So my main aim is to make the global Y object get a YUI2 value .I can't do it via Y.use(.....) because use() does not block the rest of code and the code below it needs YAHOO object.

Thanks

You can pre-load YUI modules by simply including the js files with a ` — Gabe Moothart, Feb 28 '12 at 22:39
the problem is that my YUI2 code already has all the modules included statically.But to make the code work in a 2-in-3 fashion I will need the YAHOO global object which in YUI2 was given by yui-loader.js.That object is being used at many places in my YUI 2 code.So to make it 2-in-3 I need it — code4fun, Feb 28 '12 at 23:11
You will need to replace those YUI2 script files with the corresponding 2in3 ones. — Gabe Moothart, Feb 28 '12 at 23:32
why do i need to do that?i think I just need the YAHOO object's instance — code4fun, Feb 29 '12 at 01:03
You could try only changing the `yahoo.js` (or `yuiloader.js`) file to the 2in3 version — Gabe Moothart, Feb 29 '12 at 18:46
sorry i couldn't follow you.what difference does the 2in3 version of this file have from the YUI2 version.I think the 2 in 3 versions were valid in earlier versions of YUI3 only — code4fun, Feb 29 '12 at 20:32

Petr · Answer 1 · 2012-03-26T11:33:27.423

Recently I was working on moving my projects from YUI 2.x to YUI 3.x. Here I want to share my experience and solution.

Firts, I guess you red the article: "Working with YUI 2 in 3" (http://yuilibrary.com/yui/docs/yui/yui-yui2.html). Unfortunatelly, this approach forced you to cover all your existing JS code into new structures called modules like

YUI.add('mymodule-uses-yui2', function(Y) {

    var YAHOO = Y.YUI2;
    /* my old JS code based on YUI 2 placed here */

}, '1.0', {requires: 'yui2-modules'});

and then use that modules in a sandbox:

YUI().use('...', 'yui2-modules', 'mymodule-uses-yui2', function(Y) {
    var YAHOO = Y.YUI2;
});

This causes a lot of work on existing codebase to create modules and correct dependecies.

I found that I can avoid it on the first stage of recatoring: I keep loading all YUI 2 components staticaly in script tag as always did. In this case global YAHOO object is available everywhere and my old code just works. Then I started to write a new code (or rewrite old code) using YUI 3 near my old code - no conficts at all! You can also step by step cover your old code into new fashion modules (YUI.add) and still use global YAHOO there (without using Y.YUI2). And you do not need to force all you power to cover all old code into new modules at one time.

I also found SimpleYUI more usefull for me vs. sandboxing every time into YUI().use(...) because currentelly I have a lot of places on the page where I need just one small peace of JS code. SimpleYUI do it better, if you have you code on the page in several places and do not have time to completelly refactor it yet.

yui 2 to yui-2-in-3

1 Answers1