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 first, 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 Define a protocol so it can work with any server Allow it to mix services from different backends Define 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

Server-side components Avoid HTML, JS, CSS Trade Familiarity for Complexity Session-centric ROCA Server-side POSH Client-side components Web-centric Single Page Apps Advanced Client Frameworks 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

CSS HTML Content Layout

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="#"

• nclick="doSomething();">

Some Link </a>

Wednesday, March 6, 13

<a href="/some-resource"

• nclick="doSomething(this.href);">

Some Link </a>

Wednesday, March 6, 13

<a href="/some-resource" class="whatever"> Some Link </a>

Wednesday, March 6, 13

$("a.whatever").click(function() { doSomething(this.href); });

+

<a href="/some-resource" class="whatever"> Some Link </a>

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

CSS HTML Content Layout

Wednesday, March 6, 13

JavaScript CSS HTML Content Behavior Layout

Wednesday, March 6, 13

JS component JS glue code HTML

Events Methods

Component 2 Component 3 ... Layout/CSS

styles styles

Server / Backend

Ajax

initializes Base Markup responds with

Wednesday, March 6, 13

Use URIs to identify a single meaningful concept

Wednesday, March 6, 13

A

http:/ /.../A

Wednesday, March 6, 13

A B C

http:/ /.../A

?

Wednesday, March 6, 13

A

http:/ /.../A

C

http:/ /.../C

B

http:/ /.../B

b c

+ AJAX + CSS

Wednesday, March 6, 13

A B C

http:/ /.../A

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

HTML Page

Label Label Label Label Label Label Label Label Submit

Wednesday, March 6, 13

Browser Server

Label Label Label Next Label Label Label Next Label Label Finish

Session State

Wednesday, March 6, 13

Browser Server

Label Label Label Next Label Label Label Next Label Label Finish

HTML Page

Label Label Label Label Label Label Label Label Submit

Client State

Wednesday, March 6, 13

Server

HTML Page

Label Label Label Label Label Label Label Label Submit

HTML Page

Label Label Label Label Label Label Label Label Submit

HTML Page

Label Label Label Label Label Label Label Label Submit

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

interface Resource { Resource(URI u) Response get() Response post(Request r) Response put(Request r) Response delete() Link[] links() Form[] forms() }

generic specific

class MyResource implements Resource { … Response post(Request r) { … } … }

Wednesday, March 6, 13

Severe Tunneling Fixation

Wednesday, March 6, 13

simple complex easy 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 fighting it

Wednesday, March 6, 13

Thank you!

Q&A

Stefan Tilkov stefan.tilkov@innoq.com http:/ /www.innoq.com/blog/st/ @stilkov Phone: +49 170 471 2625

innoQ Deutschland GmbH http:/ /www.innoq.com

• Krischerstr. 100

40789 Monheim am Rhein Germany Phone: +49 2173 3366-0 innoQ Schweiz GmbH info@innoq.com

• Gewerbestr. 11

CH-6330 Cham Switzerland Phone: +41 41 743 0116

Wednesday, March 6, 13