jQuery page load

I’ve been struggling as of late on how best to create a solid page that dynamically loads data and renders the majority of the DOM client side through jQuery templates.  My reasoning for this is two fold.

1. To increase the page load time to the client
2. Simplify server side code.

On the first point, coming from a dev shop that has traditionally had zero ability to create well defined and clean HTML I wanted to try and separate as much as possible the responsibilities in UI code from the rest of the code base.  Since jQuery templating is beyond easy to do it seemed only natural that it could tie together through ajax the UI and the Server.  This created a great solution but had a byproduct that was unacceptable.  A slow page load time. 

On the second point by simplifying server side code there is far far less of a chance of bugs occurring if there is less server side code.  Also if UI code is not a part of the calls one could easily automate and interact with the server side API without having to interact with the site.  This creates implicitly a RESTful style API (at least in my case) for myself and third parties to operate with.

So, how to solve my problem?  I started with Google and I found this.  Take a second to read it.  Seriously.  I’ll wait.

Now, the author brings up some great points + benchmarks (which I love to see), but he didn’t directly solve my problem.  How do I use his method of making calls initially on the page whilst still handling all of my renderings client side.  That’s where this method made a little more sense.

The method is simple, do the ajax call at the top of the page before the bulk of the DOM is loaded and then injecting the elements when the page is ready.  Since javascript natively handles closures the data returned is persisted till after the $(document).ready event fires.  This means that the document can process all of this as soon as it becomes available rather than waiting for the ajax call to finish giving the UI render lag.

I have a few more ideas on how I can more efficiently render elements as they become ready but my knowledge of jQuery isn’t quite there yet on the subject, but I’ll post up my solution when I can prove the idea out.  Till then, hope this helps.