30HyperMedia

Richardson Maturity
model

0. Swamp of Pox (RPC)

1. Resources

2. HTTP

3. HATEOAS

READY.
Load HYPERDungeon

You are standing in an open field west of a white house, with a boarded front door.
There is a small mailbox here.
>

REST WITHOUT HATEOAS

Level 1

 {
     "id": 1,
     "room": "You are standing in an open field west of a white house, with a boarded front door. There is a small mailbox here."

 }

LEVEL 2

request

GET http://hyperdungeon.com/rooms/1

response

Header: Status: 200 (OK)
Body:

 {    
     "id": 1,
     "room": "You are standing in an open field west of a white house, with a boarded front door. There is a small mailbox here."

 }

Kick back, bromide.

NOW WHAT?

Hack at it?

Consult the documentation?

HyperWTF?

Definitions

Ted Nelson, Complex Information Processing:

A File Structure for the Complex,

the Changing, and the Indeterminate (1965)

Jeffery Conklin, A Survey of Hypertext (1995)

Hypermedia is the web

Web Browser

HTML State Machine

States
Current State
Transitions

Links

state Transition

changes the view

side-effect free

FORMs

STATE TRANSITION

changes a resource

side-effect inducing

Everything else enriches

the state by embedding extra information.

HTML is the Cornerstone

1989 - proposed by Tim Berners-Lee

1995 - developed as a standard

Informs all modern hypermedia.

Attributes

<a>

download

href

hreflang

media

name

rel

target

type

<form>

accept-type
action
autocomplete
enctype
method
name
novalidate
target

Inheritance

<html>

accesskey

class

contenteditable

contextmenu

data-

dir

draggable

dropzone

hidden

id

lang

spellcheck

style

tabindex

title

translate

But wait there's more

RFC's
Iana

INFormation

Resource

Meta Information

Hypermedia is defined by the presence of

application control information embedded within,

or as a layer above, the presentation of

information. - R. Fielding

HyperMedia Resource

Data + Metadata

RelationshipS Matter

Guideposts

Machines can follow links when they

understand the data format and relationship types

Relationship BASICS

{
    "id": 5,
    "name": "brown sack",
    "description": "An elongated brown sack, smelling of hot peppers."
    "type": "container",
    "moveable": true,
    "state": "closed",
    "links": [
         "self": {
            "href":"http://hyperdungeon.com/items/5"
            "title": "brown sack"
         },
         "index": {
            "href":"http://hyperdungeon.com/items"
            "title": "items"
         }
     ]
}

Self and Index are universal to any Resource

Leverage Existing
Rel Types

W3C.REC-html401-19991224

W3C.REC-html5-20141028

RFC 5988

RFC 4287

RFC 4685

RFC 4946

RFC 5005

RFC 5023

RFC 5829

API's Outgrow
Existing Definitions

Very Quickly

Get Descriptive

define media type(s) used for resources

drive application state

define/extend relation names

Application State

State?

"The user progresses through the application by selecting

links ( state transitions ), resulting in the next page

( representing the next state of the application ) being

transferred to the user and rendered." -- R. Fielding

MechanicAL

Levels 1 & 2 more concerned

how
what
who

You are in an open field west of a big white house with a boarded front door.
There is a small mailbox here.

> open mailbox

Opening the mailbox reveals:
A leaflet.

> look

You are in an open field west of a big white house with a boarded front door.
There is a small mailbox here.
The mailbox contains:
A leaflet.

HATEOAS in ACtion

POST http://hyperdungeon.com/items/1

 {
    "action":"open"
 }

200 OK

GET http://hyperdungeon.com/items/1

 {
    "id": 1,
    "name": "small mailbox",
    "type": "container",
    "moveable": false,
    "state": "open",
    "links": [
        "contents": { "href":"http://hyperdungeon.com/items/2",...
    ] }

Awareness

HATEOAS is more concerned with:

why
when

Have Message, Will Consume

Generic Hypermedia
Media Types

Siren
HAL
Collection+JSON
MASON
Hydra (JSON-LD)
JSON-API

Provides Structure

Resource Wrapper
Link Formatting
Expressing Relationships
Actions (AKA Forms)
Hinting

re-Usability

GO DIY

vnd.company.app-version+json

Seriously.

Write it.

Publish it.

Throw your specification on the pile.

Caveats

No Versioning

Are Your
Users Ready?

Caching

Do you Really

Need a Hypermedia

API?

Wild West

Upsurge in attention over the past 2+ years.

Change will be constant.

Media Types are going to die.

HATEOAS

API is a State Machine

Resources are States

Links are State Transitions

All Transitions are Included with States

Engine

HATEOAS is a collection of web

based technologies and strategies for easy

viewing and manipulating of data objects.

Hyperlinks control (drive) the web application

UX for api's

Presenting a familiar, interconnected, and

explorable experience for the developer

(aka - "The User").

HI

HyperMedia

as The Engine

of Application

state

(HATEOAS)

Richardson Maturitymodel

READY. Load HYPERDungeon You are standing in an open field west of a white house, with a boarded front door. There is a small mailbox here. >