YUI Review

Okay last weekend I worked with the Google Web Toolkit and I thought that was amazing. This weekend I took the time and actually looked and implemented some of the things in YUI and I have to say I'm honestly impressed how far it's gotten since Nate Koechley gave a talk about YUI at my work . A lot of the things we can do better as JS programmers have been addressed in YUI and I HIGHLY recommend everyone to sit down and take a look at it. Prototype could be easily ported into YUI like bind and extend (honestly I think that's the only thing where prototype wins over YUI as of today). I implemented some code using YUI, actually alot but here's a small list of some hot things worthy of note....

Assuming we have the bind .function from prototype... if not I created my own version of it.

//okay i can't live without this.
Function.prototype.bind = function() { 
 //lets get the args for this.
 var i, length = arguments.length, args = [];
 for(i = 0; i < length; i++)
 {
  args.push(arguments[i]);
 }
 //this is the function that bind attached to
 var __method = this, object = args.shift();
 delete i, length;
 //now lets run this function
 return function() {
  //lets concat the arguments from the old one 
  //and the new one
  var i, length = arguments.length, args2 = [];
  for(i = 0; i < length; i++)
  {
   args2.push(arguments[i]);
  }
  return __method.apply(object, args2.concat(args));
 }
}

Aborting AJAX requests and responding to similar requests..
This is a server request method I created. Which addresses similar requests.

    /*
     * sends a request with a response
     * use BIND !!! Woot!
     */
request: function(param, response, raw) {
        param = raw ? params : '?__ajax='+params;
        //there's a transaction with this param being requested lets just add on to the response
        if(this.transactions[param])
        {
            this.transactions[param][0].push(response);
        }
        //lets create a new transaction
        else
        {
            var callbacks = {
                success: function(response){
                    if(this.transactions[param])
                    {
                        //if there are other objects waiting for this transaction lets give the data to them as well
                        for(var i = 0, length = this.transactions[param][0].length; i < length; i++)
                        {
                            this.transactions[param][0][i](response.responseText);
                        }
                        //lets remove this transaction
                        delete this.transactions[param];
                    }
                }.bind(this, param),
                failiure: function(){},
                timeout: this.requestTimeout || 1500
            };
            this.transactions[param] = [[response], YAHOO.util.Connect.asyncRequest('POST', '/', callbacks, param)];
        }
        
        return this.transactions[param][1];
    }

Including JS and CSS after load
This manages what we included and what we should do when it loads. No duplicates will be added. The Beta Version of YUI Loader still outputs duplicate includes.

     /*
      * include a css or js script
      */
     include: function(url, actions)
     {    
             if(this.includes[url])
             {
                     return this;
             }
             this.includes[url] = true;
             if(url.indexOf('.css') != -1)
             {
                     YAHOO.util.Get.css(url,actions);
             }
             else
             {
                     YAHOO.util.Get.script(url,actions);
             }
     }

New Event Listeners
YUI offers 3 new Event Listeners

1. onAvailable: onAvailable targets a single element and fires when that element is available (when it responds to document.getElementById()) — but you can't count on the element's children having been loaded at this point.
2. onContentReady: When you care about not just your target element but its children as well, use onContentReady. This method will tell you that your target element and all of its children are present in the DOM.
3. onDOMReady: Some DOM scripting operations cannot be performed safely until the page's entire DOM has loaded. onDOMReady will let you know that the DOM is fully loaded and ready for you to modify via script.

Here is my implementation to use any of those as well as the standard type for calls

     /*
      * faster way to listen
      * use BIND !!! Woot!
      */
     listenTo: function(el, type, response) {
             var event = null;
          
             if(type == 'ready')
             {
                     event = YAHOO.util.Event.onContentReady(el, response);
             }
             else if(type == 'available')
             {
                     event = YAHOO.util.Event.onAvailable(el, response);
             }
             else
             {
                     event = YAHOO.util.Event.on(el, type, response);
             }
             return event;
     }

One other thing of note is the container class. This class apparently addresses some things with modules and overlays.... the examples can be found here http://developer.yahoo.com/yui/examples/container/index.html
But why YUI? Look at their widget collection! I swear it gets substantially larger every month. A lot of people in the community have been custom making their versions of YUI because of the long YUI namespaces. I just thought it would be sweet to just create a loader (A factory pattern [lol]) to wrap all these classes as well... for example the SS loader !

//Initial Area building.
ss.load('Events').onPageLoad(function() {
//request for the login, create a div, append the response to the div
ss.request(ss.serialize({'__ajax':LoginModule}, function(r){ss.newEl('div', {id:'login'}, r, document.body)});
//once this is loaded lets get the js for this
ss.listenTo('login', 'available', ss.include('form.js'));
});

//Lets start getting the js for the Top Modules
ss.load('Events').onPageLoad(function() {
ss.include('/include/js/yui/menu/assets/skins/sam/menu.css');
ss.include('/admin/modules/TopMenuAdminModule/TopMenuAdminModule.js');
ss.include('/admin/modules/TopTabAdminModule/TopTabAdminModule.js');
});


okay that looks wicked sick. The whole YUI community is flourishing and there are going places fast. A lot of the EXTJS community has defected already as well because of the EXTJS Licensing issue.
Anyways that was my weekend...