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 fj rst, 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 De fj ne a protocol so it can work with any server Allow it to mix services from di fg erent backends De fj 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 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
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 Thursday 17 October 13
ROCA (Resource-oriented Client Architecture) Thursday 17 October 13
Make your HTML semantic Thursday 17 October 13
Content Layout HTML CSS 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
Operations WSDL WS-* XML SOAP Parameters Service Interface Messages Service Logic Business Rules Data Access Resources HTTP Data JSON XML Hypermedia Representations Thursday 17 October 13
Client Logic Service Interface Service Interface Thursday 17 October 13
Client Logic Service Interface Service Interface Thursday 17 October 13
Client Logic Service Interface Service Interface Thursday 17 October 13
Presentation Logic Orchestration Logic Service Interface Service Interface Thursday 17 October 13
Presentation Logic Orchestration Logic Orchestration Logic Thursday 17 October 13
Presentation Logic Business Logic Business 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 href="/some-resource" class="whatever"> Some Link </a> + $("a.whatever").click(function() { doSomething(this.href); }); 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
<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> $('.multiselect', context).each(function() { $(this).multiselect({ selectedList: 2, checkAllText: "Alle", uncheckAllText: "Keinen" }).multiselectfilter({label:"", width:"200px"}); }); Thursday 17 October 13
Content Layout HTML CSS Thursday 17 October 13
Content Layout HTML CSS Behavior JavaScript Thursday 17 October 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 ... Thursday 17 October 13
Or: Just go the SPA way … Thursday 17 October 13
GET / Browser Filter Application application/json GET / text/html GET / application/json Google text/html JS-to-HTML Thursday 17 October 13
Thursday 17 October 13
Use URIs to identify a single meaningful concept Thursday 17 October 13
http:/ /.../A A Thursday 17 October 13
http:/ /.../A B ? A C Thursday 17 October 13
http:/ /.../B http:/ /.../A http:/ /.../C B A C b c + AJAX + CSS Thursday 17 October 13
http:/ /.../A B A C 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
Single Page Apps: Good reasons Pure JavaScript Programming Model Server-side data API “Closed”, desktop-style app Browser as portable runtime platform O fg line capability Thursday 17 October 13
Single Page Apps: Bad reasons “That’s how you do it in 2013” “Progressive enhancement is dead” Required for modern, interactive UIs Thursday 17 October 13
ROCA: Bad reasons RESTfulness Accessibility Thursday 17 October 13
ROCA: Good reasons Use of browser features General web a ffj nity Separation of concerns Front-end integration Technology independence SEO Thursday 17 October 13
In summary … Thursday 17 October 13
Recommend
More recommend
