hquery: an unobtrusive server script implementation

I’d previously blogged about some ideas to resolve the developer-designer gulf regarding templates. I’m happy I’ve finally found time to code up a proof-of-concept:

hquery - the unobtrusive server script from choonkeat on Vimeo.
Q: What is “unobtrusive server script”?

If “unobtrusive javascript” adds interaction to a web page without being inside the markup - then “unobtrusive server script” replaces data in a web page without being inside the markup (and design).

You’ll get a clean separation of 1) designed web page is constructed, then 2) server data is weaved in, and finally 3) javascript hooks up the interactive portions.

The key thing is that all 3 layers are stringed together by CSS path - a concept / language that both designers and developers can communicate with.

Q: Is this a silver bullet?

No. There are constraints: everything that needs to be dynamic, need its own CSS/XPath. e.g. Google’s result page markup isn’t very suitable:

  <div>this is abstract<cite>citation</cite></div>

Notice how we can’t address the abstract content without stepping on <cite>. When using USS, we’ll need the markup to be:

  <div><span>this is abstract</span><cite>citation</cite></div>

Then both abstract and citation can be targeted independently. Furthermore, to be totally isolated from markup changes, it is best to only use classes and ids without the tag names.

Q: Is USS a Ruby on Rails thing?

Nope. “hquery” is just a library I wrote to do USS in Rails. I believe any language / framework can have its own USS renderer.

Q: How do I write javascript that needs dynamic values?

Instead of writing mixed-up code like this:

  alert(“I am <%= user.name %>”);

Try doing it this way (separating data from logic):

<div id=”json”><script>var user = {name: ‘foo’};</script></div>
  alert(“I am ” + user.name);

Then in your script, you can swap out the JSON data:

select “#json script” do |ele|
  ele.html “var person = ” + current_user.to_json   

Q: Where next?

I dunno. Since hquery script is declarative, we can compile to regular <% messy %> template as runtime? Or, have build tasks that can check that corresponding HTML contain necessary elements - i.e. a new design don’t break/miss out anything?

Anything else? Love to hear your thoughts!

PS: I find myself trusting Yahoo search results when its in Google skin!