Skip to main content

Local YUI combo loader

Quite a while ago I had users complaining they could not use my application from another secure network zone. It appeared the root cause was in using Yahoo CDN for serving YUI resources while there was no internet access in that specific network zone. Also living behind a proxy, our regular users used to suffer from longer delays from time to time due to proxying. An obvious solution turned out to be using a locally served YUI. For this a combo loader is required if you care about efficiency on Production.

Installation
To start with, there are several alternative open-source tools that can be used for combo loading:
The Node.js combo handler is supplied with rather self-contained README file at github. Nevertheless, I'll outline main steps here that worked for me:
  1. Install Node.js and npm package manager.
  2. Run npm install combohandler.
  3. Choose a location for the local YUI files, e.g. /opt/combohandler/yui.
  4. Download YUI3 release zip and YUI 2in3 release zip if needed.
  5. Place sources at the chosen location. Besides I've renamed the top directories, so I've got the following:
    6. ls /opt/combohandler/yui/
2in3/  3.17.2/

ls /opt/combohandler/yui/2in3/
2.2.2/  2.3.1/  2.4.1/  2.5.2/  2.6.0/  2.7.0/  2.8.0/  2.8.0r4  2.8.1/  2.8.2/  2.8.2r1  2.9.0/  2.9.0pr1.2725/  build/  meta/

ls /opt/combohandler/yui/3.17.2/
align-plugin/  cssbase-context/  editor-para/  model-sync-rest/  series-marker/
--- and many more here ---
  6. Create JSON routes config /opt/combohandler/yui/root.json:
    7. {
  "/yui/combo": "/opt/combohandler/yui"
}
  7. Start combohandler now: combohandler -p 8555 -b /yui/public -f /opt/combohandler/yui/root.json
Now it's time for some comments on the steps above. First, you can see I use both YUI3 and YUI 2in3 releases but I do not use YUI gallery modules though. If you need gallery modules as well, I hope you'll be able to make them working yourself although I'll give some useful links in the configuration section. Second, I've configured the port 8555 above and the base URL path /yui/public that is used for rewriting relative URLs. This base URL should provide direct access to any YUI resource. To give a better idea here is our Apache HTTP server virtual host configuration: 
<VirtualHost *:80>
    Alias /yui/public "/opt/combohandler/yui"
    <Directory "/opt/combohandler/yui">
        Options None
        AllowOverride None
        Order allow,deny
        Allow from all
    </Directory>
    ProxyPass /yui/combo http://localhost:8555/yui/combo
</VirtualHost>
Finally the following should be working:

Application configuration
Configuring the application is much easier, you only need to fix yui.js location and provide a custom YUI config to enable local combo loader. Here is the javascript I've used: 
YUI_config = {
  comboBase: 'http://domain.com/yui/combo?',
  combine:   true,
  groups: {
    yui2: {
      combine:   true,
      root:      '2in3/2.9.0/build/',
      patterns:  {
        "yui2-": {
          configFn: function (me) {
            if(/-skin|reset|fonts|grids|base/.test(me.name)) {
              me.type = "css";
              me.path = me.path.replace(/\.js/, ".css");
              me.path = me.path.replace(/\/yui2-skin/, "/assets/skins/sam/yui2-skin");
            }
          }
        }
      }
    }
  }
};
You can see here a separate yui2 group configuration. If you are going to use YUI gallery modules, they can be configured using groups as well. For some examples you can refer to the related blog article and YUI forum topic.
Labels:

Comments

Post a Comment

Popular posts from this blog

Connection to Amazon Neptune endpoint from EKS during development

This small article will describe how to connect to Amazon Neptune database endpoint from your PC during development. Amazon Neptune is a fully managed graph database service from Amazon. Due to security reasons direct connections to Neptune are not allowed, so it's impossible to attach a public IP address or load balancer to that service. Instead access is restricted to the same VPC where Neptune is set up, so applications should be deployed in the same VPC to be able to access the database. That's a great idea for Production however it makes it very difficult to develop, debug and test applications locally. The instructions below will help you to create a tunnel towards Neptune endpoint considering you use Amazon EKS - a managed Kubernetes service from Amazon. As a side note, if you don't use EKS, the same idea of creating a tunnel can be implemented using a Bastion server . In Kubernetes we'll create a dedicated proxying pod. Prerequisites. Setting up a tunnel.
Post a Comment
Read more

Extracting XML comments with XQuery

I've just discovered that it's possible to process comment nodes using XQuery. Ideally it should not be the case if you take part in designing your data formats, then you should simply store valuable data in plain xml. But I have to deal with OntoML data source that uses a bit peculiar format while export to XML, i.e. some data fields are stored inside XML comments. So here is an example how to solve this problem. XML example This is an example stub of one real xml with irrelevant data omitted. There are several thousands of xmls like this stored in Sedna XML DB collection. Finally, I need to extract the list of pairs for the complete collection: identifier (i.e. SOT1209 ) and saved timestamp (i.e. 2012-12-12 23:58:13.118 GMT ). <?xml version="1.0" standalone="yes"?> <!--EXPORT_PROGRAM:=eptos-iso29002-10-Export-V10--> <!--File saved on: 2012-12-12 23:58:13.118 GMT--> <!--XML Schema used: V099--> <cat:catalogue xmlns:cat=
Post a Comment
Read more

DynamicReports and Spring MVC integration

This is a tutorial on how to exploit DynamicReports reporting library in an existing  Spring MVC based web application. It's a continuation to the previous post where DynamicReports has been chosen as the most appropriate solution to implement an export feature in a web application (for my specific use case). The complete code won't be provided here but only the essential code snippets together with usage remarks. Also I've widely used this tutorial that describes a similar problem for an alternative reporting library. So let's turn to the implementation description and start with a short plan of this how-to: Adding project dependencies. Implementing the Controller part of the MVC pattern. Modifying the View part of the MVC pattern. Modifying web.xml. Adding project dependencies I used to apply Maven Project Builder throughout my Java applications, thus the dependencies will be provided in the Maven format. Maven project pom.xml file: net.sourcefo
9 comments
Read more