Web Based YUI 3 - Rollout File Builder for Responsive JavaScript Applications

Reducing server latency and transfer size with rollout files

YUI 3 is extremely modular in order for you to be able to code responsive applications by minimizing transfer size and code duplication.

To take most advantage of this modularity, the way to go is to build your own rollout files.

A discussion of pros, cons, techniques needed for this approach is shown in YUI Developer Caridy Patiño's video about YUI 3 Loading Strategies.

To find out how to go about it in practice, and download or try out a free, open source, web based, YUI 3 incremental rollout file builder, read on. Or click right away to try out this example installation.

In incremental files lies the biggest advantage of using rollout files

If you are able to compose your own rollout files, you can "cut the cake" of the total code served to your users in such a way to divide it in single, minor chunks, that are served at strategical points during the lifetime of the application. This is important: you don't want to serve many small files, just the biggest files that are sensible at each point in time. A balance between reducing server latency (read, number of server hits) and transfer time has to be found based on the work flow enforced by your application.

However, an even greater advantage of using such a modular library like YUI 3, comes from being able to produce incremental rollout files: at each point in time only transfer the dependecies that have not been included previously.

How to build rollout files with YUI 3?

YUI 3 has not yet a tool to help building rollout files.

The problem in building rollout files is that you need to know exactly which modules are required by the module that you are using at each point in time. YUI 3 has a dependency configurator to aid you in combining a rollup file.

However, to build incremental files, you need also to compute which modules have already been included in which file and to this end, using the dependency configurator is not a viable solution.

Furthermore you might be using gallery modules that are not part of the YUI library and that are not even known by it.

In order to bridge this hole, I have developed a package that takes advantage of YUI 3, PHP and ANT to provide an integrated management front end and builder routine, for producing YUI3 rollout files.

The script leverages YUI3 own loader in order to compute the dependencies, so the result is guaranteed to be the same as you get, using a manually crafted configuration of YUI 3 modules. It works for your own and other's gallery modules and for css files too.

Example of incremental JavaScript files

This examples shows the required modules needed by an app of mine. The first set is required before the user authenticates. The set of dependencies is produced  by the following 5 modules:

'tabview','gallery-split-desktop','gallery-inline-xhr','gallery-slider-window','password-checks'.

 

The following set contains the files required after the user has authenticated herself. As you can see from the list below, four of the modules used at this point are the same, one is no longer needed, and two modules are required additionally.

'tabview','ckf-shim','gallery-split-desktop','gallery-inline-xhr','gallery-slider-window','gallery-progressbar'

 

If you bothered to browse the two sets, you would notice that many of the dependencies are the same, however there are some differencies and it would be impossible, manually, to figure out which dependencies are shared by the 2 sets and which not. As a result, I would be forced either to use one big file including all the modules and all the dependencies. Instead, I now can use the rollout file builder and let it compute for me which files remain to be sent  to the client. It turns out the set is very little, as it is shown below:

 

Using this method you would build the first set as, say, bootstrap.js, and link to it on the page presented before the authentication.

After the authentication you would still link to the same file, and add only the complement file produced building the set of required files here shown as the third one. Given the right conditions, the first file is cached by the browser and will not have to be downloaded again. Only the remaining 31K will be transferred after authentication.

The builder let you compose the requirement set, check file size, and once you are sure about how you are going to spread the load (which modules to collect in which single file), you can click build the files. It's easy and it really pays off in terms of responsiveness.

Installation Instruction

If you want to run the builder on your own box (which is indeed what you want to do, and it's BSD licensed), then go to the installation page to read a step by step installation instruction.

You can also try out the front-end on this server. However it cannot be used to compute a rollout build for your own modules, only for YUI 3 and css files. And the building process is disabled on this server.

Download

The package makes use of a YUI gallery module: inline-XHR(php), one single PHP/HTML/JavaScript file and a couple of Ant configuration files. You need to install Ant on your box. I'll show you how to do for a Debian/Ubuntu Linux box.

You can download a zip file containing all the requested files from SourceForge.