Tips on rendering html on client

Question

What are the points to bear while designing and coding a web application where the approach is to render components on the client using jQuery/ScriptServices (as data source), similar to an igoogle page?

Answer 1

From a startup performance perspective, as well as ease of use; i'd use Google's Ajax Library API to deliver your jQuery/jQuery UI/etc scripts. It takes care of versioning issues, and optimizes delivery speed by using gzip and expire headers.

Also, make sure to pick up Firefox and Firebug (you're going to pretty much live in Firebug for most of your client-heavy work.)

Answer 2

Try to deliver as much state as you can in the initial request, so you don't have to round-trip before you show any data to the user.

Measure how long it's taking to show a working UI to your user, so you can spot regressions.

Prepare to spend lots of time experimenting.

Answer 3

If it is iGoogle you are looking for then get yourself an iGoogle like framework. iGoogle uses a standard API that its widgets implement, see open social. There are also a lot of other examples to pull from: check out nettuts

Treat the client code like you would server side code. What I mean by this is the following:

• Keep it organized
• Break things down into smaller reusable functions
• Avoid dependence on global variables please

• Keep your traffic lightweight between client and server

• On the server side make things render quickly and take advantage of caching (nobody likes widgets that take 5 seconds to load or more)