8 years after...

Lot of things have been said since Douglas Crockford's presentation at XML 2006...

Different approaches have been proposed

• Bridges
• Polyglotism
• Serialization
• Consolidation

See my presentation at XML Prague 2013 (presentation, proceedings)

But I had missed something simple and essential

which I'd like to share

Sorry if that was already obvious to you!

JSON and XML is heavy topic

Deserves an heavy sample

By User Jef poskanzer on en.wikipedia (Sears catalog) [Public domain], via Wikimedia Commons

On the one hand

<?xml version="1.0" encoding="UTF-8"?>
<anvil reference="acme-5103">
    <weight unit="pound">9.5</weight>
    <composition>best wrought iron</composition>
    <price currency="USD">.15</price>
</anvil>

On the other hand

[
  "anvil": {
    "reference": "acme-5103",
    "weight": {
      "unit": "pound",
      "value": 9.5
    },
    "composition": "best wrought iron",
    "price": {
      "currency": "USD",
      "value": .15
    }
  }
]

They describe the same object

By User Jef poskanzer on en.wikipedia (Sears catalog) [Public domain], via Wikimedia Commons

They look similar

Because they describe the same object

By User Jef poskanzer on en.wikipedia (Sears catalog) [Public domain], via Wikimedia Commons

Back to JSON

[
  "anvil": {
    "reference": "acme-5103",
    "weight": {
      "unit": "pound",
      "value": 9.5
    },
    "composition": "best wrought iron",
    "price": {
      "currency": "USD",
      "value": .15
    }
  }
]

JSON content

• A map
  • reference -> string "acme-5103"
  • weight -> a map
    • unit -> string "pound"
    • value -> number 9.5
  • composition -> string "best wrought iron"
  • price -> a map
    • currency -> string "USD"
    • value -> number .15

JSON diagram

Back to XML

<?xml version="1.0" encoding="UTF-8"?>
<anvil reference="acme-5103">
    <weight unit="pound">9.5</weight>
    <composition>best wrought iron</composition>
    <price currency="USD">.15</price>
</anvil>

XML content

• an element "anvil"
  • an attribute "reference" -> "acme-5103"
  • an element "weight"
    • an attribute "unit" -> pound"
    • a text node -> "9.5"
  • an element "composition"
    • a text node -> "best wrought iron"
  • an element "price"
    • an attribute "currency" -> "USD"
    • a text node -> ".15"

Simplified XDM

XML diagram

The fat

JSON Generic data serialization format

XML Document oriented serialization format

JSON & XML are not on the same level

Comparing JSON and XML is like comparing:

• Assembly languages and C
• JavaScript and XForms
• RDF and Topic Maps

JSON being lower level than XML

The sensible thing to do is to use JSON to express XML...

XML as JSON

[{
    "name": "anvil",
    "attributes": {"reference": "acme-5103"},
    "children": [
        {
            "name": "weight",
            "attributes": {"unit": "pound"},
            "children": ["9.5"]
        },
        {
            "name": "composition",
            "attributes": {},
            "children": ["best wrought iron"]
        },
        {
            "name": "price",
            "attributes": {"currency": "USD"},
            "children": [".15"]
        }
    ]
}]

Mixed content

[<p>I can support <a href="http://en.wikipedia.org/wiki/PCDATA"><b>mixed</b> content</a>!</p>]

[{
    "name": "p",
    "attributes": {},
    "children": [
        "I can support ",
        {
            "name": "a",
            "attributes": {"href": "http://en.wikipedia.org/wiki/PCDATA"},
            "children": [
                {
                    "name": "b",
                    "attributes": {},
                    "children": ["mixed"]
                },
                " content"
            ]
        },
        "!"
    ]
}]

So what?

JSON can serialize XML nicely

Not the end of the world

Other approaches have their own use cases

What can we do with that?

Use JSON tools to manipulate XML

Selecting attributes

anvil.attributes["reference"]

Or (when possible):

anvil.attributes.reference

Selecting elements

elt=function(name){return function(o) {return o.name==name}};
Object.prototype.elt = function(name){return this.filter(elt(name))}

And:

anvil.children.elt('price')[0].attributes.currency

With a JSON query library

Assuming

js=JSONSelect.match

We can write:

js('.reference', anvil)

Or (safer):

js(':root > .attributes > .reference', anvil)

Other use cases and prior work

A Such a simple idea can't be new!

html2json

Very similar to what we've seen.

See html2json on GitHub

html2json principles

• name -> tag
• attributes -> attr
• children --> child

JsonML

The purpose of JsonML is to provide a compact format for transporting XML-based markup as JSON which allows it to be losslessly converted back to its original form.

--JsonML.org

JsonML principles

• Element = array
• First item = name
• Second (optional) item = map of attributes
• Third and next items = children

JsonML sample

[
    "anvil",
    {"reference": "acme-5103"},
    [
        "weight",
        {"unit": "pound"},
        "9.5"
    ],
    [
        "composition",
        "best wrought iron"
    ],
    [
        "price",
        {"currency": "USD"},
        ".15"
    ],
]

fastFrag

A purely client-side JavaScript template powered by JSON and returning valid Document Fragments for DOM insertion.

--fastFrag on GitHub

fastFrag principles

• Name is optional. Called type it defaults to "div".
• Most common attributes (id, css, ...) have been "promoted" as keys elements objects (not in the attributes map).
• "attributes" key can also be spelled "attrs" or "attr".
• A "text" key is a shortcut for text only elements

fastFrag sample

[{
    "attrs": {"reference": "acme-5103"},
    "content": [
        {
            "attrs": {"unit": "pound"},
            "content": {"text": "9.5"},
            "type": "weight"
        },
        {
            "content": {"text": "best wrought iron"},
            "type": "composition"
        },
        {
            "attrs": {"currency": "USD"},
            "content": {"text": ".15"},
            "type": "price"
        }
    ],
    "type": "anvil"
}

Toward standard JSON serializations for XDM subsets?

• Nice way to visualise the XDM
• Foundation for JS implementations?

Don't look at

Look at

Conclusion