I like YUI3, mostly because I can use it to fill in the gaps between HTML4 and HTML5, and also because a single line of code can make a button zoom around the page:

  var myAnim = new YAHOO.util.Anim('testButton', 
                      { width: { to: 400 }  }, 
                      1, 
                      YAHOO.util.Easing.easeOut);

Also, I can define data sources and polling intervals completely client side, without having to wait for everyone to finish implementing the event-source tag. YUI3 defines 3 useful objects: DataSource, DataSchema, and DataType. DataSource defines a generic source of data. It could be a function, a file, or a web service. Once the DataSource has been configured, you can pull from and publish to the specified location. Here’s a simple example:

YUI().use("datasource-function", function(Y) {
   var getDate = function() {
     return new Date();
   },
   dateDataSource = new Y.DataSource.Function({source:getDate}),
   callback = {
      success: function(e){
                  alert("Current Time is: " + e.response.results[0]);
               },
      failure: function(e){
                  alert("Error!: " + e.error.message);
               }
    };
 
    dateDataSource.request(null, callback);
}

Above, we’ve got some basic YUI steps. The first line defines a block of YUI code that depends on the datasource-function component. In the block, we define a method to get the current date and time, and a DataSource the pulls its information from that function. Next up, we define a callback to handle the possible return situations when the data source requests information. The last line requests data from the function.

YUI will call the getDate function, take the output from that function and pass it as an event to the callback. If there was no problem, the browser will pop up a window telling you what time it is.

Enough of that, let’s turn it up to 11. We will change up the data source to pull from a webservice first:

   stockDataSource = 
            new Y.DataSource.Get({source:"http://www.stocks.com/NASDAQ"},

The Get data source knows to look for a URL. We’ll pretend this one will give us the NASDAQ index number. We will also pretend that the response looks like this:

<stocks>
  <stock>
     <name>NASDAQ</name>
     <value>189.14</value>
  </stock>
</stocks>

So, now we need to define the schema for the data source. Simple enough, we just need to plug in a schema definition:

  stockDataSource.plug({fn: Y.Plugin.DataSourceXMLSchema, cfg: {
     schema: {
          resultListLocator: "stocks",
          resultFields: [{key:"value"}]
     });

Above, we’ve defined the resultListLocator to the be xpath to a list of results, in this case stock nodes. Then we specify the fields of that we’re interested in, namely the value node. The DataSchema will be applied to all data coming into the data source. Now, we just modify the callback handler to deal with the new information, like so:

   callback = {
      success: 
        function(e) {
          alert("The NASDAQ Index is currently: " + e.response.results[0].value);
        },
      ...
   };

The response contains an array results, which is a list of objects exposing the resultFields as properties. And now when stockDataSource.sendRequest(null, callback); is executed, the DataSource will consume the webservice, format the XML into an array of objects, attach them to the response event and pass it on to the callback function. No server handling required.