Israel Shirk
Right now: Mad scientist, Ultra Runner, Backcountry
Skier, Performance Architect @ Scentsy (starting
Monday), CTO @ Zerrtech, and a bunch of other stuff

Ok, it’s really “New approaches to hypertext and REST in
a mobile-first world

Old internet: Homogeneity (except you-know-who)

New internet:
Shimmable homogeneity on the browser
Tablets!
Phones!
Desktop Applications!
Web Applications!
Embedded Devices!

Background:
What is “hypertext”?

Background:
What is “hypertext”?
Google:
“A software system that links topics on the screen to related
information and graphics, which are typically accessed by a
point-and-click method”

Background:
What is “REST”?

Background:
What is “REST”?
Martin Fowler:
Level 0 to Level 4

it: https://martinfowler.com/articles/richardsonMaturityModel.html

POX: Plain Old Xml (or JSON)
(Yeah, I’m saying your REST API ain’t REST)

Skip a few: Rest Level 3
Hypermedia Controls

Skip a few: Rest Level 3
Hypermedia Controls
(HATEOAS)

HATEOAS:
I hate operating systems?

HATEOAS:
Hypertext As The Engine Of Application State
Great example: HTML w/o JS.

New world order:
HTML does not always translate across devices
the way we want it to!
(dangit)

Solutions?
REST L4 in other forms,
interpreted on device
(like… a compat layer in-browser,
NativeScript, Electron, React Native, …)

Solution I’m using right now?
JSON Hyperschema (with nonstandard extensions)
Alternatives?
VND is most popular, others are out there but rarer

Why JSON Hyperschema?
It’s made for this problem: self-describing APIs
and objects.

Example:
{
"$schema": “http://json-schema.org/schema#",
“type”: “person”,
“X-name”: “Israel”,
“links”: [
{
“rel”: “profile”,
“href”: “https://www.facebook.com/israelshirk"
},
{
“rel”: “hubgit”
“href": “https://github.com/israelshirk"
}
]
}

Declare as JSON schema:
{
"$schema": “http://json-schema.org/schema#",
“type”: “person”,
“X-name”: “Israel”,
“links”: [
{
“rel”: “profile”,
“href”: “https://www.facebook.com/israelshirk"
},
{
“rel”: “hubgit”
“href": “https://github.com/israelshirk"
}
]
}

Define type of object
(technically the RFC doesn’t allow this but…
Open source to the rescue!)
{
"$schema": “http://json-schema.org/schema#",
“type”: “person”,
“X-name”: “Israel”,
“links”: [
{
“rel”: “profile”,
“href”: “https://www.facebook.com/israelshirk"
},
{
“rel”: “hubgit”
“href": “https://github.com/israelshirk"
}
]
}

Custom extensions start with X- to be mostly in-line with standard
{
"$schema": “http://json-schema.org/schema#",
“type”: “person”,
“X-name”: “Israel”,
“links”: [
{
“rel”: “profile”,
“href”: “https://www.facebook.com/israelshirk"
},
{
“rel”: “hubgit”
“href": “https://github.com/israelshirk"
}
]
}

Links to indicate paths that can be followed
{
"$schema": “http://json-schema.org/schema#",
“type”: “person”,
“X-name”: “Israel”,
“links”: [
{
“rel”: “profile”,
“href”: “https://www.facebook.com/israelshirk"
},
{
“rel”: “hubgit”
“href": “https://github.com/israelshirk"
}
]
}
http://json-schema.org/latest/json-schema-hypermedia.html#rfc.section.5

We can then start doing really fancy stuff:
{
"$schema": “http://json-schema.org/schema#",
“type”: “person”,
“X-name”: “Israel”,
“X-profile-name”: “israelshirk”,
“X-Friends”: { “$ref”: “/{profile}/friendlist” },
“links”: [
{
“rel”: “profile”,
“href”: “https://www.facebook.com/{profile}"
},
{
“rel”: “hubgit”,
“href": “https://github.com/{profile}"
},
{
“rel”: “save”,
“href”: “/{profile}”
}
]
}

Critical factors:
Easy-to-use interpreters.
Check out:
Mozilla’s React-Jsonschema-Form (I’m a rabble-rouser there)
Angular-Schema-Form (schemaform.io - just a bug fixer here)
JS lib for JSON hyper schema validation. I have a fork…. Somew
Then: Custom components for your object types!
Webcomponents are essential here.

eact-Jsonschema-Form: https://github.com/mozilla-services/react-
function PageLayout(props) {
const {children, schema} = props;
return (
<div class=“root”>
<!— This is the root page element. Children of the schema go into children below! —>
{children}
</div>
);
}
render((
<Form schema={schema}
fields={ { “page-layout”: PageLayout } } />,
), document.getElementById("app"));

eact-Jsonschema-Form: https://github.com/mozilla-services/react-
function PageLayout(props) {
const {children, schema} = props;
return (
<div class=“root”>
<!— This is the root page element. Children of the schema go into children below! —>
<div className=“col-xs-12”> <Form schema={schema[‘X-header’]} fields={fields} >
</div>
);
}
let fields = { PageLayout: PageLayout }
render((
<Form schema={schema}
fields={ fields } />,
), document.getElementById("app"));

u can do things like this, and each client will have an appropriate r
laid out differently by device type - but all from the same backend
{
“type”: “page-layout”,
“properties”: {
“header”: {
“type”: “array”,
“items”: [
{ “type”: “header-item”, “title”: “Click me!”, “links”:
[{ “link”: “/clickme” }]
}
],
},
“body”: {
“type”: “person”,
…
}
}
}

End result?
Data-centric wonderfulness server-side,
render-centric focus client-side!
Next steps?
Integration into nginx+lua+memcache for ref resolution,
like Varnish/Akamai for ESI
Add more gif (spoken as spelled)
Public code samples