Browser/Web caching

Overview

Flex and in general Flash applications are known for its caching both in a good and a bad way. Good way that it decreases the per call transfer size by caching all the core libraries necessary for frequent calls. Bad way it caches everything.

So in this document we are going to understand the term we know and call as “Browser/Web cache”. Once we understand it, we will solve the problem that can occur because of this caching.

Web Cache

A web cache is a mechanism for the temporary storage (caching) of web documents, such as HTML pages and images, to reduce bandwidth usage, server load, and perceived lag.

In detail, a web cache is a temporary storage place for data content requested from the Internet. After an original request for data has been successfully fulfilled, and that data has been stored in the cache, further requests for those files (e.g., HTML pages, images) results in the information being returned from the cache, if certain conditions are met, rather than the original location.

Need for Web Caching

Consider a simple scenario – a Librarian. He is there to help you by giving you books you ask for. Every time a reader comes and asks for a book the librarian has to go to stack to search the book and then give to the reader. If a book is asked for again and again, the most efficient way for Librarian is to have a small drawer next to his desk, which is easily accessible and keep the books recently read or are popular.

In the analogy given above you can identify Librarian as the browser, the book as the content and reader as user.

Flex/Flash application and Web caching

The Flex/Flash applications harness the “Caching” using Flash Player Cache and RSLs. But when it comes to the web caching (which is quite different from Flash Player Cache) it has issues. Browser treats the flex/flash applications to be an object and caches the complete object in the cache.

What’s the problem?

Caching is a well known and widely used mechanism. Then where is the problem? Here are few problems observed –

“The new patches to the application need a browser cache to be cleaned”

Versioning can be a solution!!!

Versioning is considered to be the most important part of any software deployment/development process. An intelligent versioning can be a solution to this above problem.

So here is the scenario, how we will versioning to solve this problem –

  1. Build the project
    1. Most probably the versioning will come into picture when the deployment phase comes.
    2. Build normally should be automated ant/Hudson
  2. Create a version number –
    1. When you a build a project, either through Ant or Hudson make sure you generate a version number.
      1. Version number can be, at its simplest form, an auto increment value that increments with each build.
    2. Hudson automatically generates the variable named – “BUILD_NUMBER”.
  3. Append Version to the generated SWF
    1. This can be done either through command line or in your build file, while compiling the SWF file, Suppose you’re compiling “cre.mxml” and the current generated version number is 44 make your output file to be named as “cre_44.swf”.
  4. Use FlashVars to make your SWF version-aware, to handle Module Loading
    1. FlashVars are the variables/parameters that can be sent from html to flex/flash object as initialization parameter, directly accessible from within the application
  5. Make your HTML wrapper to load new versioned SWF
    1. Tweak your HTML wrapper to load the new cre_44.swf

How we implemented-

We had a problem in hand, and idea in mind. We have the process in place.

  • Ant for building the application
  • Hudson for deployment – will use the generated version number.

Code changes done –

  • In the ant file we did the following change
    • Include the environment variable to access the global variables.
  • Changed the mxmlc task to append the version to the output file.

  • Change the Wrapper to include the new version-ed file
  • If an application uses Modules, which mostly would be the case, Even the modules have to be versioned, for that we have to make our application version-aware*
    • For this there are significant changes that are needed
      • Create a custom html wrapper ( not using the html-wrapper )
      • Use token replacing functionality of the application to include custom attribute (build-number) to be included into the system.
      • Pass the build-number as a parameter to Flex application through FlashVars( can be defined in index.template.html)

Creating Custom Html-Wrapper

“Html-wrapper” task provided by FlexTasks.jar has one problem – you can’t pass your custom attribute to the template file. For example if you want to pass the BUILD_NUMBER to be included as the attribute to index.template.html, it is not possible with html-wrapper. So here is what you should to create a custom html-wrapper –

  1. Make the Template
    1. To create the placeholders use @place_holder@ instead of ${place_holder} that is used with traditional “html-wrapper”
  2. In ant create the Generate-Html target

Advertisements

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