Tom Lauck’s Deseloper.org

Pre-Caching Flex Applications Using YUI

author:

I thought a little scenario might assist in prefacing this post.Bob has built a cool Flex application and it now time to show it off to the world. Bob is a web guy, so like most web guys, he uses YSlow to see the performance on his pages. Flex application and YSlow in hand, Bob uploads his files to his web-server. He then realizes that he forgot to ask himself one very important thing, “how big is this Flex application anyway?” To Bob’s dismay, the final size is almost 2 mb! Bob has some options:

  1. Not caring – he has some decency.
  2. Revisit code – he has a deadline to meet.
  3. Play around with RSLs – now he’s getting on the right track.
  4. Pre-caching the application – getting warmer.
  5. Pre-caching the application and the Flex framework – tada.

Now back to me…Bob’s best options here are 3, 4, 5. And more specifically 3 and 5. If you aren’t familiar with RSLs (Runtime Shared Libraries) in Flex, I highly recommend them. By implementing RSLs, it becomes possible to cut down the initial file size of the application, only loading libraries when needed.But one still has to load the swf libraries, even if RSLs are utilized. In many scenarios users visit a specific page or URI before accessing or launching a Flex application. For instance, a search page followed by Flex search results. To take advantage of this, why not take employ AJAX? After all, its primary purpose is the asynchronous transmission of data, so AJAX seems like the perfect tool for the job.I chose YUI for this example, but you could use jQuery or something of the like.

//Caching methods using YUI
var flashCache = {
	handleSuccess:function(o)
	{
		this.processResult(o);
	},
	handleFailure:function(o){ },
	processResult:function(o){ },
	startRequest:function(url) {
		YAHOO.util.Connect.asyncRequest('GET', url, callback, null);
	}
};
var callback = {
	success:flashCache.handleSuccess,
	failure:flashCache.handleFailure,
	scope: flashCache
};

//Cache the swf and swz
window.onload = function()
{
	flashCache.startRequest("flexApplicaiton.swf");
	flashCache.startRequest("framework_3.0.189825.swf");
	flashCache.startRequest("framework_3.0.189825.swz");
};

By asynchronously loading the Flex application, Framework while the user is taking a preliminary action, you basically take the 2 mb Flex application (although hopefully it is less because you are using Runtime Shared Libraries) and turn it into 12-40k. Otherwise known as the size of the page which the swf file is embedded. (The photo below is not a real representation of the scenario, but illustrates the difference in cache.)

YUI Cache

It is understood that most users who visit your site have an empty cache. However, if you have instances where the user will spend some significant amount of time (enough to load the swf), you and Bob (from the outset) can rejoice in the now optimized speed and total score benchmark you will receive in YSlow…2 mb Flex application included.

8 Responses

date: March 25th, 2010

hi,
please let me know whr i can put above code of piece in my project….

spoken by: Kiran

date: September 16th, 2010

jwxretxcetknfizprpeh, space heater, AfWlvvt.

spoken by: Space heater

date: May 22nd, 2011

Hey. I like this blog . It was informative. I have a blog about eBooks for Kindle e.g. dead reckoning – a sookie Stackhouse novel or buried prey. Cheers

Kindlebook

spoken by: Kindle 3

date: May 31st, 2011

I love the way you illustrated your post above. You are a blog genius!

spoken by: Organic Food

date: July 4th, 2011

Awesome post.Great.

spoken by: inmotionhosting coupon

date: July 16th, 2011

I am curious to find out what blog system you happen to be working with? I’m having some minor security issues with my latest site and I would like to find something more safeguarded. Do you have any recommendations?

spoken by: Louie Ellingsen

date: July 20th, 2011

It is necessary to protect the legs!!!

spoken by: guru chans

date: July 20th, 2011

Strange this post is totaly irrelevant to the search query I entered in google but it was listed on the first page. The difference between the right word and almost the right word is the difference between lightning and the lightning bug. Mark Twain 1835 1910

spoken by: creed only

Leave a Reply

Mar 19 2008