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

1. (HTML Hypermedia APIs and Adaptive Web Design)
Gustaf Nilsson Kotte

2. @gustaf_nk

4. Platform fragmentation
HTML Hypermedia APIs
Capability fragmentation
Adaptive Web Design
The API and the web can be the same thing!

10. iOS Android WP7 Win8 SmartTVs Web SPAs ?
API
Store

14. iOS Android WP7 Win8 SmartTVs Web SPAs ?
API
Store

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

20. Primary Secondary Secondary
use cases use cases use cases
Native Render HTML views
Consume API HTML forms
API

21. <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") -->

22. ”Building Hypermedia APIs
with HTML5 and Node”, Mike Amundsen
”Designing Hypermedia APIs”, Steve Klabnik

23. Platform fragmentation
HTML Hypermedia APIs
Capability fragmentation
Adaptive Web Design
The API and the web can be the same thing!

27. 3 iOS devices – 40%
3112 other devices– 60%

37. Responsive Web Design + Server Side Components

39. ”Adaptive Web Design”, Aaron Gustafson
“Progressive Enhancement 2.0”, Nicolas Zakas
“Resource-Oriented Client Architecture”, http://roca-style.org

40. Platform fragmentation
HTML Hypermedia APIs
Capability fragmentation
Adaptive Web Design
The API and the web can be the same thing!

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

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

46. SPA
Progressive
Enhancement

47. Primary Secondary Secondary
use cases use cases use cases
Native Render HTML views
Consume API HTML forms
API

48. HTML
Hypermedia
API
Store

50. Platform fragmentation
HTML Hypermedia APIs
Capability fragmentation
Adaptive Web Design
The API and the web can be the same thing!

52. (@gustaf_nk)

53. “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
Ooya, 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
Zombie, http://www.everystockphoto.com/photo.php?imageId=9964446&searchId=0eda241fc65ccf35d9743309ac395215&npos=338