html hypermedia apis and adaptive web design - nordic apis

33
Gustaf Nilsson Kotte

Upload: gustaf-nilsson-kotte

Post on 28-Jan-2015

128 views

Category:

Documents


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

Gustaf Nilsson Kotte

Page 2: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

@gustaf_nk

Page 3: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
Page 4: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

How to scale development of apps?

How to make our web work on every browser?

Page 5: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

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!

Page 6: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

RestBugs fork: HTML Hypermedia API + Adaptive Web Design

https://github.com/gustafnk/RestBugs

Page 7: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

iOS Android … … Web…

API

Store

?

Page 8: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

iOS Android … … Web…

API

Store

?

Page 9: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

http://martinfowler.com/articles/richardsonMaturityModel.html

Page 10: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
Page 11: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

Jon Moore

http://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html

Page 12: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

http://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html

Jon Moore

Hypermedia controls (read + write)

Old, standardized, everybody knows it

Good tooling support (server + clients)

Page 13: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

<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>

Page 14: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

HTML Hypermedia APIs

Mobile first

“Minimalistic HTML”

Page 15: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

HTML Hypermedia APIs + Mobile web

Page 16: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

Mobile web Desktop webAWD

“Modern mobile”

Page 17: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

Performance

Conditionally loaded content

Delayed content loading

Bundling AJAX requests

Responsive Web Design

Feature detectionHTML5 Navigation Timing

Unobtrusive JavaScript

Hijax

http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design

Page 18: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

“An escalator can never break: it can only become stairs.”

– Mitch Hedberg

Page 19: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
Page 20: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

Native apps (80/20)

Enhanced web

Web browsers

No application logic Application logic

HTML Hypermedia API+

AWD

Same logical endpoint

Page 21: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

www.example.com

api.example.com

Page 22: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

(app.js)

renderWeb = function(){

return host.contains(":9200")

};

POST /bugs:

if(renderWeb())

redirect to index page

else

return 201 Created;

Page 23: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
Page 24: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

• 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!

Page 25: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

Native apps (80/20)

Enhanced web

Web browsers

No application logic Application logic

HTML Hypermedia API+

AWD

Same logical endpoint

Page 26: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

http://www.amazon.com/Building-Hypermedia-APIs-HTML5-Node/dp/1449306578

http://easy-readers.net/books/adaptive-web-design

Page 27: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

“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

Page 28: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
Page 29: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

@gustaf_nk

https://github.com/gustafnk/RestBugs

http://www.slideshare.net/GustafKotte

Page 30: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
Page 31: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

(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()

Page 32: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

(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

Page 33: HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

(app.js)

renderWeb = function(){

return host.contains(":9200")

};

(server template)

<% if(renderWeb) { %>

<script>…</script>

<link href="/css/mobile.css" … />

<% } %>