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

Closing keynote given at the Whisky Web 2012 conference in Edinburgh, Scotland.

Transcript

1. HOW THE WEB EVOLVES WITH HYPERMEDIA
2. David Zuelke
3. David Zülke
6. http://en.wikipedia.org/wiki/File:München_Panorama.JPG
7. Founder
9. Lead Developer
11. @dzuelke
12. THE WEB The Internet’s Largest Application
13. WWW
14. first data exchange system
15. planetary scale
18. why is that possible?
19. Hyperlinks!
20. no tight coupling!
21. Hyperlinks must not have an inverse
22. loosely coupled by design
23. embraces failure
24. HTTP/1.1 404 Not Found
25. no notification infrastructure
26. more information != more friction
27. no limits to scalability
28. WWW is protocol-centric
29. THE HUMAN WEB Point and Click
30. the Web changes
35. but humans can adapt
38. 14+ years of search
39. (and 14+ years of ugly design :p)
40. THE HUMAN BRAIN You are a State Machine!
41. bored
42. want something awesome
45. laaaaaame... what’s on the next pages?
51. 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
52. http://flic.kr/arpy/3440289156/ GMMC 66 & GMMC 67
53. awesome!
54. let’s buy that
58. let’s model that process
59. 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
60. that was easy
61. interactions driven by human intelligence
62. sometimes idiots drive the interaction
68. Humans can adapt to changes and new things
69. THE MACHINE WEB Can Computers Do This?
70. 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?
71. yes
72. it’s called REST
73. unfortunately
74. people fuck it up all the time
75. they’re like
76.  I haz REST nao
77. boss is happy
78. VCs give money
79. it’s like the insane cloud hype
81. THE MACHINE BRAIN Hypermedia to the Rescue
83. Hypermedia As The Engine Of Application State
84. it’s the part people always miss
85. 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
86. RPC/SOAP
87. out-of-band knowledge drives interaction
88. “you must call init() before execute()”
89. HATEOAS
90. hypermedia type has defined semantics
91. clients follow links with known relations
92. just like humans!
93. <?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&amp;items_per_page=1&amp;term=old"                rel="self"  title="self"/>    <link  href="http://openapi.lovefilm.com/catalog/games?start_index=2&amp;items_per_page=1&amp;term=old"                rel="next"  title="next"/>    <link  href="http://openapi.lovefilm.com/catalog/games?start_index=9&amp;items_per_page=1&amp;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>
94. HTTP’s Uniform Interface is generic
95. GET  /products/1234  HTTP/1.1 Host:  evilshop.com Accept:  application/vnd.com.evilshop+xml HTTP/1.1  200  OK Content-­‐Type:  application/vnd.com.evilshop+xml;  charset=utf-­‐8 Allow:  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>
96. PUT  /products/1234  HTTP/1.1 Host:  evilshop.com Content-­‐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  Content Content-­‐Type:  application/vnd.com.evilshop+xml;  charset=utf-­‐8 Allow:  GET,  PUT,  DELETE
97. EVOLVABILITY (Creationists Better Leave Now)
98. OO style or RPC style
99. clients bound to object graph or procedures
100. SOAP
101. breaks all the clients, all the time
102. expect the unexpected
103. <?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>
104. <?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>
105. <?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>
106. <?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>
107. <?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>
108. and break only if you have to
109. GET  /products/1234  HTTP/1.1 Host:  evilshop.com Accept:  application/vnd.com.evilshop+xml HTTP/1.1  200  OK Content-­‐Type:  application/vnd.com.evilshop+xml;  charset=utf-­‐8 Allow:  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>
110. GET  /products/1234  HTTP/1.1 Host:  evilshop.com Accept:  application/vnd.com.evilshop+xml HTTP/1.1  200  OK Content-­‐Type:  application/vnd.com.evilshop+xml;  charset=utf-­‐8 Allow:  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
111. (sharks go out of stock...)
112. GET  /products/1234  HTTP/1.1 Host:  evilshop.com Accept:  application/vnd.com.evilshop+xml HTTP/1.1  404  Not  Found Content-­‐Type:  application/vnd.com.evilshop+xml;  charset=utf-­‐8 Allow:  GET,  PUT,  DELETE
113. “let’s remove the 404 and send an availability field”
114. BC break, existing clients don’t know the field!
115. Solution: a new Media Type version
116. GET  /products/1234  HTTP/1.1 Host:  evilshop.com Accept:  application/vnd.com.evilshop.2+xml,application/vnd.com.evilshop+xml;q=0.5 HTTP/1.1  200  OK Content-­‐Type:  application/vnd.com.evilshop.2+xml;  charset=utf-­‐8 Allow:  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>
117. with this and HATEOAS, clients become unbreakable
118. and the Web evolves with Hypermedia
119. !e End
120. THANK YOU! This was http://joind.in/6298 by @dzuelke Send me questions or hire us: david.zuelke@bitextender.com