Gustaf Nilsson Kotte

Combining HTML Hypermedia APIs and Adaptive Web Design

Platform fragmentation

HTML Hypermedia APIs

Capability fragmentation

Progressive Enhancement

The API and the web can be the same thing!

Hypermedia controls, i.e. <a>, <link>, <form>

Rich semantics, i.e. <ul>, <ol>, <dl>

Enhance using micro format style

Already standardized

Everybody knows it

Good tooling support

For native apps: embed in a ”web view”

Q: Only GET/POST?

A: No problem for Fielding.

Q: What about size?

A: Gzip is your friend.

Q: What about parsing?

A: Use existing libraries for your platform.

<div class="message-block"><div id="messages"><ul class="single">

<li><span class="message-text">Message text</span><span class="single">@</span><a rel="message" href="..." title="message"><span class="date-time">2012-01-01</span>

</a><span class="single">by</span><a rel="user" href="..." title="A title"><span class="user-text">User text</span>

</a></li><!-- ... ->

</ul></div>

</div>

<!–- Example, to get all user-texts: $("#messages .user-text") -->

”Building Hypermedia APIs with HTML5

and Node”, Mike Amundsen

”Designing Hypermedia APIs”, Steve Klabnik

Most consumers will be in the low-to-middle priced markets

Three iOS devices – 40%

3112 other devices– 60%, up to 3% each

Now: Screen size fragmentation.

Future: ?

Mobile first

Content first

Use-cases (or stories) first

(What makes you unique?)

Responsive Web Design

• Media queries

• Fluid layouts

Delayed and conditionally loaded content

Bundle AJAX requests (think hard about caching though)

Connection speed hint using the HTML5 Navigation Timing API (?)

”Adaptive Web Design - Crafting Rich Experiences with Progressive Enhancement”, Aaron Gustafson

“Progressive Enhancement 2.0”, Nicolas Zakas

“Resource-Oriented Client Architecture”, http://roca-style.org

<div class="message-block"><div id="messages"><ul class="single">

<li><span class="message-text">Message text</span><span class="single">@</span><a rel="message" href="..." title="message"><span class="date-time">2012-01-01</span>

</a><span class="single">by</span><a rel="user" href="..." title="A title"><span class="user-text">User text</span>

</a></li><!-- ... ->

</ul></div>

</div>

<div class="message-block"><div id="messages"><ul class="single">

<li><span class="message-text">Message text</span><span class="single">@</span><a rel="message" href="..." title="message"><span class="date-time">2012-01-01</span>

</a><span class="single">by</span><a rel="user" href="..." title="A title"><span class="user-text">User text</span>

</a></li><!-- ... ->

</ul></div>

</div>

Separate API and web on URI level

Follow the HTTP specification

Web menu with server-side include

… (?)

Parallel implementation

Platform fragmentation

HTML Hypermedia APIs

Capability fragmentation

Progressive Enhancement

The API and the web can be the same thing!

Why supporting so many different type of platforms/browsers?

Data sent with <form> POSTs is flat – conventions needed?

How about mapping between <form> fields and native forms?

How to integrate ”web views” in a good way?

What about offline support for these views?

How does this relate to testing?

How does this relate to design?

How does this relate to ideas in Lean Startup?