Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

4,823 views

Published on

  • Be the first to comment

HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

  1. 1. Gustaf Nilsson Kotte
  2. 2. @gustaf_nk
  3. 3. How to scale development of apps?How to make our web work on every browser?
  4. 4. How to scale development of apps? => HTML Hypermedia APIsHow to make our web work on every browser? => AWDHTML Hypermedia APIs + AWD => Perfect combo!
  5. 5. RestBugs fork: HTML Hypermedia API + Adaptive Web Design https://github.com/gustafnk/RestBugs
  6. 6. iOS Android … … … Web ? API Store
  7. 7. iOS Android … … … Web ? API Store
  8. 8. http://martinfowler.com/articles/richardsonMaturityModel.html
  9. 9. Jon Moorehttp://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html
  10. 10. Hypermedia controls (read + write)Old, standardized, everybody knows it Jon MooreGood tooling support (server + clients) http://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html
  11. 11. <div id="bugs"> <ul class="all"> <li> <span class="title">Nordic APIs bug</span> <span class="description">The description of the bug</span> <form class="move working next" action="/bugs/working" method="POST" title="Move to Working"> <input name="id" type="hidden" value="..."> <input name="submit" type="submit" value="Move to Working"> </form> </li> </ul></div>
  12. 12. HTML Hypermedia APIs Mobile first “Minimalistic HTML”
  13. 13. HTML Hypermedia APIs + Mobile web
  14. 14. Mobile web Desktop web AWD “Modern mobile” …
  15. 15. Responsive Web Design Unobtrusive JavaScriptDelayed content loading Hijax Bundling AJAX requests Conditionally loaded contentFeature detection Performance HTML5 Navigation Timing http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design
  16. 16. “An escalator can never break: itcan only become stairs.” – Mitch Hedberg
  17. 17. Same logical endpointNative apps (80/20)Web browsers HTML Hypermedia API + AWDEnhanced web No application logic Application logic
  18. 18. www.example.comapi.example.com
  19. 19. (app.js)renderWeb = function(){ return host.contains(":9200")};POST /bugs: … if(renderWeb()) redirect to index page else return 201 Created;
  20. 20. • How to scale development of apps? => HTML Hypermedia APIs• How to make our web work on every browser? => AWDHTML Hypermedia APIs + AWD => Perfect combo!
  21. 21. Same logical endpointNative apps (80/20)Web browsers HTML Hypermedia API + AWDEnhanced web No application logic Application logic
  22. 22. http://www.amazon.com/Building-Hypermedia-APIs-HTML5-Node/dp/1449306578 http://easy-readers.net/books/adaptive-web-design
  23. 23. “Progressive Enhancement 2.0”, Nicolas Zakas“Resource-Oriented Client Architecture” http://www.webmonkey.com/2012/03/video-progressive-enhancement-2-0 http://roca-style.org
  24. 24. @gustaf_nkhttps://github.com/gustafnk/RestBugshttp://www.slideshare.net/GustafKotte
  25. 25. (Inline javascript code in responses)using harvey.js // polyfill for media queries configuration "large screen": on: $.getScript("/js/client.min.js"); $.get("/css/client.min.css", function(css) {…}); off: location.reload()
  26. 26. (client.min.js)links = $("#links a[rel!=index]");addForm = $("form.new");load template containing angular.js markupclear <body>bootstrap angularforeach link in links: htmlResponse = GET link parse htmlResponse populate view modelEnable hijax for add and move forms
  27. 27. (app.js)renderWeb = function(){ return host.contains(":9200")};(server template)<% if(renderWeb) { %> <script>…</script> <link href="/css/mobile.css" … /><% } %>

×