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

Transcript

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