html hypermedia apis and adaptive web design - jdays 2013

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

API - FIRST ATTEMPT GET/POST items/

{ id: 123, name: "...", description: "...", status: "backlog|working|verify|done" }

SERVER SIDE: ENFORCE RULESDon't trust clients

CLIENT SIDE: USER FRIENDLY

Hide non-valid transitionsShow primary transitions "Read the specification"

WITHOUT HYPERMEDIA

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 :)

EXAMPLE: NON-SEMANTIC HTML<li> <div><%= item.name %></div> <div><%= item.status %></div> <div><%= item.description %></div> <div> ... </div> <div> ... </div></li>

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>

HYPERMEDIA APISExpose use casesMaximize user percieved value per request (size)Avoid "chatty" interactions (latency)

MOBILE FIRSTExpose use casesMaximize user percieved value per request (size)Avoid "chatty" interactions (latency)

HTML HYPERMEDIA APIS ❤ MOBILE FIRST

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, they share templates too

Separate URLs

Optimize for both perspectives

DEMO: CHANGING THE APPLICATION

SUMMARY

HTML Hypermedia APIs ❤ Mobile First

Mobile First ❤ all web browsers and devices

HTML Hypermedia APIs ❤

Adaptive Web Design

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: http://www.slideshare.net/GustafKotte/html-hypermedia-apis-and-adaptive-web-design-j