How to Separate Logic using YUI 3 | Part 2

In my first segment, How to Separate Logic Using YUI3, I advocated using Y.Get as a way to load separate scripts as they were needed on the page, rather than on page load. This works well, with some minor drawbacks such as -if you need to set dependencies between the objects, you must create global YUI namespaced variables. Which may or may not be so bad depending on your code logic.

What I am going to recommend today is adding the new code as a module using YUI.add. This method has several advantages. All the objects will be loaded into the instance, however this may or may not mean you are loading extra code up front. Depending on your project, this may have little effect on things.

Create a module by:

YUI.add('newmodule', function(Y) {

Y.namespace('newmodule');

Y.newmodule.Mod1 = function() {
// expose an API
var privateVar = 'private';
return {
init: function(){}
doSomethingPublic" function(){}
}
};
}, '0.1.1' /* module version */, {
requires: ['base']
});


This sets up a new module called mymodules-mod1, this will expose Y.newmodule.Mod1 to the Y object in which it has scope and was loaded. Other YUI.use() blocks will not have access to the module. However, if you load all the modules you need for the page, each module can work together such as by being able to pass them to constructors or setter functions.

It is interesting to note that you can fire events from one YUI block, and it will be picked up by other event listeners in other YUI blocks. This is a good way to pass messages between objects, and write less piping code.

99 Designs - Sponsored Post

99 Designs - 99designs.com

"THE" best sites to get design work done!

sponsored like

jminkler's profile on MyLikes

LazyDev: First Page of Goolge in under 11 hours .. ?

Wrote up a posting today over at LazyDev about a page 1 ranking I got today .. just messing around ... in under 11 hours :-D

Top Vistits - By Browser - 1 mo on this site

1) Firefox
2) Chrome
3) IE
4) Safari
5) Opera


Curious about the IE numbers you say? IE 6 had 1 visit (shame on you really...) IE 5.02 had 2! (double shame). 62% of the IE users use IE 7. (Ouch I would hate to develop js in IE 7)

Firefox holds 55% of the traffic, with Chrome at 17%. Most Firefox users are using 3.5.7

This should be rather obvious why my numbers are skewed, but strangely enough, I am seeing the same trends on many of my other non-technical sites. (Hurray!)

How to separate logic using YUI 3

There are several things to consider when building up the javascript on a page. How the js files will be loaded, what io actions will take place, animations, form validation etc. Yahoo User Interface give you a nice set of options to put it all together, while minimizing the downloads to the client.

For our example, let's assume we have 2 separate Ajax calls we want to make, which then triggers an animation. In this case we want to break out each "part" into separate files, and only load the code the user needs. To begin we will have a "setup" .js file which will use Y.Get.script('', {onSuccess: ...}) to load the other files when needed, and will also setup some namespaces.

YUI().use("node-base", function(Y){
    UI = {
      filesLoaded: false,
      setup: function(){
          // Setup Event  - event, fnc, context, [args]
          Y.on('click', this.fireAjax1, 'btnFireAjax', this) 

      },
      fireAjax1: function(){
        if(!this.filesLoaded){
           // Load the Script 
           Y.Get.script('js/PageAjax1.js', {onSuccess: this.ajaxLoaded1);
        } else {
          this.ajaxLoaded1();
        }
      },

      ajaxLoaded1: function(){
          // Fire from namespace
          YUI.Ajax1.fire();
          this.filesLoaded = true;
      },

       fireAjax2 [...] ajaxLoaded2 [...]
    };

    // Put this object in scope
    YUI.UI = UI;

});

When using the Y.io, you want to break out each separate call into different YUI().use() blocks as you want to set a separate callback for each event. It just makes it easier to deal with instead of making a single "dispatch" function.

In the PageAjaxX.js files we can load the io and animation libraries/files as needed. This ensures that the js is only loaded when it's needed which cuts down on initial page load times and improves user experience. Your objects can then be put in a namespace and work with each other nicely.