(HTML Hypermedia APIs and Adaptive Web Design)              Gustaf Nilsson Kotte
@gustaf_nk
Platform fragmentationHTML Hypermedia APIs                                Capability fragmentation                        ...
iOS   Android   WP7   Win8         SmartTVs   Web SPAs   ?                             API                             Store
iOS   Android   WP7   Win8         SmartTVs   Web SPAs   ?                             API                             Store
LO: Support for out-bound navigational links (HTTP GET)<a href="http://www.example.org/search" title="view search page">Se...
Primary    Secondary   Secondary       use cases   use cases   use casesNative                              Render HTML vi...
<div class="message-block">  <div id="messages">    <ul class="single">        <li>           <span class="message-text">M...
”Building Hypermedia APIswith HTML5 and Node”, Mike Amundsen”Designing Hypermedia APIs”, Steve Klabnik
Platform fragmentationHTML Hypermedia APIs                                Capability fragmentation                        ...
3 iOS devices – 40%             3112 other devices– 60%
Responsive Web Design + Server Side Components
”Adaptive Web Design”, Aaron Gustafson“Progressive Enhancement 2.0”, Nicolas Zakas“Resource-Oriented Client Architecture”,...
Platform fragmentationHTML Hypermedia APIs                                Capability fragmentation                        ...
<div class="message-block">  <div id="messages">    <ul class="single">        <li>           <span class="message-text">M...
<div class="message-block">  <div id="messages">    <ul class="single">        <li>           <span class="message-text">M...
SPA       Progressive      Enhancement
Primary    Secondary   Secondary       use cases   use cases   use casesNative                              Render HTML vi...
HTMLHypermedia   API  Store
Platform fragmentationHTML Hypermedia APIs                                Capability fragmentation                        ...
(@gustaf_nk)
“This is not the web” images by Brad Frosthttp://bradfrostweb.com/Trash can, http://www.clker.com/clipart-15146.htmlMoney ...
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade
Upcoming SlideShare
Loading in …5
×

Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade

1,019 views
930 views

Published on

The number of different types of connected devices is increasing. We have already built ourselves a large amount of code duplication between client applications (both native apps and web apps) and it's only getting worse. Also, cheap low-profile devices are getting bigger market shares and users will still expect a good experience when using our software.

To solve the problem of code duplication on the clients, we need to pull as much code as we can from the clients back to the server. A good way to achieve this is to build a Hypermedia API and to use HTML as the media type for the API. A nice side-effect of this is that we can show the received HTML directly to the user, which will be good enough for a majority part of a client application.
The problem of low-profile devices is best solved by using Progressive Enhancement, which will allow us developers to provide the best experience that the device is capable of delivering.

Finally, combining HTML Hypermedia APIs and Progressive Enhancement will allow us to have a single endpoint for our web and our API.

Links
---
http://amundsen.com/hypermedia/hfactor/
http://www.amundsen.com/blog/archives/765
http://codeartisan.blogspot.se/2012/07/using-html-as-media-type-for-your-api.html
http://microformats.org/
http://roy.gbiv.com/untangled/2009/it-is-okay-to-use-post
http://www.netbiscuits.com/mobile-metrics-report-2011
http://www.lukew.com/ff/entry.asp?1390
http://24ways.org/2010/speed-up-your-site-with-delayed-content
http://24ways.org/2011/conditional-loading-for-responsive-designs
http://filamentgroup.com/lab/ajax_includes_modular_content/
http://www.webmonkey.com/2012/03/video-progressive-enhancement-2-0/
http://easy-readers.net/books/adaptive-web-design/
http://roca-style.org/
http://www.jayway.com/2012/08/01/combining-html-hypermedia-apis-and-adaptive-web-design/

Image resources
---
“This is not the web” images by Brad Frost
http://bradfrostweb.com/

Juggling Monkey
http://media.smashingmagazine.com/wp-content/uploads/2012/07/juggling-monkey.jpg

Mike Amundsen
http://b.vimeocdn.com/ts/185/530/185530962_640.jpg

Back to the Future
http://www.thenoobnews.com/uploads/2012/01/Marty-doc-remote.jpg

Trash can
http://www.clker.com/clipart-15146.html

Money bags
https://doodleaday.files.wordpress.com/2012/03/doodle-1016-money-bags.jpg

Exit sign
http://www.ski.org/Rehab/WCrandall/EgressIIIWeb/images/egressfig7.gif

Scale
http://wishfit.files.wordpress.com/2012/02/scale.gif

Escalator
http://www.orientlighting.com/Upload/Editor/201121822854289.jpg

Elevator
http://aes-shreveport.com/http://aes-shreveport.com/wp-content/uploads/2010/03/elevator1.jpg

Hipster Pabst Blue Ribbon
http://www.nbclosangeles.com/blogs/press-here/Start-Up-Recruits-with-10000-and-Lifetime-Pabst-Blue-Ribbon-123126508.html

Unity
http://www.unitylakeorion.org/wp-content/uploads/unity.jpg

