Real world YUI usage

Real world YUI usage **Posted:** Sun Feb 01, 2009 3:42 am +0-

I have been using some YUI components in a site that I am building but what I have ended up with isn't architecturally sound - its basically a lot of examples all inline in each page with some in an external .js file, with YUI being included from the Yahoo servers.

As my site grows I know this is going to give me problems and so I am looking to improve how I am doing things but I am not sure how to start and where to go from here, and I haven't yet found one decent resource on how to move forwards.

Basically I am thinking that I should put all my functions in to an external .js file, use the YUI Loader, but I have page specific information (such as urls, names, table information etc..) in each page. I have been told that I should do something similar to http://uk.local.yahoo.com/ and use JSON objects for page specific items.

I am guessing that based on what is in that JSON dictates to what functionality is enabled on a page (I estimate am going to use about 75% of what the library offers across my site but a subset of that on individual pages).

Any pointers would be good, including recommended reading (including general Javascript reference material as I will be the first to admit my Javascript isn't great), but I think this kind of information could really benefit the YUI library and others.

Re: Real world YUI usage **Posted:** Sun Feb 01, 2009 1:33 pm +0-

When I worked on http://video.yahoo.com we put configuration information (and strings JS needed for translation) in a JSON object at the bottom of the page. It's still that way, the object is YAHOO.yv.props

It worked out pretty well.

Re: Real world YUI usage **Posted:** Mon Feb 02, 2009 8:30 am +0-

Do you have any examples of how it works?

Looks like the javascript is quite compressed.

Re: Real world YUI usage **Posted:** Mon Feb 02, 2009 10:43 am +0-

YAHOO.yv.props

Click here to see the revision history on this Gist.

That's what the properties object looks like, the JS just references it from within. Generally something like this.

Referencing props

Click here to see the revision history on this Gist.

Re: Real world YUI usage **Posted:** Mon Feb 02, 2009 12:09 pm +0-

I was looking into doing something with a current project.

I'm looking at generating a JSON structure on the server and putting in the document before loading any external scripts. This way it would be easy to, for example, switch on and off debug mode, or selected with CDN (Google or Yahoo) I'm loading the library from.

I can see this being useful to do for other project specific configuration also, like the Yahoo! Videos property example.

Re: Real world YUI usage **Posted:** Mon Mar 16, 2009 8:42 am +0-

So coming back to this after some time, I am looking at building something that would do this. Hopefully then I can make it generic and share it out as well.

To get the ball rolling I presume that I have to get YUIloader to load external YUI components based up on what my json is telling it to?

Re: Real world YUI usage **Posted:** Thu Mar 19, 2009 9:20 pm +0-

timc3 wrote:

To get the ball rolling I presume that I have to get YUIloader to load external YUI components based up on what my json is telling it to?

Yes, that's where I'd start. It's useful if your organization of files has a pattern to it, so then the loader config object can be generated programatically. You might also be able to do this on the server-side. Beyond generating a config object for the loader, you could also generate config objects for page-specific code where the functions called maybe re-used across pages, but the configuration for calling the function or creating an instance of a class is different.

Sort of poor-man's dependency injection...

Forums