HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
2 likes•3,719 views
The document discusses using HTML hypermedia APIs and adaptive web design (AWD) together to build web applications that scale across devices. HTML hypermedia APIs allow building web APIs that return HTML, enabling rich clients without native apps, while AWD makes the web work across browsers by conditionally loading content. The combination is suggested to be a perfect way to scale app development and make the web work on all browsers.
![(client.min.js)
links = $("#links a[rel!=index]");
addForm = $("form.new");
load template containing angular.js markup
clear <body>
bootstrap angular
foreach link in links:
htmlResponse = GET link
parse htmlResponse
populate view model
Enable hijax for add and move forms](https://image.slidesharecdn.com/htmlhypermediaapisandadaptivewebdesign-nordicapis-130321024645-phpapp02/85/HTML-Hypermedia-APIs-and-Adaptive-Web-Design-Nordic-APIs-32-320.jpg)
HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
- 2. @gustaf_nk
- 4. How to scale development of apps? How to make our web work on every browser?
- 5. How to scale development of apps? => HTML Hypermedia APIs How to make our web work on every browser? => AWD HTML Hypermedia APIs + AWD => Perfect combo!
- 6. RestBugs fork: HTML Hypermedia API + Adaptive Web Design https://github.com/gustafnk/RestBugs
- 7. iOS Android … … … Web ? API Store
- 8. iOS Android … … … Web ? API Store
- 12. Hypermedia controls (read + write) Old, standardized, everybody knows it Jon Moore Good tooling support (server + clients) http://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html
- 13. <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>
- 14. HTML Hypermedia APIs Mobile first “Minimalistic HTML”
- 15. HTML Hypermedia APIs + Mobile web
- 16. Mobile web Desktop web AWD “Modern mobile” …
- 17. Responsive Web Design Unobtrusive JavaScript Delayed content loading Hijax Bundling AJAX requests Conditionally loaded content Feature detection Performance HTML5 Navigation Timing http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design
- 18. “An escalator can never break: it can only become stairs.” – Mitch Hedberg
- 20. Same logical endpoint Native apps (80/20) Web browsers HTML Hypermedia API + AWD Enhanced web No application logic Application logic
- 22. (app.js) renderWeb = function(){ return host.contains(":9200") }; POST /bugs: … if(renderWeb()) redirect to index page else return 201 Created;
- 24. • How to scale development of apps? => HTML Hypermedia APIs • How to make our web work on every browser? => AWD HTML Hypermedia APIs + AWD => Perfect combo!
- 25. Same logical endpoint Native apps (80/20) Web browsers HTML Hypermedia API + AWD Enhanced web No application logic Application logic
- 26. http://www.amazon.com/Building-Hypermedia-APIs-HTML5-Node/dp/1449306578 http://easy-readers.net/books/adaptive-web-design
- 27. “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
- 31. (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()
- 32. (client.min.js) links = $("#links a[rel!=index]"); addForm = $("form.new"); load template containing angular.js markup clear <body> bootstrap angular foreach link in links: htmlResponse = GET link parse htmlResponse populate view model Enable hijax for add and move forms
- 33. (app.js) renderWeb = function(){ return host.contains(":9200") }; (server template) <% if(renderWeb) { %> <script>…</script> <link href="/css/mobile.css" … /> <% } %>