Do it the GWT way

Back to the time when I was developing website with Asp.NET & jQuery, one of my favorite way is to generate as much HTML as possible on serverside. On client, I will use jQuery CSS Selector to bind these HTML back to some kind of encapsulated object (For example: I will generate a HTML for a Product on server and then use jQuery CSS Selector to build a Javascript Product object from these HTML).

Things worked pretty well back to that time. User will quickly see the page without waiting for javascript to be loaded. And when javascript is loaded, I can take control over existing HTML Element. And well, I save one round trip to query products from server and render them using javascript. Quite some benefit, though.

When I adopt GWT, this way is still strong wired to me. Since GWT does not provide a CSS Selector, I turn to GWTQuery for a help. Things goes pretty well until...

Assume that I have 2 products. For each product, I would have a div to display them. In each div, I would have some anchor, some label, span. In order to manipulate these element easily, I assign each element with some id. Problems is, the page will now have many element with the same id. However, they are in separated panels, so it shouldn't matter, should it? Well, indeed, it does matter, as GWTQuery no longer be able to serve that purpose: If I use the same selector (like input#email) over two distinct base HTML Element (2 different divs) then it will result in the same element (at least on the most popular browser Firefox).

After two days of frustrating trial and errors over debugger, I found GWTQuery unusable for this purpose and well, I were stuck...

However, things shine quickly. Few hours after that, I try to figure out the GWT way to do that, and I found UIBinder. Although UIBinder cannot server my purpose (not a replacement to GWTQuery, and I'm not going to save any round trip since my client code will now query for products itself), it does open my eyes to a new way of web UI development: the GWT way.

Using UIBinder, my HTML Template will be easily wired to an existing class (using @UiField annotation), so I don't need any CSS Selector any more and still be able to manipulate the DOM like a charm.

Hmm, there're some problems left with GWT though. Gotta solve it.