• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML Hypermedia APIs and Adaptive Web Design - RuPy
 

HTML Hypermedia APIs and Adaptive Web Design - RuPy

on

  • 23,526 views

 

Statistics

Views

Total Views
23,526
Views on SlideShare
23,242
Embed Views
284

Actions

Likes
1
Downloads
4
Comments
0

1 Embed 284

https://twitter.com 284

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML Hypermedia APIs and Adaptive Web Design - RuPy HTML Hypermedia APIs and Adaptive Web Design - RuPy Presentation Transcript

    • HTML HYPERMEDIA APIS AND ADAPTIVE WEB DESIGN Gustaf Nilsson Kotte / @gustaf_nk
    • ABOUT ME
    • TWO AREAS OF INTEREST Hypermedia APIs - No application logic in API clients Adaptive Web Design - Multi-device web Working nicely together!
    • DEMO, KANBAN BOARD HTML 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 controls Old, standardized, everybody knows HTML Good tooling support https://vimeo.com/20781278 http://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>
    • 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 DESIGN Responsive web design Feature detection Device APIs Performance Conditional loading Content strategy Touch Platform optimization Ergonomics ... 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 VIEW Same 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: andhttp://kanban-awd.herokuapp.com/ http://kanban-api.herokuapp.com Slides: http://www.slideshare.net/GustafKotte/h-27102096