What does Asos do?
Javascript templates the sexy way with JST

We nerds can't dress up with big-framed glasses and Mum's knitted vest anymore because the evil hipsters took this style away from us. To fight being mistaken for them we can either go all shirt-and-tie or actually develop a sense of style.

That is why I was browsing one of my favourite fashion shopping sites, Asos.com, as I felt the need to upgrade my wardrobe.

I like how easy it is to browse Asos' stock and noticed that the items are loaded quite quickly with AJAX. But what makes the AJAX so fast and slim?

The POST-data looked rather unsuspicious, it was a bunch of parameters all JSON-ed-up:

Then I checked the response, it returned a load of JSON containing the result items which was also unexciting:

But there was another GET request in my Firebug which I found a bit suspicious! I opened it and saw something that looked like a template:

    {for record in items}
    

        

            
                {if record.videoPath == ""}
                    
                {else}
                    
                {/if}
            
			

				
				
Hide this brand
				
			
        
        ${record.desc}
        

            {if record.showOutletString == true}               
                
                    RRP ${record.recRP}

                
                
            {else}
				
            {/if}
            {if record.mixMatch == "SUBGROUP"}FROM {/if}{if record.showNowPrefixString == false} {if record.minPrice != ''}FROM ${record.minPrice} {else} ${record.price} {/if}{else}${record.prevPrice}{/if}
            {if record.showNowPrefixString == true} 
                
                {if record.mixMatch != "SUBGROUP"} 
                    {if record.minPrice != ''} 
                        
NOW FROM ${record.minPrice} 
                    {else} 
                        
NOW ${record.price} 
                    {/if} 
                {else}	
                    
NOW FROM ${record.price}
                {/if}
                	
            {/if}
        
        {if record.mixMatch != ""}Mix & Match{elseif record.moreColors == true}More Colours{/if}  
    
    {/for}

I wondered "This must be the template for the result HTML. But where does that template and the JSON data get mixed together?"

Let's elaborate a bit....so far I've constructed my AJAX code something like this: The AJAX request sends the parameters either via GET or POST to the backend. Some sort of controller picks up the parameters and constructs based on these parameters and whatever logic it contains a response. This response gets send back either as...

...a simple string (best for responses like "hello world" or a chunk of HTML)
...or JSON (nice and slim compared to XML)

I know that I quite often send back chunks of bloated HTML. This is because I hate looping over JSON with Javascript to construct HTML, especially when the template already exists in the backend. The problem here of course is that lots of HTML tags make the response unnecessarily big as I send dozens of unnecessary li-tags and other rubbish. Just take this simple example:

Pure JSON response:

['Beach Dress',
'Silk Vest',
'Miniskirt',
'Power Blazer',
'Organic Cotton Shirt']

77 characters

Same response pumped up with HTML:

  
Beach Dress
  
Silk Vest
  
Miniskirt
  
Power Blazer
  
Organic Cotton Shirt

115 characters

The HTML-response in this little example is already 38 characters bigger!

So, what does Asos do? They send a template and some data and it magically gets munched together and becomes pretty HTML. The secret? JST or Javascript Templates. Oddly enough the codebase has not been updated since 2005 but maybe the code is just so awesome that it doesn't need tweaking. All you need to do is:

1. load the js library
2. create a fancy structure of objects and arrays
3. create a matching JST template
4. process the JST template
5. (optional) already parse the JST template
6. process the data on the JST template object
7. output the result in the DOM

Nice! A bit of googeling revelaed that there are other Javascript-based template engines out there. For example Javascript-ninja John Resig has developed one called "Javascript Micro-Templating".