Web Development:
You’re (Still) Doing it Wrong
Stefan Tilkov | innoQ | @stilkov
Thursday 17 October 13
Slide 2
Slide 2 text
Annoying your users
Thursday 17 October 13
Slide 3
Slide 3 text
Forbid the use of the back
and forward buttons
Thursday 17 October 13
Slide 4
Slide 4 text
Send them to the home page
when they hit “refresh”
Thursday 17 October 13
Slide 5
Slide 5 text
… or ensure the browser
pops up a warning window
Thursday 17 October 13
Slide 6
Slide 6 text
Make sure they can’t open a
second browser window
Thursday 17 October 13
Slide 7
Slide 7 text
Let them see UI chrome and
ads first, content last
Thursday 17 October 13
Slide 8
Slide 8 text
Make sure they can’t
bookmark or send a link
Thursday 17 October 13
Slide 9
Slide 9 text
Don’t let Google index
anything
Thursday 17 October 13
Slide 10
Slide 10 text
Ensure disabling JavaScript
gives them a blank page
Thursday 17 October 13
Slide 11
Slide 11 text
Things that seem like a good
idea, but aren’t
Thursday 17 October 13
Slide 12
Slide 12 text
Fix HTTP’s basic flaw: its
statelessness
Thursday 17 October 13
Slide 13
Slide 13 text
Go beyond the page model
because we’re r/w now
Thursday 17 October 13
Slide 14
Slide 14 text
Avoid CSS because who
understands how it works?
Thursday 17 October 13
Slide 15
Slide 15 text
Avoid HTML because that’s
so 20th century
Thursday 17 October 13
Slide 16
Slide 16 text
Avoid JavaScript because it’s
not for real programmers
Thursday 17 October 13
Slide 17
Slide 17 text
Go beyond Client/Server and
introduce bidirectional,
binary communication
Thursday 17 October 13
Slide 18
Slide 18 text
Let’s take a step back
Thursday 17 October 13
Slide 19
Slide 19 text
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
Slide 20
Slide 20 text
We’re not done yet
Thursday 17 October 13
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
How hard can it be?
Thursday 17 October 13
Slide 23
Slide 23 text
Competing with the Web may
not be the best idea
Thursday 17 October 13
Slide 24
Slide 24 text
My personal theory as to
why things suck so much:
Thursday 17 October 13
Slide 25
Slide 25 text
1. Hiding “Details”
Thursday 17 October 13
Slide 26
Slide 26 text
2. Preserving Expertise
Thursday 17 October 13
Slide 27
Slide 27 text
3. Misjudging Skills
Thursday 17 October 13
Slide 28
Slide 28 text
Web-centric web UIs
Thursday 17 October 13
Slide 29
Slide 29 text
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
Thursday 17 October 13
Slide 30
Slide 30 text
ROCA
(Resource-oriented Client Architecture)
Thursday 17 October 13
Slide 31
Slide 31 text
Make your HTML semantic
Thursday 17 October 13
Slide 32
Slide 32 text
CSS
HTML
Content Layout
Thursday 17 October 13
Slide 33
Slide 33 text
Minimal load times
Accessibility
Self-descriptiveness
Readability
Thursday 17 October 13
Slide 34
Slide 34 text
“HTML?”
“I don’t do that –
I’m a programmer.”
Thursday 17 October 13
Data
Data Access
Business Rules
Service Logic
Service Interface
WSDL
SOAP WS-* XML
Operations
Parameters
Messages
HTTP
JSON XML
Resources
Hypermedia
Representations
Thursday 17 October 13
Slide 38
Slide 38 text
Service Interface Service Interface
Client Logic
Thursday 17 October 13
Slide 39
Slide 39 text
Service Interface Service Interface
Client Logic
Thursday 17 October 13
Slide 40
Slide 40 text
Service Interface Service Interface
Client Logic
Thursday 17 October 13
Slide 41
Slide 41 text
Service Interface Service Interface
Presentation Logic
Orchestration Logic
Thursday 17 October 13
Slide 42
Slide 42 text
Orchestration Logic Orchestration Logic
Presentation Logic
Thursday 17 October 13
Slide 43
Slide 43 text
Business Logic Business Logic
Presentation Logic
Thursday 17 October 13
Slide 44
Slide 44 text
Use Javascript unobtrusively
Thursday 17 October 13
JavaScript
CSS
HTML
Content
Behavior
Layout
Thursday 17 October 13
Slide 55
Slide 55 text
JS component
JS glue code
HTML
Events
Methods
Component 2 Component 3 ...
Layout/CSS
styles
styles
Server / Backend
Ajax
initializes
Base
Markup
responds
with
Thursday 17 October 13
Slide 56
Slide 56 text
Or: Just go the SPA way …
Thursday 17 October 13
Slide 57
Slide 57 text
Application
Browser
Google
GET /
application/json
Filter
GET /
text/html
text/html GET / application/json
JS-to-HTML
Thursday 17 October 13
Slide 58
Slide 58 text
Thursday 17 October 13
Slide 59
Slide 59 text
Use URIs to identify a single
meaningful concept
Thursday 17 October 13
Slide 60
Slide 60 text
A
http://.../A
Thursday 17 October 13
Slide 61
Slide 61 text
A
B
C
http://.../A
?
Thursday 17 October 13
Slide 62
Slide 62 text
A
http://.../A
C
http://.../C
B
http://.../B
b c
+ AJAX + CSS
Thursday 17 October 13
Slide 63
Slide 63 text
A
B
C
http://.../A
Thursday 17 October 13
Slide 64
Slide 64 text
Don’t disable Browser
Features – use them
Thursday 17 October 13
Slide 65
Slide 65 text
Multiple tabs & windows
Bookmarks
Back/Forward/Refresh
Personalization
Menus
Thursday 17 October 13
Slide 66
Slide 66 text
ROCA
http://roca-style.org/
Thursday 17 October 13
Slide 67
Slide 67 text
Now get serious, please.
When to use what?
Thursday 17 October 13
Slide 68
Slide 68 text
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
Slide 69
Slide 69 text
“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
Slide 70
Slide 70 text
RESTfulness
Accessibility
ROCA: Bad reasons
Thursday 17 October 13
Slide 71
Slide 71 text
Use of browser features
General web affinity
Separation of concerns
Front-end integration
Technology independence
SEO
ROCA: Good reasons
Thursday 17 October 13
Slide 72
Slide 72 text
In summary …
Thursday 17 October 13
Slide 73
Slide 73 text
Not everything new is good,
not everything old is bad.
(Surprise.)
Thursday 17 October 13
Slide 74
Slide 74 text
Don’t repeat the mistakes we
used to make on the server
on the client.
Thursday 17 October 13
Slide 75
Slide 75 text
Learning details of how the
web works might be time
well spent.
Thursday 17 October 13
Slide 76
Slide 76 text
Working with the web is a lot
easier than fighting it.
Thursday 17 October 13
Slide 77
Slide 77 text
Q&A
Stefan Tilkov, @stilkov
[email protected]
Phone: +49 170 471 2625
innoQ Deutschland GmbH
Krischerstr. 100
40789 Monheim am Rhein
Germany
Phone: +49 2173 3366-0
innoQ Schweiz GmbH
[email protected]
Gewerbestr. 11
CH-6330 Cham
Switzerland
Phone: +41 41 743 0116
www.innoq.com
Ohlauer Straße 43
10999 Berlin
Germany
Phone: +49 2173 3366-0
Robert-Bosch-Straße 7
Germany
Phone: +49 2173 3366-0
Radlkoferstraße 2
D-81373 München
Telefon +49 (0) 89 741185-270
Thursday 17 October 13