How the Web Evolves with Hypermedia (WHISKYWEB2012 2012-04-13)

HOW THE WEB EVOLVESWITH HYPERMEDIA

http://whiskyweb.co.uk/

http://whiskyweb.co.uk/

David Zuelke

David Zülke

http://en.wikipedia.org/wiki/File:München_Panorama.JPG

http://flic.kr/photos/kevinsteele/230997861/

http://flic.kr/photos/kevinsteele/230997861/

Founder

http://www.bitextender.com/

http://www.bitextender.com/

Lead Developer

http://www.agavi.org/

http://www.agavi.org/

@dzuelke

http://twitter.com/dzuelke


THE WEBThe Internet’s Largest Application

WWW

first data exchange system

planetary scale

why is that possible?

Hyperlinks!

no tight coupling!

Hyperlinks must not have an inverse

loosely coupled by design

embraces failure

HTTP/1.1 404 Not Found

no notification infrastructure

more information != more friction

no limits to scalability

WWW is protocol-centric

THE HUMAN WEBPoint and Click

the Web changes

1997

2011

but humans can adapt

14+ years of search

(and 14+ years of ugly design :p)

THE HUMAN BRAINYou are a State Machine!

bored

want something awesome

laaaaaame... what’s on the next pages?

PROGRESSIVE INTERNATIONAL GMMC-68

✓ Makes something to eat

✓ Cool & evil company name

✓ like “Cyberdyne”

✓ or “Umbrella Corporation”

✓ GMMC-68 sounds like a Terminator model number

http://flic.kr/arpy/3440289156/

GMMC 66 & GMMC 67








awesome!

let’s buy that

let’s model that process

