0

I like to know if there is a way to control css and js resources order in XPages Themes or Custom controls. Two reasons for this:

1. Performance: Is well known that when you place js files before the closing body tag the render is faster for the user (link). I can do that placing a script tag at the bottom of the Xpage or custom control but if I do so I'll lost the huge performance adventages I got when I use the resource tag and then check Application > Properties > Xpages > Performance > Use runtime optimized Javascript and CSS resources (in the latter case, js files are placed in the head tag).

2. libraries like Handlebars and Less: using resources tags I can add js and css with content-type text/css or application/x-javascript but with libraries like Handlebars and Less (really useful libs) I need different content-type or attributes.

This question is mainly on performance because it already works using link and script tags in custom controls like this:

Handlebars:

<script id="entry-template" type="text/x-handlebars-template">
  template content
</script>

Less:

<link rel = "stylesheet/less" type="text/css" href="css/styles.less" />
<script src = "js/vendor/less-1.6.0.min.js" type="text/javascript" ></script>

...but I feel a little dirty :)

Community
  • 1
  • 1
Johann Echavarria
  • 9,695
  • 4
  • 26
  • 32

1 Answers1

1

If possible try to use the non-blocking pattern for your JavaScript libraries. This should prevent performance problems:

<script>
   var s = document.createElement("script"),
   t = document.getElementsByTagName("script")[0];

   s.src="js/vendor/less-1.6.0.min.js";       
   t.parentNode.insertBefore(s, t);
</script>

EDIT:

<xp:script clientSide="true" type="text/x-handlebars-template" contents="template content">
   <xp:this.attrs>
      <xp:attr name="id" value="entry-template" />
  </xp:this.attrs>
</xp:script>


<xp:linkResource type="text/css" href="css/style.less" rel="stylesheet/less" />
Sven Hasselbach
  • 10,455
  • 1
  • 18
  • 26
  • Thank you for your answer. I was trying to find a "server side way". Your suggestion seems interesting, but, client side, I would think in something like [require.js](http://requirejs.org/) or [curl.js](https://github.com/cujojs/curl). Do you think your suggestion with document.createElement("script") has some advantage vs these libraries? – Johann Echavarria Feb 03 '14 at 23:00
  • @JohannEchavarria: I have updated my answer with two server-side examples. The advantage of the non-blocking pattern is that the browser is not blocked while loading the JS libraries (limit of max. 2 at the same time). The page is loaded first, which gives the user a better experience (The page us visible during loadding) – Sven Hasselbach Feb 04 '14 at 09:14