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

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 rit开发者_开发百科ing code for YUI 2 and YUI 3? or is it only about some cosmetic changes ?

---

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.

---

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.

---

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..

---

For other people who flock to this page in search of answers, here are a bunch of videos from the YUI blog to get started on YUI3.

Eric Miraglia’s Welcome to YUI 3

and more videos here - http://www.yuiblog.com/blog/2010/10/27/jquery-and-yui-3-a-tale-of-two-javascript-libraries/

---

You can find more documentation on YUI3 library here http://yuilibrary.com/

---

YUI is a free, open source JavaScript and CSS library for building richly interactive web applications.

YUI is a library of JavaScript utilities and controls for building richly interactive web applications using techniques such as DOM Scripting, DHTML, and Ajax.

1. Fast
2. Modular Architecture / Dependency Management
3. Component Infrastructure
4. Event System
5. DOM Interaction,Ajax,Many Widgets
6. Great Documentation

YUI App Framework

• Is Open Sourced
• Is Developed by Yahoo and the YUI community
• Is based on YUI3
• Is inspired by Backbone.js
• Gives you a basic structure for front end heavy web applications

More About YUI