Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

CC By 4.0 This document is published under a CC Attribution 4.0 International license

JSON and XML: a new perspective

Eric van der Vlist ([email protected])

June 2014

XML London 2014
This presentation online

8 years after...

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

Different approaches have been proposed

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

Sears catalog

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

Sears catalog

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

They look similar

Because they describe the same object

Sears catalog

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

JSON diagram

JSON content as UML

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

Simplified XDM

A simplified class diagram of the XDM

XML diagram

XML content as UML

The fat

JSON

JSON content as UML

Generic data serialization format

XML

JSON content as UML

Document oriented serialization format

JSON & XML are not on the same level

Comparing JSON and XML is like comparing:

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

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

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

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?

Don't look at

JSON

XML

Look at

XML

JSON

Conclusion

XML for data considered harmful?
This presentation online
http://vdv.re/xmllondon2014

Use a spacebar or arrow keys to navigate