how the web evolves with hypermedia (whiskyweb2012 2012-04-13)
DESCRIPTION
Closing keynote given at the Whisky Web Conference 2012 in Edinbugh, Scotland.TRANSCRIPT
David Zuelke
David Zülke
http://en.wikipedia.org/wiki/File:München_Panorama.JPG
Founder
Lead Developer
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
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
<?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">31414.14</price> <atom:link rel="category" type="application/vnd.com.evilshop+xml" href="http://evilshop.com/categories/lasers"/></product>
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
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>
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> <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...)
GET /products/1234 HTTP/1.1Host: evilshop.comAccept: application/vnd.com.evilshop+xml
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
