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 <script> tag. I don't think a use() call is necessary in that case. Have you tried that? — Gabe Moothart
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
You will need to replace those YUI2 script files with the corresponding 2in3 ones. — Gabe Moothart
why do i need to do that?i think I just need the YAHOO object's instance — code4fun
You could try only changing the yahoo.js (or yuiloader.js) file to the 2in3 version — Gabe Moothart

Petr Petr · Accepted Answer · 2012-03-26T11:27:06

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 Answers