HTML Hypermedia APIs and Adaptive Web Design
Upcoming SlideShare
Loading in...5
×
 

HTML Hypermedia APIs and Adaptive Web Design

on

  • 3,141 views

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 ...

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/-UJsfWWvWgbk/Tb2RS3iFDoI/AAAAAAAAD0k/4XCA3sgsP3A/

Statistics

Views

Total Views
3,141
Views on SlideShare
3,140
Embed Views
1

Actions

Likes
1
Downloads
5
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML Hypermedia APIs and Adaptive Web Design HTML Hypermedia APIs and Adaptive Web Design Presentation Transcript

  • Gustaf Nilsson Kotte
  • @gustaf_nk
  • Platform fragmentationHTML Hypermedia APIs Capability fragmentation Adaptive Web Design The API and the web can be the same thing!
  • 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">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>
  • Primary Secondary Secondary use cases use cases use casesConsume API Render HTML viewsNative POST HTML forms API
  • <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, to get all user-texts: $("#messages .user-text") -->
  • ”Building Hypermedia APIswith HTML5 and Node”, Mike Amundsen”Designing Hypermedia APIs”, Steve Klabnik
  • Platform fragmentationHTML Hypermedia APIs Capability fragmentation Adaptive Web Design The API and the web can be the same thing!
  • 3 iOS devices – 40% 3112 other devices– 60%
  • ”Adaptive Web Design”, Aaron Gustafson“Progressive Enhancement 2.0”, Nicolas Zakas“Resource-Oriented Client Architecture”, http://roca-style.org
  • Platform fragmentationHTML Hypermedia APIs Capability fragmentation Adaptive Web Design The API and the web can be the same thing!
  • <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>
  • <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>
  • GracefulDegradation Progressive Enhancement
  • SPA Progressive Enhancement
  • Primary Secondary Secondary use cases use cases use casesConsume API Render HTML viewsNative POST HTML forms API
  • HTMLHypermedia API Store
  • Platform fragmentationHTML Hypermedia APIs Capability fragmentation Adaptive Web Design The API and the web can be the same thing!
  • (@gustaf_nk)
  • “This is not the web” images by Brad Frosthttp://bradfrostweb.com/Trash canhttp://www.clker.com/clipart-15146.htmlMoney bagshttps://doodleaday.files.wordpress.com/2012/03/doodle-1016-money-bags.jpgExit signhttp://www.ski.org/Rehab/WCrandall/EgressIIIWeb/images/egressfig7.gifScalehttp://wishfit.files.wordpress.com/2012/02/scale.gifEscalatorhttp://www.orientlighting.com/Upload/Editor/201121822854289.jpgElevatorhttp://aes-shreveport.com/http://aes-shreveport.com/wp-content/uploads/2010/03/elevator1.jpgMacBook Prohttp://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 NetBookhttp://www.conceivablytech.com/wp-content/uploads/2010/04/ferrari12.jpgHypermedia avatarhttps://si0.twimg.com/profile_images/1480823070/twitter.jpgStorytellinghttp://yarnstorytellers.files.wordpress.com/2012/05/kidsstorytelling.jpgBack to the Futurehttp://www.thenoobnews.com/uploads/2012/01/Marty-doc-remote.jpgOuyahttp://cf.shacknews.com/images/20120727/ouya_22884.nphd.jpgSamsung SmartTVhttp://4.bp.blogspot.com/-DJYVeNjOxVA/T14mh5NVA5I/AAAAAAAAABU/Re1oXspmx1o/s1600/Samsung.jpgMike Amundsenhttp://b.vimeocdn.com/ts/185/530/185530962_640.jpgHipster Pabst Blue Ribbonhttp://www.nbclosangeles.com/blogs/press-here/Start-Up-Recruits-with-10000-and-Lifetime-Pabst-Blue-Ribbon-123126508.htmlJuggling monkeyhttp://media.smashingmagazine.com/wp-content/uploads/2012/07/juggling-monkey.jpgUnityhttp://www.unitylakeorion.org/wp-content/uploads/unity.jpgKindlehttp://www.blogcdn.com/www.engadget.com/media/2011/09/amazon-official-kindle-touch.jpgiPad in sofahttp://www.itouch-magazine.eu/wp-content/uploads/2010/05/iPad-Lapdesk-Render-3-1024x797.jpglaptop on trainhttp://medmondtech.files.wordpress.com/2011/06/080910090104-laptop-train-travel-man.jpgRazorhttp://4.bp.blogspot.com/-UJsfWWvWgbk/Tb2RS3iFDoI/AAAAAAAAD0k/4XCA3sgsP3A/s1600/Occams-Razor_1896-l.jpg