Coming in YUI 3.2.0: SimpleYUI

By YUI TeamSeptember 3, 2010

The feature described in this article is available as of YUI 3.2.0pr2, and it will be a part of the upcoming 3.2.0 release. You can start playing with it today by following the code in this article.

SimpleYUI is a new way of loading and instantiating YUI 3. The SimpleYUI file contains a rollup of basic Ajax library functionality: DOM tasks, event abstraction, UI effects, and Ajax. Unlike other ways of loading YUI, SimpleYUI creates a YUI instance immediately upon loading and binds all included components to a global Y variable. Using SimpleYUI is easy:

<script type="text/javascript"

 //Y is ready to use; no instantiation necessary:"#foo").addClass("highlight");

This isn't a "lite" or de-contented version of YUI — you still have access to all of the power and features of the entire library when you start with the SimpleYUI file. However, SimpleYUI does provide a nice convenience by rolling up some common functionality and creating a global instance (Y) that's ready to use immediately.

Work with the DOM

SimpleYUI gives you all of the standard DOM interactions in the YUI 3 API:

//get an element reference, add a click handler'#demo').on('click', function(e) {/*handle click*/});

//add content to an element'#demo').append('Additional content added to #demo.');

//listen for any click on any <li> that descends from #demo:'#demo').delegate('click', function(e) {/*handle click*/}, 'li');

//move #demo to the location of any click on the document'document').on('click', function(e) {'#demo').setXY([e.pageX, e.pageY]);

Create UI Effects

All of the UI effects that are part of the (new-for-3.2.0) YUI Transition module are available in SimpleYUI:

//fade #demo, then remove it from the DOM:'#demo').transition({
    easing: 'ease-out',
    duration: 2, // seconds
    opacity: 0
}, function() {


SimpleYUI provides the IO module's basic Ajax functionality:

// Make an HTTP request to 'get.php':'get.php', {
    on: {
        complete: function (id, response) {
            var data = response.responseText; // Response data.
            // ... handle the response ...

The rest of YUI is just a use() away

You aren't limited to what comes bundled with SimpleYUI. You can bring in any other YUI 3 component, YUI 3 Gallery module, or YUI 2 component with a simple use() statement at any time.

//Use drag and drop, which is not included in the SimpleYUI rollup:
Y.use('dd-drag', function(Y) {
    var dd = new Y.DD.Drag({
        node: '#foo'

YUI 3 is good about loading anything you need whenever you need it; just master the use() statement and you're always just one line of code away from anything in the library that you need.

Use SimpleYUI when...

  • want to get started fast and learn the ropes of YUI;
  • want to have basic Ajax library functionality available at any time in the life of the page without creating a new YUI instance.

Don't use SimpleYUI when...

  • ...performance matters more than convenience;
  • want to sandbox portions of your implementation into separate instances;
  • want to be deliberate about when different components load and what the precise module/submodule makeup is on the page.