HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

  • Published on
    28-Jan-2015

  • View
    105

  • Download
    2

DESCRIPTION

 

Transcript

1. Gustaf Nilsson Kotte 2. @gustaf_nk 3. How to scale development of apps?How to make our web work on every browser? 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. RestBugs fork: HTML Hypermedia API + Adaptive Web Designhttps://github.com/gustafnk/RestBugs 6. iOS Android Web ?APIStore 7. iOS Android Web ?APIStore 8. http://martinfowler.com/articles/richardsonMaturityModel.html 9. Jon Moorehttp://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html 10. Hypermedia controls (read + write)Old, standardized, everybody knows itJon MooreGood tooling support (server + clients)http://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html 11. Nordic APIs bugThe description of the bug 12. HTML Hypermedia APIs Mobile firstMinimalistic HTML 13. HTML Hypermedia APIs + Mobile web 14. Mobile web Desktop web AWD Modern mobile 15. Responsive Web DesignUnobtrusive JavaScriptDelayed content loading Hijax Bundling AJAX requestsConditionally loaded contentFeature detectionPerformance HTML5 Navigation Timing http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design 16. An escalator can never break: itcan only become stairs. Mitch Hedberg 17. Same logical endpointNative apps (80/20)Web browsersHTML Hypermedia API+AWDEnhanced webNo application logicApplication logic 18. www.example.comapi.example.com 19. (app.js)renderWeb = function(){ return host.contains(":9200")};POST /bugs:if(renderWeb())redirect to index pageelsereturn 201 Created; 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. Same logical endpointNative apps (80/20)Web browsersHTML Hypermedia API+AWDEnhanced webNo application logicApplication logic 22. http://www.amazon.com/Building-Hypermedia-APIs-HTML5-Node/dp/1449306578http://easy-readers.net/books/adaptive-web-design 23. Progressive Enhancement 2.0, Nicolas ZakasResource-Oriented Client Architecturehttp://www.webmonkey.com/2012/03/video-progressive-enhancement-2-0 http://roca-style.org 24. @gustaf_nkhttps://github.com/gustafnk/RestBugshttp://www.slideshare.net/GustafKotte 25. (Inline javascript code in responses)using harvey.js // polyfill for media queriesconfiguration "large screen":on:$.getScript("/js/client.min.js");$.get("/css/client.min.css", function(css) {});off:location.reload() 26. (client.min.js)links = $("#links a[rel!=index]");addForm = $("form.new");load template containing angular.js markupclear bootstrap angularforeach link in links:htmlResponse = GET linkparse htmlResponsepopulate view modelEnable hijax for add and move forms 27. (app.js)renderWeb = function(){ return host.contains(":9200")};(server template)