Example Transformation

JsonML allows any XML document to be represented uniquely as a JSON string. The syntax uses:

• JSON arrays to represent XML elements;
• JSON objects to represent attributes;
• JSON strings to represent text nodes.

["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"]
  ]
]

<!-- 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>

A “regular” JSON transformation produces a more compact representation, but loses some of the document structural information, in that it does not define whether a key-value pair is an attribute or a node:

{"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"
}}

"Object Form" Misnomer

In a JSON user group thread, Douglas Crockford incorrectly used the term "JsonML" to describe two variants: the "array form" and "object form".^[3] This was a misuse of the term JsonML which has always stood to mean what Crockford referred to as the "array form".^[4]

XML/XSLT

XML and XSLT (Extensible Stylesheet Language Transformations) can also produce client-side templating, and both allow caching of the template separate from the data. JBST uses JavaScript natively in the template, rather than requiring mixing of different types of control language.

InnerHTML

While seemingly used to perform similar tasks, JsonML and innerHTML are quite different. InnerHTML requires all the markup in an exact form, meaning that either the server is rendering the markup, or the programmer is performing expensive string concatenations in JavaScript.

JsonML uses client-side templating through JBST, which means that HTML is converted into a JavaScript template at build time. At run time, the data is supplied and DOM elements are the result. The resulting DOM elements can be inserted or replace an existing element, which innerHTML cannot easily do without creating excess DOM elements. Rebinding only requires requesting additional data, which is smaller than fully expanded markup. As a result, large performance gains are often made, since the markup is requested or cached separately from the data.

HTML message pattern/Browser-side templating

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