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...
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
http...
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"><%= ...
EXAMPLE: MICROFORMATS2, FORMS
<div class="p-forms">
<form data-rel="move backlog" action="/items/backlog" method="POST">
<...
HTML HYPERMEDIA APIS ❤ MOBILE FIRST
http://filamentgroup.com/lab/ajax_includes_modular_content/
http://bradfrostweb.com/blog/mobile/beyond-media-queries-anato...
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
T...
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...
FURTHER EXPLORATION, ONLINE
,Brad Frost Beyond Media Queries:
Anatomy of an Adaptive Web Design
,Nicolas Zakas Progressive...
THANK YOU!Gustaf Nilsson Kotte / @gustaf_nk
Code: https://github.com/gustafnk/kanban-awd-api
Demo: andhttp://kanban-awd.he...
Upcoming SlideShare
Loading in...5
×

HTML Hypermedia APIs and Adaptive Web Design - RuPy

24,593

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
24,593
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML Hypermedia APIs and Adaptive Web Design - RuPy

  1. 1. HTML HYPERMEDIA APIS AND ADAPTIVE WEB DESIGN Gustaf Nilsson Kotte / @gustaf_nk
  2. 2. ABOUT ME
  3. 3. TWO AREAS OF INTEREST Hypermedia APIs - No application logic in API clients Adaptive Web Design - Multi-device web Working nicely together!
  4. 4. DEMO, KANBAN BOARD HTML Hypermedia API + Adaptive Web Design
  5. 5. PREFER FAT APIS OVER FAT CLIENTS
  6. 6. http://martinfowler.com/articles/richardsonMaturityModel.html
  7. 7. HYPERMEDIA APIS
  8. 8. WHAT IS THE HYPERMEDIA CONSTRAINT? — Jon Moore You do stuff by reading pages and then either follow links or submit forms.
  9. 9. 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/
  10. 10. MORE... Great for learning about hypermedia!
  11. 11. INTERLUDE JSON is ok :) Also, hypermedia is a bit harder to consume in general
  12. 12. 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>
  13. 13. 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>
  14. 14. HTML HYPERMEDIA APIS ❤ MOBILE FIRST
  15. 15. http://filamentgroup.com/lab/ajax_includes_modular_content/ http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
  16. 16. http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
  17. 17. 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
  18. 18. PROGRESSIVE ENHANCEMENT
  19. 19. THE API AND THE WEB CAN BE THE SAME THING! HTML Hypermedia APIs ❤ Mobile First Mobile First ❤ all web browsers and devices
  20. 20. THE API AND THE WEB CAN BE THE SAME THING! HTML Hypermedia APIs ❤ Adaptive Web Design
  21. 21. HTML HYPERMEDIA APIS + AWD
  22. 22. HIGH LEVEL VIEW Same code for web and API ...yes, they share templates too Separate URLs Optimize for both perspectives
  23. 23. DEMO: CHANGING THE APPLICATION
  24. 24. SUMMARY
  25. 25. HTML Hypermedia APIs ❤ Mobile First Mobile First ❤ all web browsers and devices
  26. 26. HTML Hypermedia APIs ❤ Adaptive Web Design
  27. 27. FURTHER EXPLORATION, BOOKS ,Mike Amundsen Building Hypermedia APIs with HTML5 and Node ,Steve Klabnik Designing Hypermedia APIs ,Aaron Gustafson Adaptive Web Design
  28. 28. 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
  29. 29. 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
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×