Progressive Web Components
Frederik Dohr, @fnd
Stefan Tilkov, @stilkov
GOTO Berlin 2016
Slide 2
Slide 2 text
History repeating …
CORBA
Web
WS-*
REST
Slide 3
Slide 3 text
What’s the client side analogy?
Slide 4
Slide 4 text
“Web service”1)
> Use HTTP as transport
> Ignore verbs
> Ignores URIs
> Expose single “endpoint”
> Fails to embrace the Web
1) in the SOAP/WSDL sense
> Uses browser as runtime
> Ignores forward, back, refresh
> Does not support linking
> Exposes monolithic “app”
> Fails to embrace the browser
2) built as a careless SPA
“Web app”2)
Slide 5
Slide 5 text
Desktop-style single-page apps:
The browser’s WS-*?
Slide 6
Slide 6 text
Assumption:
JS-centric web apps can
be as good as native apps
They shouldn’t be as bad!
Slide 7
Slide 7 text
Simple two-step secret to improving the performance of any website,
according to Maciej Ceglowski (@baconmeteor):
“1. Make sure that the most important
elements of the page download and
render first.
2. Stop there.”
http://idlewords.com/talks/website_obesity.htm
The web-native way of distributing logic
Process Flow
Presentation
Domain Logic
Data
Server
Client > Rendering, layout, styling
on an unknown client
> Logic & state machine on server
> Client user-agent extensible via
code on demand
Framework?
We don’t need no stinking framework
Maybe we do
Slide 12
Slide 12 text
Framework benefits
folklore
architecture opinion
community
skills
components
component model
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
SPAs : web development :: Trump : democracy
Slide 15
Slide 15 text
Any sufficiently complicated JavaScript client application
contains an ad-hoc, informally-specified, bug-ridden,
slow implementation of half a browser.
— Stefan Tilkov, with apologies to Phillip Greenspun
Slide 16
Slide 16 text
Hard to put into words how utterly broken JS-first web
development is. So many parts of the system work
against you when you take the reins.
— Alex Russell (@slightlylate)
Slide 17
Slide 17 text
Browser Platform
Component
JavaScript Framework
Component Component Component
date picker
task list
shopping cart
media player
Application
Component
Browser Platform
Component
Component Component
Glue Code
HTML
JS
CSS
HTML
JS
CSS
HTML
JS
CSS
HTML
JS
CSS
✓
Progressive Enhancement
Slide 34
Slide 34 text
Component
Browser Platform
Component
Component Component
Glue Code
HTML
JS
CSS
HTML
JS
CSS
HTML
JS
CSS
HTML
JS
CSS
✓
Progressive Enhancement
Progressive enhancement is not about dealing with old
browsers, it's about dealing with new browsers.
— Jeremy Keith (@adactio)
customElements.define("task-list", TaskList);
class TaskList extends HTMLElement {}
Slide 42
Slide 42 text
customElements.define("task-list", TaskList);
class TaskList extends HTMLElement {
constructor() { // element created or upgraded
super();
…
}
connectedCallback() { // element inserted into the DOM
…
}
disconnectedCallback() { // element removed from the DOM
…
}
}
Backend platform goals
> As few assumptions as possible
> No implementation dependencies
> Small interface surface
> Based on standards
> Parallel development
> Independent deployment
> Autonomous operations
Backend Platform
Slide 53
Slide 53 text
What’s the frontend platform analogy?
> As few assumptions as possible
> No implementation dependencies
> Small interface surface
> Based on standards
> Parallel development
> Independent deployment
> Autonomous operations
Backend Platform
Frontend Platform
Slide 54
Slide 54 text
The browser as a platform
> Independent applications
> Loosely coupled
> Separately deployable
> Based on standard platform
> Updated on the fly
> Any device
Backend Platform
Frontend Platform
Slide 55
Slide 55 text
Summary
Slide 56
Slide 56 text
Embracing the browsers
constraints provides benefits
Slide 57
Slide 57 text
JS Frameworks provide a
proprietary architecture
Slide 58
Slide 58 text
Web components offer a
standardized way to get the best
of both worlds
Slide 59
Slide 59 text
Frederik Dohr
fnd@innoq.com
innoQ Deutschland GmbH
Krischerstr. 100
40789 Monheim am Rhein
Germany
Phone: +49 2173 3366-0
innoQ Schweiz GmbH
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
Ludwigstr. 180E
63067 Offenbach
Germany
Phone: +49 2173 3366-0
Kreuzstraße 16
80331 München
Germany
Phone: +49 2173 3366-0
Thank you – that’s
all we have.
@fnd
Stefan Tilkov
stefan.tilkov@innoq.com
@stilkov