Stubblog


Integrating YUI with Ruby on Rails.
December 19, 2007, 11:54 pm
Filed under: rails, ruby, YUI

Very often, different controllers require different javascript, and while you could just put all your javascript in your application.js file, this doesn’t doesn’t lend itself to anything more than the most basic of applications. It becomes very large, and hard to maintain.

The solution I use is to include any global javascript (prototype etc) in my application.rhtml and then use the controller name to load any specific javascript

<%= javascript_include_tag ‘prototype’ %>
<%= javascript_include_tag “application” %>
<%= javascript_include_tag controller.controller_name %>

The problem starts when you throw something like Yahoo’s YUI framework into the mix, with it’s many components and javascripts you can easily add some serious overhead if you include every one in the global application, the ones you don’t need just bloat your application and slow down page loads.

In the past, in other languages I’ve always solved the problem by passing the required libraries into the XSLT and letting it transform that into script tags, You could construct and array and use that in the view to load the various bits of javascript.

The engineers at Yahoo! have obviously run into the same problem, and recently introduced the YUILoader component, which lets you load any javascript the page may require, and if that happens to be YUI components, it’ll also load any dependencies they require too. This is also a great way of integrating YUI with rails, without bloating your app, and without creating convoluted bespoke solutions.

To start with, you need to include the YUILoader itself in your applications view, but before we go any further, I’ll just point out that while you can use the Yahoo! hosted versions and probably should, for development I prefer to have a local copy to use just in case net access isn’t available. I put a copy (actually, I symlink it.) in public/javascript/yui, my application.rhtml has something like this in it:

<%= javascript_include_tag ‘prototype’ %>
<%= javascript_include_tag “application” %>
<%= javascript_include_tag ‘yui/yahoo-dom-event/yahoo-dom-event’ %>
<%= javascript_include_tag ‘yui/yuiloader/yuiloader-beta’ %>
<%= javascript_include_tag controller.controller_name %>

You don’t need to include yahoo-dom-event, but if you don’t YUILoader will try and grab it from the internet, regardless of where you tell it ‘base’ is.

In your ‘controller_name.js’ you need to initialise the loader, tell it what to load and finally tell it what to do once it’s loaded them.

var init = function()
{
var loader = new YAHOO.util.YUILoader({
require: [‘container’, ‘element’, ‘button’, ‘calendar’],
onSuccess: function() {
// Put your code here to initialise any
}
});

loader.insert();
};

// Use whatever method you like to make sure the page has finished loading.
YAHOO.util.Event.addListener(window, ‘load’, init);

This way you can seperate your javascript into seperate files to match your controllers, and keep your app lean by only loading the javascript you need, when you need it.

About these ads

51 Comments so far
Leave a comment

Hi Stuart,

thanks, this works well for me!

One minor typo in your init function:

it should be:
var loader = new YAHOO.util.YUILoader
instead of
var loader = new YAHOO.utilYUILoader

Cheers
Ben

Comment by Benny Beesnuts

Thanks Benny …

Comment by Stuart Grimshaw

[…] Integrating YUI with Ruby on Rails. « Stubblog (tags: yui rails javascript lazycoder) […]

Pingback by links for 2008-03-14 | Lazycoder

[…] are a number of tutorials out there for this — Stuart Grimshaw has one method in this article , but an easy way is to use the YUI configuration tool and just serve the files from their CDN […]

Pingback by Instant Shiny Forms with Rails and YUI « Enleitened

Nice post, I am giong to try it shortly.

Comment by stephen

John sums up telepresence from a network perspective, “Telepresence is an interactive real- time application, which means it is delay sensitive, loss sensitive and jitter sensitive. This sounds familiar: it is just like VoIP, with the one difference being that it has huge bandwidth requirements.” It’s that last part that makes things more difficult. No form of QoS can allocate bandwidth that doesn’t exist and it doesn’t have provisions to force the application to downscale the experience based on realtime metrics. …

Comment by application acceleration

Have you given any thought at all with converting your web page in to Chinese? I know a couple of translaters right here that might help you do it for no cost if you want to make contact with me personally.

Comment by site

Im getting a little problem. I cant get my reader to pick up your rss feed, Im using bing reader by the way.

Comment by how to have fun information

I love this blog site layout ! How was it made!? It is rather sweet!

Comment by is it possible

I feel one of your ads caused my internet browser to resize, you might well need to set up that on your blacklist.

Comment by may pang

This site has a lot of extremely helpful stuff on it. Thanks for informing me!

Comment by 18k gold chains

I Am Going To have to return again when my course load lets up – nonetheless I am getting your Rss feed so i can read your blog offline. Cheers.

Comment by world of warcraft account for sale

