Berkeley Bits

April 6, 2008

JSON-based UI Templating

Filed under: What I'm Up To — jholtzman @ 7:02 am

I think I’ve come up with an interesting approach to building a UI, and I’d like some honest feedback. I’m in that geeky “I just built the greatest thing in the world” state, and I’d benefit from a reality check.

Here’s how it works:

1) On the server side, you make your service calls and marshall the objects that the UI needs into JSON strings. Stick those strings into the request, and consume them in the JSP/templating language, or whatever. Nothing new here, other than the fact that you’re sending JSON strings rather than java objects.
2) In the JSP, you consume those JSON strings *once*, at the top of the section of the DOM. Here’s an example:

$(document).ready(function(){
var eventAsJson = (function () {
return eval(’${eventAsJson}’);
})();

Note that ${eventAsJson} is the only JSP-ism on the page, and this could be easily replaced with a real JSON string (provided by a developer). See where I’m going with this yet?

3) Build the dynamic parts of the page in JavaScript using jQuery. For example:

var eventTitle=eventAsJson.title;
$(’#title’).html(eventTitle);

<h3 id=”title”>The Event Title</h3>

4) What you have now is a 99% generic html template, and with a tiny bit of effort, you can do all of the UI development you like without ever touching the server side.

What do folks think? Feasible?

Powered by WordPress