CODEWITHSUNDEEP
jqueryyui
Vinee
Vinee

Reputation: 1654

How YUI include particular module? And how it works?

As i am a novice in YUI and using this just couple of days back.
So, YUI instance include particular module like 'io-base', 'node' or any other module.
then i can use method like io(), Node() , on() etc.

Question 1: Can anybody tell me how it works exactly? And does yui work offline after include seed file like jQuery?

Question 2: Does this yui helpful for small projects?

Upvotes: 3

Views: 244

Answers (1)

foxxtrot
foxxtrot

Reputation: 11412

At the heart of YUI is the Loader. Basically, the Loader either downloads or is shipped with a JSON structure describing every module in YUI. When you request something like 'node' or 'io-base', Loader looks up the metadata for the modules you name, gathers their dependencies not currently registered with the module registry (more on that in a moment), and recursively works it's way up the dependency chain for the full set of modules it needs to load. It then issues HTTP requests for those modules. If you don't have a 'combo handler' (basically, a file concatenation service on your server), Loader will request each file individually, but the Combo Handler allows those files to be requested in batches.

Every YUI Module is wrapped in a YUI.add() statement. This method takes a setup function that sets up the module, and exposes whatever code you want exposed on the 'instance object' passed into the function, by convention, this instance object is called 'Y'. What YUI.add actually does is place the module in the module registry noted above, so before Loader calls your callback provided to YUI.use(), it can execute each required modules setup function to ensure that your environment is properly configured based on what you've requested.

This sandbox model, each module is setup inside a function using an instance variable that exposes the desired functionality from each module, and is eventually passed into the callback you provided to 'use', allows for multiple instances of YUI to run on the same page, that are completely insulated from other instances on the page. (Caveat: this generally isn't a great idea, since each sandbox has it's own set of modules, you end up with a lot of redundant memory usage, it still can be useful, it's just generally not advised or necessary).

If you include only the seed file, YUI will not work without an internet connection, because the seed file contains no modules. There are a few alternatives to use YUI in this environment.

  • SimpleYUI is a 'rollup' of a lot of the jQuery-like functionality. Namely, the Node module, IO, transistions, and a few other smaller utilities. If this is all the functionality you need, it loads in one file, and you don't need any more.
  • The Configurator allows you to select the modules you require and you can use this to collect the modules you require to register with the module registry while your application is offline, so Loader never needs to try to go to the Web to fulfill missing dependencies.
  • Dav Glass is working on a tool called 'grifter' which will allow you to create custom YUI module repositories, designed in part to allow you to work in, say, a Windows 8 app without needing to ship the entire YUI source with your app, as is currently suggested.

YUI can be used on any project, large or small. It certainly has code organization and patterning benefits that are most prominent on a large project, but the library is able to 'scale' with project complexity through the fairly straightforward interface of Loader.

If you want more of a deep-dive in how to configure loader, and some of what is happening under the hood, I gave a talk at YUIConf 2011 on the subject, though I warn, it was aimed at people already familiar with YUI who were looking to configure their own modules for loading.

Upvotes: 10

Related Questions