Upload
gustaf-nilsson-kotte
View
3.430
Download
3
Tags:
Embed Size (px)
Citation preview
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