How the Web Evolves with Hypermedia (IPC11 2011-10-11)

HOW THE WEB EVOLVES WITH HYPERMEDIA

David Zuelke

David Zülke

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

Founder

Lead Developer

@dzuelke

THE WEBThe Internet’s Largest Application

ﬁrst data exchange system

planetary scale

why is that possible?

Hyperlinks!

no tight coupling!

loosely coupled by design

no notiﬁcation infrastructure

HTTP/1.1 404 Not Found

embraces failure

more information != more friction

no limits to scalability

WWW is protocol-centric

THE HUMAN WEB Point and Click

the Web changes

but humans can adapt

14+ years of search

(and 14+ years of ugly design :p)

THE HUMAN BRAIN You are a State Machine!

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

GMMC 66 & GMMC 67 89156/ rpy/34402 http://ﬂic.kr/a

awesome!

let’s buy that

let’s model that process

AS PSEUDOCODEwhile($david-‐>isBored()&&!$david-‐>isBroke()){ case shopping_cart: { squeeze_pacman_stress_ball(); $amazon-‐>followCheckout(); } break; $amazon = new Browser(http://amazon.com); case login_or_register: { while(!$david-‐>getIsHappy()) { if($david-‐>hasAmazonAccount()) { switch($amazon-‐>state) { $amazon-‐>followLogin(); case home: { } else { $amazon-‐>search(awesome stuff); $amazon-‐>followRegister(); } break; } case search_result_page: { } break; if(!$amazon-‐>hasSomethingAwesome()) { case order_summary: { $amazon-‐>followAwesomeProduct(); $amazon-‐>followConfirmation(); } elseif($amazon-‐>hasMorePages()) { } break; $amazon-‐>followNextPage(); case order_confirmation: { } else { $david-‐>setIsHappy(mt_rand(0,1)); sleep(3600); } break; $amazon-‐>state = home; // retry! case default: { } $amazon-‐>state = home; } break; } case product_page: { } $amazon-‐>followAddToCart(); } } break; }

that was easy

interactions driven by human intelligence

sometimes idiots drive the interaction

THE MACHINE WEB Can Computers Do This?

CAN WE TEACH A COMPUTER TO...• ... discover workﬂows 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?

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 BRAIN Hypermedia 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 callingany HTTP-based interface a REST API [...]If the engine of application state (and hence the API) isnot being driven by hypertext, then it cannot beRESTful 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 deﬁned 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: evil.comAccept: application/vnd.com.evil.shop+xmlHTTP/1.1 200 OKContent-‐Type: application/vnd.com.evil.shop+xml; charset=utf-‐8Allow: GET, PUT, DELETE<?xml version="1.0" encoding="utf-‐8"?><product xmlns="urn:com.evil.prods" 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.evil.shop+xml" href="http://evil.com/categories/lasers"/></product>

PUT /products/1234 HTTP/1.1Host: evil.comContent-‐Type: application/vnd.com.evil.shop+xml<?xml version="1.0" encoding="utf-‐8"?><product xmlns="urn:com.evil.prods" 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.evil.shop+xml" href="http://evil.com/categories/lasers"/></product>HTTP/1.1 204 No ContentContent-‐Type: application/vnd.com.evil.shop+xml; charset=utf-‐8Allow: GET, PUT, DELETE

EVOLVABILITY(Creationists Better Leave Now)

OO style or RPC style

clients bound to object graph or procedures

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>

with this and HATEOAS, clients become unbreakable

and the Web evolves with Hypermedia

!e End

THANK YOU! This was http://joind.in/3871 by @dzuelkeSend me questions or hire us:david.zuelke@bitextender.com

How the Web Evolves with Hypermedia (IPC11 2011-10-11)

by David Zuelke

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 3

Statistics