![Page 1: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/1.jpg)
Israel ShirkRight now: Mad scientist, Ultra Runner,
Backcountry Skier, Performance Architect @ Scentsy (starting Monday), CTO @ Zerrtech, and a
bunch of other stuff
![Page 2: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/2.jpg)
Ok, it’s really “New approaches to hypertext and REST in a mobile-first world
![Page 3: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/3.jpg)
Old internet: Homogeneity (except you-know-who)
![Page 4: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/4.jpg)
New internet: Shimmable homogeneity on the browser
Tablets!Phones!
Desktop Applications!Web Applications!
Embedded Devices!
![Page 5: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/5.jpg)
Background:What is “hypertext”?
![Page 6: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/6.jpg)
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”
![Page 7: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/7.jpg)
Background:What is “REST”?
![Page 8: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/8.jpg)
Background:What is “REST”?
Martin Fowler:Level 0 to Level 4
![Page 9: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/9.jpg)
Credit: https://martinfowler.com/articles/richardsonMaturityModel.html
![Page 10: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/10.jpg)
POX: Plain Old Xml (or JSON)
(Yeah, I’m saying your REST API ain’t REST)
![Page 11: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/11.jpg)
Skip a few: Rest Level 3Hypermedia Controls
![Page 12: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/12.jpg)
Skip a few: Rest Level 3Hypermedia Controls
(HATEOAS)
![Page 13: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/13.jpg)
HATEOAS:I hate operating
systems?
![Page 14: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/14.jpg)
HATEOAS:Hypertext As The Engine Of Application
State
Great example: HTML w/o JS.
![Page 15: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/15.jpg)
New world order:HTML does not always translate across
devicesthe way we want it to!
(dangit)
![Page 16: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/16.jpg)
Solutions?REST L4 in other forms,interpreted on device
(like… a compat layer in-browser,NativeScript, Electron, React Native,
…)
![Page 17: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/17.jpg)
Solution I’m using right now?JSON Hyperschema (with nonstandard
extensions)
Alternatives?VND is most popular, others are out there but
rarer
![Page 18: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/18.jpg)
Why JSON Hyperschema?
It’s made for this problem: self-describing APIs
and objects.
![Page 19: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/19.jpg)
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"
}]
}
![Page 20: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/20.jpg)
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"
}]
}
![Page 21: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/21.jpg)
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"
}]
}
![Page 22: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/22.jpg)
Custom extensions start with X- to be mostly in-line with standards
{"$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"
}]
}
![Page 23: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/23.jpg)
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
![Page 24: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/24.jpg)
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}”
}]
}
![Page 25: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/25.jpg)
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)
tv4 - great little JS lib for JSON hyper schema validation. I have a fork…. Somewhere. Email me.
Then: Custom components for your object types!Webcomponents are essential here.
![Page 26: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/26.jpg)
For example, creating your own type in React-Jsonschema-Form: https://github.com/mozilla-services/react-jsonschema-form#advanced-customization
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"));
![Page 27: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/27.jpg)
For example, creating your own type in React-Jsonschema-Form: https://github.com/mozilla-services/react-jsonschema-form#advanced-customization
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"));
![Page 28: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/28.jpg)
Pretty quickly though you can do things like this, and each client will have an appropriate representation of the object,
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”,…
}}
}
![Page 29: New approaches to hypertext and REST in a mobile-first world](https://reader035.vdocuments.site/reader035/viewer/2022070512/5899c6e41a28ab45548b639d/html5/thumbnails/29.jpg)
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