How do you make a blog site look this good!? Email me if you can and share your wisdom. Id be appreciative.

Comment by managedservicesinfo.com

Jesus Christ there is plenty of spammy comments on this web site. Have you actually believed about trying to eliminate them or installing a tool?

Comment by www.hawaiian-leis.com/

Have you considered adding some social bookmarking links to these blogs. At the very least for bebo.

Comment by needs

It appears to me that this website doesnt download on a Motorola Droid. Are other people getting the same issue? I enjoy this website and dont want to have to miss it any time Im away from my computer.

Comment by midstream partners

How did you make this blog site look this sick. Email me if you want and share your wisdom. Id appreciate it.

Comment by gold wedding rings

I have got one recommendation for your webpage. It appears like right now there are a few cascading stylesheet troubles while opening a number of webpages inside google chrome and opera. It is working fine in internet explorer. Probably you can double check this.

Comment by high quality personal injury attorney

It appears to me that this website doesnt download in a Motorola Droid. Are other people having the exact same problem? I enjoy this website and dont want to have to skip it whenever Im away from my computer.

Comment by intangible

Virtually all of the comments on this weblog dont make sense.

Comment by visit budapest

Virtually all of the comments on this particular blog dont make sense.

Comment by my seo company scottsdale

Oh man! This site is amazing! How do you make it look like this ?

Comment by bathroom remodeling phoenix, bathroom remodeling az, phoenix kitchen remodeling, kitchen remodeling az, home remodeling phoenix

This is often a excellent website, could you be interested in making time for an interview regarding just how you developed it? If so e-mail myself!

Comment by selfishness

Almost all of the remarks on this webpage dont make sense.

Comment by go here

Re: The person who created the statement that this was an excellent internet site really needs to get their brain reviewed.

Comment by web site

Jesus Christ there is plenty of spammy feedback on this web page. Have you actually believed about attempting to get rid of them or installing a tool?

Comment by personalisation agenda

How do you make your blog site look this sick! Email me if you can and share your wisdom. Id be appreciative!

Comment by the guide to smart goal setting

quite useful material, all round I picture this is worthy of a book mark, many thanks

Comment by this month

This is a excellent blog, could you be interested in working on an interview about just how you developed it? If so e-mail me personally!

Comment by djs in atlanta

Have you given any kind of thought at all with translating your main web-site in to German? I know a several of translaters here that might help you do it for free if you want to make contact with me personally.

Comment by web address

The look for the site is a little bit off in Epiphany. Nevertheless I like your weblog. I might need to use a normal web browser just to enjoy it.

Comment by discount how to date

Cool post . Thank you for, posting on this blog page man. I will message you soon! I did not know that!

Comment by montel williams loans

How come you dont have your site viewable in wap format? Can not view anything in my Droid.

Comment by visit our site

This blog site is pretty good! How did you make it ?

Comment by get ga land liquidation

Weird , your site shows up with a dark hue to it, what shade is the primary color on your web site?

Comment by cosmetic dentistry nyc

Im having a small problem. I cant get my reader to pick up your rss feed, Im using msn reader by the way.

Comment by wedding venues in devon

How come you dont have your website viewable in wap format? Can not see anything in my Droid.

Comment by powered by

Have you given any thought at all with translating your site in to German? I know a couple of of translaters here that will would certainly help you do it for no cost if you want to make contact with me personally.

Comment by website

rather helpful stuff, all round I imagine this is worthy of a book mark, thanks a lot

Comment by tahitian pearl jewelry

I have got one suggestion for your web page. It seems like there are a number of cascading stylesheet issues while launching a number of web pages in google chrome as well as firefox. It is working okay in internet explorer. Possibly you can double check that.

Comment by dentists manhattan

This website has some really helpful info on it! Cheers for helping me!

Comment by save on

After I open up your Feed it appears to be to be a lot of nonsense, is the issue on my side?

Comment by mlm

If you dont mind, exactly where do you host your weblog? I am shopping for a good quality host and your webpage appears to be quick and up all the time

Comment by research quick and easy payday loans

This blog is very cool. How can I make one like this .

Comment by commercial cosmetic dentist in flagstaff

Although I truly like this post, I think there was an punctuational error shut towards the finish of your 3rd sentence.

Comment by sponsor

This blog site has some very useful info on it! Cheers for helping me.

Comment by is appstar financial a scam

This blog is pretty good. How did you make it !

Comment by family physicians

kdjaguaqxlot

Comment by nqrvegrqdbvh

gvpxktdugjho

Comment by mchyttmmjgag

rdqsmxlytdar

Comment by tpuviwmyaxza

Very helpful blog. Thank you.

Comment by Wood Pellets Biomass Heating




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s



Follow

Get every new post delivered to your Inbox.

%d bloggers like this: