In my last post, I was showing how a proxy can be used to circumvent XSS rules and said there are some interesting applications. Well, it’s time I posted one. Take a look at this very simple site (Please ignore the messy CSS, this is just a prototype) : Twitter Search
This is being served statically from Nginx without writing any server-side logic. This page could come from any machine in a cluster without needing to share state, added to an HTML5 manifest, or served from a CDN. This is the purest form of separation between data and display. The only source of dynamic data is a single ajax call.
<script type="text/javascript">
jQuery.ajax(
"/twitter/search.json?q=%23haiku", {
success: function(data, textStatus, jqXHR){
twitterData = JSON.parse( jqXHR.responseText );
$('body').append( $('#template').jqote(twitterData) );
}
});
</script>
The important line here is the call to jQote (pronounced like Chicote from Star Trek: Voyager). jQote is a client side templating system in the spirit of John Resig’s now famous Micro-Template code. To use it, you create a script block with type text/html:
<script type="text/html" id="template"> ... </script>
The browser will ignore this block and not parse it as javascript. You can add javascript code and data just like you might do with a PHP, Mason, or JSP page using <% %> and <%= %> syntax. This lets you push CPU expensive page creation to the client and conserve your resources for API calls.
In this particular example, I’m pulling the content from Twitter (using a proxy to get around XSS rules), so this takes next to nothing in terms of memory and CPU. I could improve the example further by adding a manifest file and whitelisting the /twitter/* network call. Then only the first request would be served from my server and all subsequent requests would only make one call out of the browser.