while($david-‐>isBored()&&!$david-‐>isBroke()){ squeeze_pacman_stress_ball(); $amazon = new Browser('http://amazon.com'); while(!$david-‐>getIsHappy()) { switch($amazon-‐>state) { case 'home': { $amazon-‐>search('awesome stuff'); } break; case 'search_result_page': { if(!$amazon-‐>hasSomethingAwesome()) { $amazon-‐>followAwesomeProduct(); } elseif($amazon-‐>hasMorePages()) { $amazon-‐>followNextPage(); } else { sleep(3600); $amazon-‐>state = 'home'; // retry! } } break; case 'product_page': { $amazon-‐>followAddToCart(); } break;

case 'shopping_cart': { $amazon-‐>followCheckout(); } break; case 'login_or_register': { if($david-‐>hasAmazonAccount()) { $amazon-‐>followLogin(); } else { $amazon-‐>followRegister(); } } break; case 'order_summary': { $amazon-‐>followConfirmation(); } break; case 'order_confirmation': { $david-‐>setIsHappy(mt_rand(0,1)); } break; case 'default': { $amazon-‐>state = 'home'; } } }}

AS PSEUDOCODE

that was easy

interactions driven by human intelligence

sometimes idiots drive the interaction

Humans can adapt to changes and new things

THE MACHINE WEBCan Computers Do This?

CAN WE TEACH A COMPUTER TO...

• ... discover workflows the server offers?

• ... follow links to a “next page” until the right product is found?

• ... leniently handle...

• ... changes in organization of resources?

• ... newly added information or operations?

yes

it’s called REST

unfortunately

people fuck it up all the time

they’re like

I haz REST nao

boss is happy

VCs give money

it’s like the insane cloud hype

THE MACHINE BRAINHypermedia to the Rescue

Hypermedia As The Engine Of Application State

it’s the part people always miss

I am getting frustrated by the number of people calling any HTTP-based interface a REST API [...]If the engine of application state (and hence the API) is not being driven by hypertext, then it cannot be RESTful and cannot be a REST API.

His Royness Fielding

http://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven

http://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven

RPC/SOAP

out-of-band knowledge drives interaction

“you must call init() before execute()”

HATEOAS

hypermedia type has defined semantics

clients follow links with known relations

just like humans!

<?xml version="1.0" encoding="utf-‐8" standalone="yes"?><search> <total_results>9</total_results> <items_per_page>1</items_per_page> <start_index>1</start_index> <link href="http://openapi.lovefilm.com/catalog/games?start_index=1&items_per_page=1&term=old" rel="self" title="self"/> <link href="http://openapi.lovefilm.com/catalog/games?start_index=2&items_per_page=1&term=old" rel="next" title="next"/> <link href="http://openapi.lovefilm.com/catalog/games?start_index=9&items_per_page=1&term=old" rel="last" title="last"/> <catalog_title> <can_rent>true</can_rent> <release_date>2003-‐09-‐12</release_date> <title full="Star Wars: Knights of the Old Republic" clean="Star Wars: Knights of the Old Republic"/> <id>http://openapi.lovefilm.com/catalog/title/59643</id> <adult>false</adult> <number_of_ratings>574</number_of_ratings> <rating>4</rating> <category scheme="http://openapi.lovefilm.com/categories/catalog" term="games"/> <category scheme="http://openapi.lovefilm.com/categories/format" term="Xbox"/> <category scheme="http://openapi.lovefilm.com/categories/genres" term="Adventure"/> <category scheme="http://openapi.lovefilm.com/categories/genres" term="Role-‐playing"/> <category scheme="http://openapi.lovefilm.com/categories/certificates/bbfc" term="TBC"/> <link href="http://openapi.lovefilm.com/catalog/title/59643/synopsis" rel="http://schemas.lovefilm.com/synopsis" title="synopsis"/> <link href="http://openapi.lovefilm.com/catalog/title/59643/reviews" rel="http://schemas.lovefilm.com/reviews" title="reviews"/> <link href="http://www.lovefilm.com/product/59643-‐Star-‐Wars-‐Knights-‐of-‐the-‐Old-‐Republic.html?cid=LFAPI" rel="alternate" title="web page"/> </catalog_title></search>

HTTP’s Uniform Interface is generic

GET /products/1234 HTTP/1.1Host: evilshop.comAccept: application/vnd.com.evilshop+xml

HTTP/1.1 200 OKContent-‐Type: application/vnd.com.evilshop+xml; charset=utf-‐8Allow: GET, PUT, DELETE

<?xml version="1.0" encoding="utf-‐8"?><product xmlns="urn:com.evilshop.prod" xmlns:atom="http://www.w3.org/2005/Atom"> <id>1234</id> <name>Shark with Friggin’ Laser Beams Attached to its Head</name> <price currency="EUR">3.14</price> <atom:link rel="category" type="application/vnd.com.evilshop+xml" href="http://evilshop.com/categories/lasers"/></product>

PUT /products/1234 HTTP/1.1Host: evilshop.comContent-‐Type: application/vnd.com.evilshop+xml


HTTP/1.1 204 No ContentContent-‐Type: application/vnd.com.evilshop+xml; charset=utf-‐8Allow: GET, PUT, DELETE

EVOLVABILITY(Creationists Better Leave Now)

OO style or RPC style

clients bound to object graph or procedures

SOAP

breaks all the clients, all the time

expect the unexpected

<?xml version="1.0" encoding="utf-‐8"?><products xmlns="http://acme.com/shop/products"> <product id="123"> <name>Bacon</name> <price>5.99</price> </product></products>

<?xml version="1.0" encoding="utf-‐8"?><products xmlns="http://acme.com/shop/products"> <product id="123"> <name>Bacon</name> <price>5.99</price> OMNOMNOM Bacon </product></products>

<?xml version="1.0" encoding="utf-‐8"?><products xmlns="http://acme.com/shop/products"> <product id="123"> <name>Bacon</name> <price>5.99</price> <price currency="EUR">4.49</price> </product></products>

<?xml version="1.0" encoding="utf-‐8"?><products xmlns="http://acme.com/shop/products"> <product id="123"> <name xml:lang="en">Bacon</name> <name xml:lang="de">Speck</name> <price>5.99</price> </product></products>

<?xml version="1.0" encoding="utf-‐8"?><products xmlns="http://acme.com/shop/products"> <product id="123"> <name xml:lang="en">Bacon</name> <name xml:lang="de">Speck</name> <price>5.99</price> <link rel="category" href="..." /> </product></products>

and break only if you have to






<?xml version="1.0" encoding="utf-‐8"?><product xmlns="urn:com.evilshop.prod" xmlns:atom="http://www.w3.org/2005/Atom"> <id>1234</id> <name>Shark with Friggin’ Laser Beams Attached to its Head</name> <price currency="EUR">3.14</price> <description>Does it need one? :)</description> <atom:link rel="category" type="application/vnd.com.evilshop+xml" href="http://evilshop.com/categories/lasers"/></product>

new field, not critical

(sharks go out of stock...)


HTTP/1.1 404 Not FoundContent-‐Type: application/vnd.com.evilshop+xml; charset=utf-‐8Allow: GET, PUT, DELETE

“let’s remove the 404 and send an availability field”

BC break, existing clients don’t know the field!

Solution: a new Media Type version

GET /products/1234 HTTP/1.1Host: evilshop.comAccept: application/vnd.com.evilshop.2+xml,application/vnd.com.evilshop+xml;q=0.5

HTTP/1.1 200 OKContent-‐Type: application/vnd.com.evilshop.2+xml; charset=utf-‐8Allow: GET, PUT, DELETE

<?xml version="1.0" encoding="utf-‐8"?><product xmlns="urn:com.evilshop.prod" xmlns:atom="http://www.w3.org/2005/Atom"> <id>1234</id> <available>false</available> <name>Shark with Friggin’ Laser Beams Attached to its Head</name> <price currency="EUR">3.14</price> <atom:link rel="category" type="application/vnd.com.evilshop+xml" href="http://evilshop.com/categories/lasers"/></product>

with this and HATEOAS, clients become unbreakable

and the Web evolveswith Hypermedia

!e End

THANK YOU!This was http://joind.in/6298

by @dzuelkeSend me questions or hire us:[email protected]

http://joind.in/6298

http://joind.in/6298



mailto:[email protected]?subject=PHP%20World%20Kongress:%20Designing%20HTTP%20Interfaces%20and%20RESTful%20Web%20Services

mailto:[email protected]?subject=PHP%20World%20Kongress:%20Designing%20HTTP%20Interfaces%20and%20RESTful%20Web%20Services

How the Web Evolves with Hypermedia (WHISKYWEB2012 2012-04-13)

Technology

products1234 http1

amazonfollowlogin case

hypermedia type

xml charset

amazonsearchawesome

case search

case product

bc break