Separating presentation and data in applications an accepted design practice, but somehow it is not as common in-browser apps as it is on the server side.
Here's an architecture of a dynamic web app that works well for me:
- an app server exposes JSON and no HTML. (eg django or rails)
- html/css/js is completely static (eg. on S3/CDN) and defines UI as a set of HTML templates.
- once html/js is loaded in the browser, the browser makes an AJAX call to the server to get the JSON data
- in-browser JS expands a template, the data is rendered out
Clean, but what are you supposed to do with user agents which do not support JavaScript? Server-side templates still let you customize the page in that case.
Right, in this case client-side templating just moves to the server.
When JS processing isn't available on the client side, this same stack is moved to the server side. This way the same logical separation between UI and data is maintained.
Here's an architecture of a dynamic web app that works well for me:
- an app server exposes JSON and no HTML. (eg django or rails)
- html/css/js is completely static (eg. on S3/CDN) and defines UI as a set of HTML templates.
- once html/js is loaded in the browser, the browser makes an AJAX call to the server to get the JSON data
- in-browser JS expands a template, the data is rendered out
In this architecture, http://code.google.com/p/google-jstemplate/ is key. Check it out.