JsonML + Browser-Side Templating (JBST)

Architectural Goals:

• Create a template system in which databinding occurs on client (browser-side templating pattern) to distribute workload and increase UI flexibiliy.
• Allow definition of templates as HTML markup with ASP/JSP/eRuby style <% … %> inline code blocks to leverage familiar syntax and IDE syntax highlighting.
• Inline code blocks must be pure JavaScript (not some new syntax) to leverage existing skill set.
• Allow nested templates (for lists, tables, trees, etc.) for richer templating flexibility.
• Templates must be machine-generated from the markup to streamline template creation workflow.
• "Pre-Compiled" templates must be expressible as pure JavaScript so fully cache-able and require no runtime parsing.
• Minimize boilerplate code needed by data-binding all in one step.
• Allow simple access to data and meta data (e.g. data item index) from within inline code blocks.

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.

Advantages

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

• Fewer and smaller server round trip requests causes increased perceived performance.
• A client-based solution distributes work load over to user's machine freeing the server to perform other work.
• Separation of model/view improves ability to test UI behavior using mock-objects.
• Use of ordinary JavaScript code blocks improves ability to integrate with other standards such as:
  • JSON-RPC for data services
  • JSONPath / JSONQuery for data querying and manipulation
• Reuse of both template and data reduces the need for logic to maintain application state.
• Improved flexibility of architecture by encouraging encapsulation. Business logic is physically separated onto the server.
• A client-based solution allows compatiblity with a greater number of server-side architectures.
  (All that is required server-side is the build-time template compiler which could even be run manually.)

Implementation Notes

• If the data provided is an array, the template is bound to each item of the array, otherwise the template is directly bound to the data.
• Templates can call other templates allowing arbitrary nesting to produce lists, trees, etc.

JBST Example

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

Download

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:

JBST.net 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