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:

<script>
  alert("I am <%= user.name %>");
</script>

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

<div id="json"><script>var user = {name: 'foo'};</script></div>
<script>
  alert("I am " + user.name);
</script>

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

select "#json script" do |ele|
  ele.html "var person = " + current_user.to_json   
end

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!

Comments

[Slim Amamou]

Really cool.

[sutch]

Have you found enough interest in hquery to continue to refine the library?

[choonkeat]

@sutch though people seem interested when I presented the idea in meetup before, there's no contribs from other than myself for now.

Personally, I'm vested to refine it further, and am already using this in production (on slideshare.net) !

[vinay]

Hey Choonkeat,

Looks amazing. A lot of prospects for this tool.

I am just wondering where and how did u use hquery in slideshare.net

[choonkeat]

@vinay what I found is that the rhtml/jsp way is just too convenient (esp. when creating new pags) to completely throw away and use hquery across the whole site.

hquery is most effective when you have an existing page, and want to iterate from there on. then you simply 1) grab a copy of the dynamically generated html, 2) use that & migrate to hquery, 3) delete the old views code when done, 4) and work from there on.

I find the end product (.hquery and .html files) more maintainable, esp. as logic piles on.

On slideshare, that was done for the "slideshow viewing page", e.g. http://www.slideshare.net/choonkeat/oauth4-and-oauth4r

[cauna]

На мой взгляд тема весьма интересна. Давайте с Вами пообщаемся в PM.