• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Sproutee Inc

Sproutee Inc

Websites, Ecommerce, SEO G Suite

  • Portfolio
  • Pricing
  • Contact

Dynamically load YUI dependencies

You are here: Home / Web Design & Development / Dynamically load YUI dependencies

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.

  • Share
  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Reddit (Opens in new window)

20/03/2009 by Meg Smitley in Web Design & Development

Website Packages

Put your best foot forward.

Attract more leads with a professional website

Get started

Footer

Links

  • Home
  • About
  • Blog

Services

  • Free website audit
  • Web design & websites
  • Ecommerce websites

 

  • Marketing & SEO
  • G Suite
  • Hosting
  • Facebook
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
Copyright © 2023 Sproutee Inc · Privacy policy · Terms & conditions · Sitemap
This site tracks visits anonymously using cookies. We use this information to improve your experience of our site. You can opt-out if you choose.Accept Reject Read More
Privacy Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT