I’ve been using YUI Grids and LayoutManager for the backbone of my app’s interface since the end of last year. It’s been a steep learning curve and I still consider myself very much novice and, indeed, only noticed this week the ‘dynamic loading’ tab on the YUI Configurator. Rather than statically including the required YUI CSS and JavaScript resources, it is possible to use YUILoader to dynamically import them on load. While I appreciate that YUI-experts will not be impressed by my YUILoader-epiphany, this approach has helped me to slim down my app’s JS files while decreasing maintenance concerns and so I feel is worth mentioning for the benefit of other noobs.
As described on the Configurator page, it is possible to define the required resources in YUILoader’s constructor and to tweak YUILoader’s behaviour to suit your application. I found two constructor arguments particularly useful, ‘base’ and ‘onSuccess’:
var loader = new YAHOO.util.YUILoader({base: "//YUI build dir",require: ["dom","element","event","fonts","grids","layout","reset","selector"],loadOptional: false,combine: true,filter: "MIN",allowRollup: true,onSuccess: function() {//Stuff that needs doing on load, e.g. running LayoutManager}});
YUILoader API documentation claims that the String value of base is the directory used by YUILoader when loading dependencies. However, I have noticed that no matter what directory location I pass as base, YUILoader fetches resources using the directory used to import YUILoader. That is, if I’ve imported src=”http://yui.yahooapis.com/2.7.0/build/yuiloader/yuiloader-min.js” and set base to “http://yui.yahooapis.com/2.6.0/build/”, YUILoader sucks down 2.7.0 versions of my required resources, whereas if I change the directory of the YUILoader import to 2.6.0 I get resources corresponding to this version. Perhaps I am missing something in how this all works, but I would expect to be able to override the YUILoader’s build version by passing a value to base. On the upside, it is possible to control the resources gathered by YUILoader so, once you’ve gone to production, your app doesn’t spontaneously upgrade with potentially dire consequences.
In contrast, I’ve found the onSuccess argument reliable for running the JavaScript used to render my app’s display, i.e. to instantiate and run a LayoutManager. Previously I had included a script on every page to run LayoutManager, and have now been able to reduce the page-weight of my app by one file (before I’ve even started really polishing my frontend optimisation).
Finally, I’ve used YUILoader’s insert() function to demand that only the JS, and not the CSS, dependencies are fetched:
var options = [];loader.insert(options, "js");
I’ve overridden some of YUI’s skin-sam CSS in my own CSS file which is imported after my third party resources. However, because the YUILoader inserts dependencies at the end of the page, my customisation of YUI’s CSS was negated by a second and freshly imported batch of CSS dependencies. So, I’ve told YUILoader to just bring me the JS and I’ll have to update the CSS version manually (unless of course some wise reader can suggest a more optimal solution).
Happy ui-coding.