HTML Hypermedia APIs and Adaptive Web Design - RuPy
2 likes•25,158 views
The document discusses using HTML hypermedia APIs and adaptive web design together. HTML hypermedia APIs use standard HTML to build APIs that follow the hypermedia constraint, where clients interact by following links and submitting forms. Adaptive web design allows a single codebase to work across different devices by responding to features and making content and layout fluid. The document argues that HTML hypermedia APIs and adaptive web design work well together by allowing the same code and templates to be used for both the web interface and API, with separate URLs and optimizations for different perspectives. A demo is shown of a kanban board application built with this approach.
HTML Hypermedia APIs and Adaptive Web Design - RuPy
- 1. HTML HYPERMEDIA APIS AND ADAPTIVE WEB DESIGN Gustaf Nilsson Kotte / @gustaf_nk
- 2. ABOUT ME
- 3. TWO AREAS OF INTEREST Hypermedia APIs - No application logic in API clients Adaptive Web Design - Multi-device web Working nicely together!
- 4. DEMO, KANBAN BOARD HTML Hypermedia API + Adaptive Web Design
- 5. PREFER FAT APIS OVER FAT CLIENTS
- 8. WHAT IS THE HYPERMEDIA CONSTRAINT? — Jon Moore You do stuff by reading pages and then either follow links or submit forms.
- 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. MORE... Great for learning about hypermedia!
- 11. INTERLUDE JSON is ok :) Also, hypermedia is a bit harder to consume in general
- 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. 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. HTML HYPERMEDIA APIS ❤ MOBILE FIRST
- 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
- 19. THE API AND THE WEB CAN BE THE SAME THING! HTML Hypermedia APIs ❤ Mobile First Mobile First ❤ all web browsers and devices
- 20. THE API AND THE WEB CAN BE THE SAME THING! HTML Hypermedia APIs ❤ Adaptive Web Design
- 21. HTML HYPERMEDIA APIS + AWD
- 22. HIGH LEVEL VIEW Same code for web and API ...yes, they share templates too Separate URLs Optimize for both perspectives
- 23. DEMO: CHANGING THE APPLICATION
- 24. SUMMARY
- 25. HTML Hypermedia APIs ❤ Mobile First Mobile First ❤ all web browsers and devices
- 26. HTML Hypermedia APIs ❤ Adaptive Web Design
- 27. FURTHER EXPLORATION, BOOKS ,Mike Amundsen Building Hypermedia APIs with HTML5 and Node ,Steve Klabnik Designing Hypermedia APIs ,Aaron Gustafson Adaptive Web Design
- 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. 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