READY.
LOAD HYPERDUNGEON










HI



James Pozenel

Senior Software Engineer

QLMS

Quicken Loans

@lectrotext @LunchBusDetroit

HyperMedia 

as The Engine 

of Application 

state

(HATEOAS)


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 ConklinA 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").

FIn


30HyperMedia

By lectrotext

30HyperMedia

  • 334
Loading comments...

More from lectrotext