web development: you’re (still) doing it wrong - goto...
TRANSCRIPT
Web Development:You’re (Still) Doing it Wrong
Stefan Tilkov | innoQ | @stilkov
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
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
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
<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
$("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
$('.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
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
ApplicationBrowser
GET /
application/jsonFilter
GET /
text/html
text/html GET / application/json
JS-to-HTML
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
Use of browser features
General web affinity
Separation of concerns
Front-end integration
Technology independence
SEO
ROCA: Good reasons
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
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