Web Development:You’re (Still) Doing it Wrong
Stefan Tilkov | innoQ | @stilkov
Thursday 17 October 13
Annoying your users
Thursday 17 October 13
Forbid the use of the back and forward buttons
Thursday 17 October 13
Send them to the home page when they hit “refresh”
Thursday 17 October 13
… or ensure the browser pops up a warning window
Thursday 17 October 13
Make sure they can’t open a second browser window
Thursday 17 October 13
Let them see UI chrome and ads first, content last
Thursday 17 October 13
Make sure they can’t bookmark or send a link
Thursday 17 October 13
Don’t let Google index anything
Thursday 17 October 13
Ensure disabling JavaScript gives them a blank page
Thursday 17 October 13
Things that seem like a good idea, but aren’t
Thursday 17 October 13
Fix HTTP’s basic flaw: its statelessness
Thursday 17 October 13
Go beyond the page model because we’re r/w now
Thursday 17 October 13
Avoid CSS because who understands how it works?
Thursday 17 October 13
Avoid HTML because that’s so 20th century
Thursday 17 October 13
Avoid JavaScript because it’s not for real programmers
Thursday 17 October 13
Go beyond Client/Server and introduce bidirectional, binary communication
Thursday 17 October 13
Let’s take a step back
Thursday 17 October 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
Thursday 17 October 13
We’re not done yet
Thursday 17 October 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
Thursday 17 October 13
How hard can it be?
Thursday 17 October 13
Competing with the Web may not be the best idea
Thursday 17 October 13
My personal theory as to why things suck so much:
Thursday 17 October 13
1. Hiding “Details”
Thursday 17 October 13
2. Preserving Expertise
Thursday 17 October 13
3. Misjudging Skills
Thursday 17 October 13
Web-centric web UIs
Thursday 17 October 13
Server-side components
Avoid HTML, JS, CSSTrade Familiarity for Complexity
Session-centric
ROCAServer-side POSH
Client-side componentsWeb-centric
Single PageApps
Advanced Client FrameworksServer-side REST APIs
Thursday 17 October 13
ROCA(Resource-oriented Client Architecture)
Thursday 17 October 13
Make your HTML semantic
Thursday 17 October 13
CSSHTML
Content Layout
Thursday 17 October 13
Minimal load times
Accessibility
Self-descriptiveness
Readability
Thursday 17 October 13
“HTML?”
“I don’t do that –I’m a programmer.”
Thursday 17 October 13
<order> <shippingAddress>Paris, France</shippingAddress> <items> <item> <productDescription>iPad</productDescription> <quantity>1</quantity> <price>699</price> </item> </items> <link href="http://om.example.com/cancellations" rel="cancel" /> <link href="https://om.example.com/orders/123/payment" rel="payment" /> </order>
Thursday 17 October 13
<html xmlns="http://www.w3.org/1999/xhtml"> <body> <div class="order"> <p class="shippingAddress">Paris, France</p> <ul class="items"> <li class="item"> <p class="productDescription">iPad</p> <p class="quantity">1</p> <p class="price">699</p> </li> </ul> <a href="http://om.example.com/cancellations" rel="cancel">cancel</a> <a href="https://om.example.com/orders/123/payment" rel="payment">payment</a> </div> </body> </html>
Thursday 17 October 13
Data
Data Access
Business Rules
Service Logic
Service Interface
WSDLSOAP WS-* XML
Operations
Parameters
Messages
HTTPJSON XML
Resources
Hypermedia
Representations
Thursday 17 October 13
Service Interface Service Interface
Client Logic
Thursday 17 October 13
Service Interface Service Interface
Client Logic
Thursday 17 October 13
Service Interface Service Interface
Client Logic
Thursday 17 October 13
Service Interface Service Interface
Presentation Logic
Orchestration Logic
Thursday 17 October 13
Orchestration Logic Orchestration Logic
Presentation Logic
Thursday 17 October 13
Business Logic Business Logic
Presentation Logic
Thursday 17 October 13
Use Javascript unobtrusively
Thursday 17 October 13
<a href="javascript:doSomething();"> Some Link</a>
Thursday 17 October 13
<a href="#" onclick="doSomething();"> Some Link</a>
Thursday 17 October 13
<a href="/some-resource" onclick="doSomething(this.href);"> Some Link</a>
Thursday 17 October 13
<a href="/some-resource" class="whatever"> Some Link</a>
Thursday 17 October 13
$("a.whatever").click(function() { doSomething(this.href);});
+
<a href="/some-resource" class="whatever"> Some Link</a>
Thursday 17 October 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();
+
Thursday 17 October 13
Thursday 17 October 13
$('.multiselect', context).each(function() { $(this).multiselect({ selectedList: 2, checkAllText: "Alle", uncheckAllText: "Keinen" }).multiselectfilter({label:"", width:"200px"});});
<div class="filter-column"> <label for="project">Project</label> <select class="multiselect" id="project" name="project" size="5" multiple> <option>DISCOVER</option> <option>IMPROVE</option> <option >MAGENTA</option> <option>ROCA</option> <option>ROCKET</option> </select></div>
Thursday 17 October 13
CSSHTML
Content Layout
Thursday 17 October 13
JavaScript
CSSHTML
Content
Behavior
Layout
Thursday 17 October 13
JS component
JS glue code
HTML
EventsMethods
Component 2 Component 3 ...
Layo
ut/C
SS
styles
styles
Server / Backend
Ajax
initializes
Base Markup
respondswith
Thursday 17 October 13
Or: Just go the SPA way …
Thursday 17 October 13
ApplicationBrowser
Google
GET /
application/jsonFilter
GET /
text/html
text/html GET / application/json
JS-to-HTML
Thursday 17 October 13
Thursday 17 October 13
Use URIs to identify a single meaningful concept
Thursday 17 October 13
A
http://.../A
Thursday 17 October 13
A
B
C
http://.../A
?Thursday 17 October 13
A
http://.../A
C
http://.../C
B
http://.../B
b c
+ AJAX + CSS
Thursday 17 October 13
A
B
C
http://.../A
Thursday 17 October 13
Don’t disable Browser Features – use them
Thursday 17 October 13
Multiple tabs & windows
Bookmarks
Back/Forward/Refresh
Personalization
Menus
Thursday 17 October 13
ROCA
http://roca-style.org/
Thursday 17 October 13
Now get serious, please. When to use what?
Thursday 17 October 13
Pure JavaScript Programming Model
Server-side data API
“Closed”, desktop-style app
Browser as portable runtime platform
Offline capability
Single Page Apps: Good reasons
Thursday 17 October 13
“That’s how you do it in 2013”
“Progressive enhancement is dead”
Required for modern, interactive UIs
Single Page Apps: Bad reasons
Thursday 17 October 13
RESTfulness
Accessibility
ROCA: Bad reasons
Thursday 17 October 13
Use of browser features
General web affinity
Separation of concerns
Front-end integration
Technology independence
SEO
ROCA: Good reasons
Thursday 17 October 13
In summary …
Thursday 17 October 13
Not everything new is good, not everything old is bad.
(Surprise.)
Thursday 17 October 13
Don’t repeat the mistakes we used to make on the server
on the client.
Thursday 17 October 13
Learning details of how the web works might be time
well spent.
Thursday 17 October 13
Working with the web is a lot easier than fighting it.
Thursday 17 October 13
Q&AStefan Tilkov, @[email protected]: +49 170 471 2625
innoQ Deutschland GmbHKrischerstr. 10040789 Monheim am RheinGermanyPhone: +49 2173 3366-0
innoQ Schweiz GmbH
[email protected]
Gewerbestr. 11CH-6330 ChamSwitzerlandPhone: +41 41 743 0116
www.innoq.com
Ohlauer Straße 4310999 BerlinGermanyPhone: +49 2173 3366-0
Robert-Bosch-Straße 7GermanyPhone: +49 2173 3366-0
Radlkoferstraße 2D-81373 MünchenTelefon +49 (0) 89 741185-270
Thursday 17 October 13