JsonML

JSON Markup Language

Internet media type	application/jsonml+json (unofficial)
Type of format	Markup language and Web template system
Extended from	XML, JSON and JavaScript

The JSON Markup Language (JsonML) is a lightweight markup language used to map between XML and JSON (JavaScript Object Notation). It converts an XML document or fragment into a JSON data structure for ease of use within JavaScript environments such as a web browser, allowing manipulation of XML data without the overhead of an XML parser.

JsonML has greatest applicability in Ajax web applications. It is used to transport XHTML down to the client where it can be deterministically reconstructed into DOM elements. Progressive enhancement strategy can be employed during construction to bind dynamic behaviors to otherwise static elements.

JsonML can also be used as the underlying structure for creating intricate client-side templates: JBST (JsonML+Browser-Side Templates). Syntactically JBST looks like JSP or ASP.NET UserControls. See [1] for an interactive example.

Syntax

There are two forms of JsonML: the Array Form and the Object Form. The Array Form is the original form and allows any XML document to be represented uniquely as a JSON string, whereas the Object Form in effect assumes that there are no XML tags named tagName or childNodes.

JsonML Array Form uses JSON Arrays to represent XML elements, JSON Objects to represent attributes, and JSON Strings to represent Text nodes. Conversion from XML to JsonML is fully reversible. XML Namespaces are handled by prepending the element name with the namespace prefix (e.g. <myns:myElement/> becomes ["myns:myElement"]).

<!-- XML representation of a person record -->
<person created="2006-11-11T19:23" modified="2006-12-31T23:59">
    <firstName>Robert</firstName>
    <lastName>Smith</lastName>
    <address type="home">
        <street>12345 Sixth Ave</street>
        <city>Anytown</city>
        <state>CA</state>
        <postalCode>98765-4321</postalCode>
    </address>
</person>

The JsonML Array Form representation of this person record is:

["person",
  {"created":"2006-11-11T19:23",
   "modified":"2006-12-31T23:59"},
  ["firstName", "Robert"],
  ["lastName", "Smith"],
  ["address", {"type":"home"},
    ["street", "12345 Sixth Ave"],
    ["city", "Anytown"],
    ["state", "CA"],
    ["postalCode", "98765-4321"]
  ]
]

JsonML Object Form uses JSON Objects to represent XML elements and their attributes, and JSON Arrays to represent child node lists.

The JsonML Object Form representation of the person record is:

{"tagName": "person", 
 "created": "2006-11-11T19:23",
 "modified": "2006-12-31T23:59",
 "childNodes": [
    {"tagName": "firstName", "childNodes" : ["Robert"]},
    {"tagName": "lastName", "childNodes" : ["Smith"]},
    {"tagName": "address", "type":"home", "childNodes" : [
        {"tagName": "street", "childNodes" : ["12345 Sixth Ave"]},
        {"tagName": "city", "childNodes" : ["Anytown"]},
        {"tagName": "state", "childNodes" : ["CA"]},
        {"tagName": "postalCode", "childNodes" : ["98765-4321"]},
    ]}
 ]}

The JSON Data Transformation produces a more compact representation but loses some of the document structural information:

{"person": {
    "address": {
        "city": "Anytown",
        "postalCode": "98765-4321",
        "state": "CA",
        "street": "12345 Sixth Ave",
        "type": "home"
    },
    "created": "2006-11-11T19:23",
    "firstName": "Robert",
    "lastName": "Smith",
    "modified": "2006-12-31T23:59"
}}

XML/XSLT

XSLT and XML can produce client-side templating as well, and both allow caching of the template separate from the data. For many, however, the syntax of JBST is much easier to manage, due to its familiarity. JBST uses JavaScript natively in the template rather than requiring a mixing of a different type of control language.

innerHTML

While seemingly used to perform similar tasks, JsonML and innerHTML are quite different.

innerHTML requires you to have all the markup exactly as you want it ready to go, meaning that either the server is rendering the markup, or you are performing expensive string concatenations in JavaScript.

JsonML opens the door to client-side templating through JBST which means that your template is converted from HTML markup into a JavaScript template at build time. At runtime, you simply supply the data and you end up with DOM elements to be inserted or to replace an existing element (something innerHTML cannot easily do without extra DOM creation). Rebinding only requires requesting additional data, not the entire re-rendered markup. This is where large performance gains can be made as the markup can be nicely requested/cached separately from the data.

HTML Message Pattern / Browser-Side Templating

For simplicity, innerHTML has been the preferred method for the HTML-Message pattern style of Ajax. However, tools like JsonFx aim to simplify JsonML and JBST implementation while still providing a full browser-side templating Ajax pattern.

External links

• JsonML.org
• IBM developerWorks Article
• Java JSONML implementation - written by Douglas Crockford
• C#/.NET JBST Framework