How different is YUI 3 to YUI 2 to start learning?

Question

For last two years I have been programming extensively with jQuery and ExtJs. I think now it's time for me to invest some time in learning the impressive YUI library.

In terms of learning from scratch what is advisable? I dont plan to use YUI 2 at all in any of my future projects I will use only YUI 3. Is there any paradigm shift in riting code for YUI 2 and YUI 3? or is it only about some cosmetic changes ?

Answer 1

YUI2 and YUI3 are really very different. As different as plain javascript vs jQuery.

Here's an example of setting the background color of all elements of a given class to red to illustrate the difference.

First in YUI2:

<script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo/yahoo-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/dom/dom-min.js"></script>
<script>
  var YDom = YAHOO.util.Dom;

  YDom.setStyle(YDom.getElementsByClassName('test'),'background-color','red');

</script>

Now in YUI3:

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
<script>
  YUI().use('node',function(Y){

    Y.all('.test').setStyle('background-color','red');

  });
</script>

Notice the main differences:

• In YUI2 you include the needed modules yourself using the <script> tag. In YUI3 you only include one script file with the <script> tag and load all the rest using YUI().use. In the example above we use the node module in YUI3. YUI2 does have a module that can do the auto loading but it is a separate module itself and not built-in to the YAHOO global object.

• YUI2 is traditional imperative programming: foo(bar()) while YUI3 uses chaining.

• YUI3 forces you to write all YUI related code inside a function therefore running in its own scope and exposes only the YUI object to the global scope. This is basically ninja mode in other libraries.

Answer 2

Learn YUI 3, it is the future of the library. It's also a huge leap forward in terms of usability and flexibility from YUI 2. At this point learning YUI 2 unless you really have to is going to be wasted time.

Answer 3

Yes, definitely YUI3... It has great performance enhancements compared to YUI2.

Since you mentioned you have been extensively using jQuery already, this link might help you pick up YUI3 faster----listing the most frequently used YUI3-equivalents of jQuery modules

http://www.jsrosettastone.com/

Hope that helps..