Web Development: Youre Doing it Wrong Stefan Tilkov, innoQ QCon - PowerPoint PPT Presentation

Web Development: You’re Doing it Wrong Stefan Tilkov, innoQ QCon London 2013 Session # 9770 #qconlondon @stilkov Wednesday, March 6, 13

Annoying your users Wednesday, March 6, 13

Forbid the use of the back and forward buttons Wednesday, March 6, 13

Send them to the home page when they hit “refresh” Wednesday, March 6, 13

… or ensure the browser pops up a warning window Wednesday, March 6, 13

Make sure they can’t open a second browser window Wednesday, March 6, 13

Let them see UI chrome and ads fi rst, content last Wednesday, March 6, 13

Make sure they can’t bookmark or send a link Wednesday, March 6, 13

Don’t let Google index anything Wednesday, March 6, 13

Ensure disabling JavaScript gives them a blank page Wednesday, March 6, 13

Things that seem like a good idea, but aren’t Wednesday, March 6, 13

Fix HTTP’s basic flaw: its statelessness Wednesday, March 6, 13

Go beyond the page model because we’re r/w now Wednesday, March 6, 13

Avoid CSS because who understands how it works? Wednesday, March 6, 13

Avoid HTML because that’s so 20th century Wednesday, March 6, 13

Avoid JavaScript because it’s not for real programmers Wednesday, March 6, 13

Extend the client/server model with server push because polling? don’t even … Wednesday, March 6, 13

Let’s take a step back Wednesday, March 6, 13

Let’s build a generic client runtime De fi ne a protocol so it can work with any server Allow it to mix services from di ff erent backends De fi ne a generic, declarative data format Separate content and layout Allow for extensibility with client-side scripting Make it work on any device, with any resolution Wednesday, March 6, 13

We’re not done yet Wednesday, March 6, 13

Standardize it, with (rough) consensus Ensure there are multiple client, server and intermediary implementations to choose from Have every client OS ship with an implementation of the generic client Let every programming environment support it Wednesday, March 6, 13

How hard can it be? Wednesday, March 6, 13

Competing with the Web may not be the best idea Wednesday, March 6, 13

Web-centric web UIs Wednesday, March 6, 13

Avoid HTML, JS, CSS Server-side Trade Familiarity for Complexity components Session-centric Server-side POSH ROCA Client-side components Web-centric Single Page Advanced Client Frameworks Apps Server-side REST APIs Wednesday, March 6, 13

ROCA (Resource-oriented Client Architecture) Wednesday, March 6, 13

Make your HTML semantic Wednesday, March 6, 13

Minimal load times API usage Accessibility Self-descriptiveness Readability Wednesday, March 6, 13

Content Layout HTML CSS Wednesday, March 6, 13

schema.org < div > < h1 >Avatar< /h1 > < span >Director: < span >James Cameron< /span > (born August 16, 1954)< /span > < span >Science fiction< /span > < a href= "../movies/avatar-theatrical-trailer.html"< /a > </div> Wednesday, March 6, 13

schema.org < div itemscope itemtype= "http://schema.org/Movie"> < h1 >Avatar< /h1 > < span >Director: < span >James Cameron< /span > (born August 16, 1954)< /span > < span >Science fiction< /span > < a href= "../movies/avatar-theatrical-trailer.html"< /a > </div> Wednesday, March 6, 13

schema.org < div itemscope itemtype= "http://schema.org/Movie"> < h1 itemprop= "name">Avatar< /h1 > < span >Director: < span itemprop= "director">James Cameron< /span > (born August 16, 1954)< /span > < span itemprop= "genre">Science fiction< /span > < a href= "../movies/avatar-theatrical-trailer.html" itemprop= "trailer">Trailer< /a > </div> Wednesday, March 6, 13

Use Javascript unobtrusively Wednesday, March 6, 13

<a href="javascript:doSomething();"> Some Link </a> Wednesday, March 6, 13

<a href="#" onclick="doSomething();"> Some Link </a> Wednesday, March 6, 13

<a href="/some-resource" onclick="doSomething(this.href);"> Some Link </a> Wednesday, March 6, 13

<a href="/some-resource" class="whatever"> Some Link </a> Wednesday, March 6, 13

<a href="/some-resource" class="whatever"> Some Link </a> + $("a.whatever").click(function() { doSomething(this.href); }); Wednesday, March 6, 13

<div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula ...</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio ...</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat ...</p> </div> + $("#tabs").tabs(); Wednesday, March 6, 13

Wednesday, March 6, 13

Content Layout HTML CSS Wednesday, March 6, 13

Content Layout HTML CSS Behavior JavaScript Wednesday, March 6, 13

Server / Backend responds with styles Base HTML Layout/CSS Markup Ajax initializes JS component styles Methods Events JS glue code Component 2 Component 3 ... Wednesday, March 6, 13

Use URIs to identify a single meaningful concept Wednesday, March 6, 13

http:/ /.../A A Wednesday, March 6, 13

http:/ /.../A B ? A C Wednesday, March 6, 13

http:/ /.../B http:/ /.../A http:/ /.../C B A C b c + AJAX + CSS Wednesday, March 6, 13

http:/ /.../A B A C Wednesday, March 6, 13

Don’t disable Browser Features – use them Wednesday, March 6, 13

Multiple tabs & windows Bookmarks Back/Forward/Refresh Personalization Menus Wednesday, March 6, 13

Put application logic on the server only Wednesday, March 6, 13

Don’t trust your clients RESTful APIs for free Non-browser clients (e.g. Google Crawler) Wednesday, March 6, 13

http:/ /googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html Wednesday, March 6, 13

YOU’RE DOING IT WRONG Wednesday, March 6, 13

Avoid session state Wednesday, March 6, 13

Browser Server Label Label Label Label Label Label Label Label Submit HTML Page Wednesday, March 6, 13

Browser Server Label Label Label Next Session State Label Label Label Next Label Label Finish Wednesday, March 6, 13

Browser Label Label Label Label Label Label Next Label Client Label State Label Server Label Label Label Label Label Submit Next HTML Page Label Label Finish Wednesday, March 6, 13

Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Server Submit Label Label HTML Page Label Label Label Submit Label HTML Page Label Label Label Submit HTML Page Wednesday, March 6, 13

ROCA http:/ /roca-style.org/ Wednesday, March 6, 13

So why don’t we do this? Wednesday, March 6, 13

Obsessive Specialization Disorder Wednesday, March 6, 13

generic interface Resource { Resource(URI u) Response get() Response post(Request r) Response put(Request r) Response delete() Link[] links() Form[] forms() } class MyResource implements Resource { … Response post(Request r) { … } … } specific Wednesday, March 6, 13

Severe Tunneling Fixation Wednesday, March 6, 13

simple easy complex hard Wednesday, March 6, 13

In summary … Wednesday, March 6, 13

Not everything new is good, not everything old is bad. (Surprise.) Wednesday, March 6, 13

Learning details of how the web works might be time well spent Wednesday, March 6, 13

Working with the web is a lot easier than fi ghting it Wednesday, March 6, 13

Thank you! Stefan Tilkov stefan.tilkov@innoq.com http:/ /www.innoq.com/blog/st/ Q&A @stilkov Phone: +49 170 471 2625 innoQ Deutschland GmbH innoQ Schweiz GmbH Krischerstr. 100 Gewerbestr. 11 40789 Monheim am Rhein CH-6330 Cham Germany Switzerland Phone: +49 2173 3366-0 Phone: +41 41 743 0116 http:/ /www.innoq.com info@innoq.com Wednesday, March 6, 13