Download - Surviving the zombie apocalpyse of connected devices - Copenhagen Ruby Brigade

Gustaf Nilsson Kotte

(HTML Hypermedia APIs and Adaptive Web Design)

@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

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

”Building Hypermedia APIs

with HTML5 and Node”, Mike Amundsen

”Designing Hypermedia APIs”, Steve Klabnik




Adaptive Web Design


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”, http://roca-style.org




Adaptive Web Design





</a></li><!-- ... ->

</ul></div>

</div>




</a></li><!-- ... ->

</ul></div>

</div>

ProgressiveEnhancement

SPA

Primaryuse cases

Secondaryuse cases

Secondaryuse cases

API

Render HTML viewsHTML forms

NativeConsume API

HTML Hypermedia

API

Store




Adaptive Web Design


(@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

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

http://bradfrostweb.com/