HTML HYPERMEDIA APIS AND

ADAPTIVE WEB DESIGNGustaf Nilsson Kotte / @gustaf_nk

ABOUT ME

TWO AREAS OF INTEREST

Hypermedia APIs - No application logic in API clientsAdaptive Web Design - Multi-device web

Working nicely together!

DEMO, KANBAN BOARDHTML Hypermedia API + Adaptive Web Design

PREFER FAT APIS OVER FAT CLIENTS

http://martinfowler.com/articles/richardsonMaturityModel.html

HYPERMEDIA APIS

WHAT IS THE HYPERMEDIA CONSTRAINT?

— Jon Moore

You do stuff by reading pages and then either

follow links or submit forms.

USE HTML FOR HYPERMEDIA APIS

Lots of hypermedia controlsOld, standardized, everybody knows HTMLGood tooling support

https://vimeo.com/20781278http://codeartisan.blogspot.se/2012/07/using-html-as-media-type-for-your-api.html

http://amundsen.com/hypermedia/html/

MORE...

Great for learning about hypermedia!

INTERLUDE

JSON is ok :)

Also, hypermedia is a bit harder to consume in general

EXAMPLE: MICROFORMATS2, ENTITIES<li class="h-item"> <div class="p-name"><%= item.name %></div> <div class="p-status"><%= item.status %></div> <div class="p-description"><%= item.description %></div> <div class="p-forms"> ... </div> <div class="p-links"> ... </div></li>

EXAMPLE: MICROFORMATS2, FORMS<div class="p-forms"> <form data-rel="move backlog" action="/items/backlog" method="POST"> <input name="id" type="hidden" value="4"> <input title="submit" type="submit" value="Move to backlog"> </form> <form data-rel="move verify next" action="/items/verify" method="POST"> <input name="id" type="hidden" value="4"> <input title="submit" type="submit" value="Move to verify"> </form></div>

Minimal HTML

IDEA: A COMMON GOAL

HTML Hypermedia APIs ∩ Mobile first

=(also, reduce number of roundtrips)

http://filamentgroup.com/lab/ajax_includes_modular_content/

http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/

http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/

ADAPTIVE WEB DESIGNResponsive web design

Feature detectionDevice APIs

PerformanceConditional loading

Content strategyTouch

Platform optimizationErgonomics

...

http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design

PROGRESSIVE ENHANCEMENT

THE API AND THE WEB CAN BE THE SAME THING!

HTML Hypermedia APIs ❤ Mobile First

Mobile First ❤ all web browsers and devices

THE API AND THE WEB CAN BE THE SAME THING!

HTML Hypermedia APIs +

Adaptive Web Design

HTML HYPERMEDIA APIS + AWD

HIGH LEVEL VIEWSame code for web and API

(yes, share templates too)

Separate URLs

Optimize response size and #roundtrips

Microformats2 as semantic layer or RDFa [Lite]

Agressive enhancement

Other AWD techniques :)

Optimize API perspective

DEMO: CHANGING THE APPLICATION

SUMMARY

HTML Hypermedia APIs ❤ Mobile First

Mobile First ❤ all web browsers and devices

FURTHER EXPLORATION, BOOKS, Mike Amundsen Building Hypermedia APIs

with HTML5 and Node

, Steve Klabnik Designing Hypermedia APIs

, Aaron Gustafson Adaptive Web Design

FURTHER EXPLORATION, ONLINE, Brad Frost Beyond Media Queries:

Anatomy of an Adaptive Web Design

, Nicolas Zakas Progressive Enhancement 2.0

(et al), Stefan Tilkov Resource-oriented Client Architecture

THANK YOU!Gustaf Nilsson Kotte / @gustaf_nk

Code: https://github.com/gustafnk/kanban-awd-api

Demo: and http://kanban-awd.herokuapp.com/ http://kanban-api.herokuapp.com

Slides: https://github.com/gustafnk/HTML-Hypermedia-APIs-and-Adaptive-Web-Design