Stephen M. McKamey, 2008-08-03

JsonML + Browser-Side Templating (JBST)

Architectural Goals:

All of these goals have been met with JBST.

High-Level Usage Overview

  1. At design-time, a *.jbst template is laid out in plain HTML with inline <% … %> code blocks for data binding.
    See an example *.jbst template.
  2. At build-time, this template is compiled into valid JavaScript.
    See an example pre-compiled template.
  3. At runtime, this template is requested by the browser using a <script src="…" /> tag.
    This template is requested only once and will be cached by the browser.
  4. At runtime, requests for raw JSON data are made which constitute the data to be bound to the template.
  5. At runtime, any combination of templates may be bound (and re-bound) to this same data without needing to request the template(s) or the data over again.
  6. At runtime, binding occurs by combining a UI template with JSON data to produce JsonML which is then built and inserted into the document.

Model-View-Controller (MVC) Pattern

To make an analogy to a familiar concept, this roughly follows the "Model-View-Controller" (MVP) pattern. The JSON data ("Model") is completely separate from the UI template ("View") until the point at which the webpage ("Controller") combines them. Behavioral events in the UI cause the Controller to affect either the Model or the View (or both) and update the display.


The combination of separation of concern and leveraging existing standards produces a number of benefits, such as:

Implementation Notes

JBST Example

To see it in action, play with the live JBST Example.


The run-time client scripts and a command line implementation of the template compiler are available below.

JBST template data-binding script:
Template Data Binder: jsonml-jbst.js
(10.76K uncompressed, 1.06K compact/GZip)
JsonML UI builder script:
UI Builder: jsonml-html.js
(15.78K uncompressed, 1.94K compact/GZip)
An online JsonML + Browser-Side Template compiler: lets you design without any server components.
An open source JsonML + Browser-Side Template compiler:
JsonFx.NET for ASP.NET 2.0+
Open source license