Razor
http://4.bp.blogspot.com/-U

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,019
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade

  1. 1. (HTML Hypermedia APIs and Adaptive Web Design) Gustaf Nilsson Kotte
  2. 2. @gustaf_nk
  3. 3. Platform fragmentationHTML Hypermedia APIs Capability fragmentation Adaptive Web Design The API and the web can be the same thing!
  4. 4. iOS Android WP7 Win8 SmartTVs Web SPAs ? API Store
  5. 5. iOS Android WP7 Win8 SmartTVs Web SPAs ? API Store
  6. 6. LO: Support for out-bound navigational links (HTTP GET)<a href="http://www.example.org/search" title="view search page">Search</a>LN: Support for non-idempotent updates (HTTP POST)<form method="post" action="http://www.example.org/my-keywords"/> <label>Keywords:</label> <input name="keywords" type="text" value="" /> <input type="submit" /></form>
  7. 7. Primary Secondary Secondary use cases use cases use casesNative Render HTML viewsConsume API HTML forms API
  8. 8. <div class="message-block"> <div id="messages"> <ul class="single"> <li> <span class="message-text">Message text</span> <span class="single">@</span> <a rel="message" href="..." title="message"> <span class="date-time">2012-01-01</span> </a> <span class="single">by</span> <a rel="user" href="..." title="A title"> <span class="user-text">User text</span> </a> </li> <!-- ... -> </ul> </div></div><!–– Example: Access the user-texts property: $("#messages .message-text") -->
  9. 9. ”Building Hypermedia APIswith HTML5 and Node”, Mike Amundsen”Designing Hypermedia APIs”, Steve Klabnik
  10. 10. Platform fragmentationHTML Hypermedia APIs Capability fragmentation Adaptive Web Design The API and the web can be the same thing!
  11. 11. 3 iOS devices – 40% 3112 other devices– 60%
  12. 12. Responsive Web Design + Server Side Components
  13. 13. ”Adaptive Web Design”, Aaron Gustafson“Progressive Enhancement 2.0”, Nicolas Zakas“Resource-Oriented Client Architecture”, http://roca-style.org
  14. 14. Platform fragmentationHTML Hypermedia APIs Capability fragmentation Adaptive Web Design The API and the web can be the same thing!
  15. 15. <div class="message-block"> <div id="messages"> <ul class="single"> <li> <span class="message-text">Message text</span> <span class="single">@</span> <a rel="message" href="..." title="message"> <span class="date-time">2012-01-01</span> </a> <span class="single">by</span> <a rel="user" href="..." title="A title"> <span class="user-text">User text</span> </a> </li> <!-- ... -> </ul> </div></div>
  16. 16. <div class="message-block"> <div id="messages"> <ul class="single"> <li> <span class="message-text">Message text</span> <span class="single">@</span> <a rel="message" href="..." title="message"> <span class="date-time">2012-01-01</span> </a> <span class="single">by</span> <a rel="user" href="..." title="A title"> <span class="user-text">User text</span> </a> </li> <!-- ... -> </ul> </div></div>
  17. 17. SPA Progressive Enhancement
  18. 18. Primary Secondary Secondary use cases use cases use casesNative Render HTML viewsConsume API HTML forms API
  19. 19. HTMLHypermedia API Store
  20. 20. Platform fragmentationHTML Hypermedia APIs Capability fragmentation Adaptive Web Design The API and the web can be the same thing!
  21. 21. (@gustaf_nk)
  22. 22. “This is not the web” images by Brad Frosthttp://bradfrostweb.com/Trash can, http://www.clker.com/clipart-15146.htmlMoney bags, https://doodleaday.files.wordpress.com/2012/03/doodle-1016-money-bags.jpgExit sign, http://www.ski.org/Rehab/WCrandall/EgressIIIWeb/images/egressfig7.gifScale, http://wishfit.files.wordpress.com/2012/02/scale.gifEscalator, http://www.orientlighting.com/Upload/Editor/201121822854289.jpgElevator, http://aes-shreveport.com/http://aes-shreveport.com/wp-content/uploads/2010/03/elevator1.jpgMacBook Pro, http://store.storeimages.cdn-apple.com/2911/as-images.apple.com/is/image/AppleInc/mbp2012-step0-macbookpro-lh?wid=341&hei=218&fmt=png-alpha&qlt=95Ferrari NetBook, http://www.conceivablytech.com/wp-content/uploads/2010/04/ferrari12.jpgHypermedia avatar, https://si0.twimg.com/profile_images/1480823070/twitter.jpgStorytelling, http://yarnstorytellers.files.wordpress.com/2012/05/kidsstorytelling.jpgBack to the Future, http://www.thenoobnews.com/uploads/2012/01/Marty-doc-remote.jpgOoya, http://cf.shacknews.com/images/20120727/ouya_22884.nphd.jpgSamsung SmartTV,http://4.bp.blogspot.com/-DJYVeNjOxVA/T14mh5NVA5I/AAAAAAAAABU/Re1oXspmx1o/s1600/Samsung.jpgMike Amundsen, http://b.vimeocdn.com/ts/185/530/185530962_640.jpgHipster Pabst Blue Ribbon, http://www.nbclosangeles.com/blogs/press-here/Start-Up-Recruits-with-10000-and-Lifetime-Pabst-Blue-Ribbon-123126508.htmlJuggling monkey, http://media.smashingmagazine.com/wp-content/uploads/2012/07/juggling-monkey.jpgUnity, http://www.unitylakeorion.org/wp-content/uploads/unity.jpgKindle, http://www.blogcdn.com/www.engadget.com/media/2011/09/amazon-official-kindle-touch.jpgiPad in sofa, http://www.itouch-magazine.eu/wp-content/uploads/2010/05/iPad-Lapdesk-Render-3-1024x797.jpglaptop on train, http://medmondtech.files.wordpress.com/2011/06/080910090104-laptop-train-travel-man.jpgRazor, http://4.bp.blogspot.com/-UJsfWWvWgbk/Tb2RS3iFDoI/AAAAAAAAD0k/4XCA3sgsP3A/s1600/Occams-Razor_1896-l.jpgZombie, http://www.everystockphoto.com/photo.php?imageId=9964446&searchId=0eda241fc65ccf35d9743309ac395215&npos=338

×