Gustaf Nilsson Kotte
HTML Hypermedia APIs and Adaptive Web Design
Nov 29, 2014
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/
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/
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Gustaf Nilsson Kotte
@gustaf_nk
Platform fragmentation
HTML Hypermedia APIs
Capability fragmentation
Adaptive Web Design
The API and the web can be the same thing!
iOS Android WP7 Win8 Web SPAsSmartTVs
API
Store
?
iOS Android WP7 Win8 Web SPAsSmartTVs
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>
Primaryuse cases
Secondaryuse cases
Secondaryuse cases
API
Render HTML viewsHTML forms
Consume APINative POST
<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 APIs
with HTML5 and Node”, Mike Amundsen
”Designing Hypermedia APIs”, Steve Klabnik
Platform fragmentation
HTML 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 fragmentation
HTML 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>
ProgressiveEnhancement
GracefulDegradation
ProgressiveEnhancement
SPA
Primaryuse cases
Secondaryuse cases
Secondaryuse cases
API
Render HTML viewsHTML forms
Consume APINative POST
HTML Hypermedia
API
Store
Platform fragmentation
HTML 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 Frost
http://bradfrostweb.com/
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
MacBook 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=95
Ferrari NetBook
http://www.conceivablytech.com/wp-content/uploads/2010/04/ferrari12.jpg
Hypermedia avatar
https://si0.twimg.com/profile_images/1480823070/twitter.jpg
Storytelling
http://yarnstorytellers.files.wordpress.com/2012/05/kidsstorytelling.jpg
Back to the Future
http://www.thenoobnews.com/uploads/2012/01/Marty-doc-remote.jpg
Ouya
http://cf.shacknews.com/images/20120727/ouya_22884.nphd.jpg
Samsung SmartTV
http://4.bp.blogspot.com/-DJYVeNjOxVA/T14mh5NVA5I/AAAAAAAAABU/Re1oXspmx1o/s1600/Samsung.jpg
Mike Amundsen
http://b.vimeocdn.com/ts/185/530/185530962_640.jpg
Hipster Pabst Blue Ribbon
http://www.nbclosangeles.com/blogs/press-here/Start-Up-Recruits-with-10000-and-Lifetime-Pabst-Blue-Ribbon-123126508.html
Juggling monkey
http://media.smashingmagazine.com/wp-content/uploads/2012/07/juggling-monkey.jpg
Unity
http://www.unitylakeorion.org/wp-content/uploads/unity.jpg
Kindle
http://www.blogcdn.com/www.engadget.com/media/2011/09/amazon-official-kindle-touch.jpg
iPad in sofa
http://www.itouch-magazine.eu/wp-content/uploads/2010/05/iPad-Lapdesk-Render-3-1024x797.jpg
laptop on train
http://medmondtech.files.wordpress.com/2011/06/080910090104-laptop-train-travel-man.jpg
Razor
http://4.bp.blogspot.com/-UJsfWWvWgbk/Tb2RS3iFDoI/AAAAAAAAD0k/4XCA3sgsP3A/s1600/Occams-Razor_1896-l.jpg
Related Documents
