TYPO free

home

fighting for TYPO free code

Putting the ratings extension on a diet

28 Jun 2009

Recently I started using a great tool called Google Page Speed. After inspecting some of my pages I was amazed to learn that a the 'ratings' extension uses the prototype.js file just for the XmlHttpRequest. Prototype is not available in a minified version that is officially supported by the prototype team. TYPO3 comes bundled with a version of prototype.js that weighs in at about 124K.

I started looking for lighter versions of a JS library that could do the same task as prototype. The usual suspects here are JQuery weighing in (minified) at about 57K, MooTools (only the needed stuff) weighing in at about 35K and Dojo weighing in at about 81K. All of them are still pretty fat if all you need is to do a XmlHttpRequest.

Then I stumbled upon Lokris which is a bare bones AJAX library. It weighs a mere 3K. That's a big difference compared to all the other (full fledged) libraries.

The Lokris library boast the following features:

  • Small footprint (minimized ~ 3K)
  • Synchronous/Asynchronous cross-browser Ajax calls (of course)
  • Convenience features for easy XmlHttpRequest handling
  • Setting timeouts for Ajax calls / Setting timeout handlers
  • Setting error handlers for Ajax Calls
  • Easy to understand, no blown up code, no overhead 

So, how do we use it?

  • First we download the lokris.js (minified) JS file and place it somewhere in the fileadmin.
  • Then we place a new rating.lokris.js file in the fileadmin with the following code:
var id;
function tx_ratings_callback(html) {
  document.getElementById('tx-ratings-' + id).innerHTML = html;
}
function tx_ratings_submit(localId, rating, ajaxData, check) {
  id = localId
  document.getElementById('tx-ratings-display-' + id).style.visibility = 'hidden';
  document.getElementById('tx-ratings-wait-' + id).style.visibility = 'visible';
  var request = Lokris.AjaxCall('index.php?eID=tx_ratings_ajax', tx_ratings_callback, {
    async: true,
    method: 'POST',
    postBody: 'ref=' + id + '&rating=' + rating + '&data=' + ajaxData + '&check=' + check
  });
} 
  • And then we can modify our own rating.html template in the fileadmin to include our own JS in the HEADER_PARTS:
<!-- ###HEADER_PARTS### -->
<link rel="stylesheet" href="###SITE_REL_PATH###res/styles.css" />
<script type="text/javascript" src="/fileadmin/site/js/rating.lokris.js"></script>
<script type="text/javascript" src="/fileadmin/site/js/lokris.js"></script>
<!-- ###ADDITIONAL_CSS### begin -->
<link rel="stylesheet" href="###CSS_FILE###" />
<!-- ###ADDITIONAL_CSS### end -->
<!-- ###HEADER_PARTS### --> 

You will need to point to your own template with TypoScript setup like this example:

plugin.tx_ratings_pi1 {
    templateFile = fileadmin/site/template/tt_news.ratings.htm
} 

There are also bugs posted about how to use MooTools and JQuery with ratings:

I'll fix those as soon as I get added to the team on forge.

Well, that's it. You just saved yourself 121K of code! For the record; that's a 4133% improvement ;-).

Michael 29 Jun 2009, 12:19
Great work writing up the simplification of the ratings JavaScript.

Did you also take long-term caching and reuse of the Prototype libraries into consideration for the Lokris transition?
Michiel Roos 29 Jun 2009, 12:24
Hi Michael,

No, I just took this website as a use-case. If you use prototype or another lib not only for ratins but also for other extensions, then this may not be such a good solution. But for extensions that only use AJAX to update their content and no further DOM tricks or visual effects, it works nicely.
Commenting is closed for this item