progressive web components · 2016-11-17 · progressive web components ... be as good as native...

Progressive Web Components

Frederik Dohr, @fndStefan Tilkov, @stilkov

GOTO Berlin 2016

History repeating …

CORBAWeb

WS-*REST

What’s the client side analogy?

“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)

Desktop-style single-page apps: The browser’s WS-*

Assumption: JS-centric web apps can

be as good as native apps

They shouldn’t be as bad!

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

JavaScript framework tax

bloatcomplexity

dependency

technical debt

The web-native way of distributing logic

Process Flow

Presentation

Domain Logic

Data

Server

Client > Rendering, layout, stylingon an unknown client

> Logic & state machine on server

> Client user-agent extensible viacode on demand

ROCA: Resource-oriented Client Architecture http://roca-style.org

Framework?

We don’t need no stinking framework

Maybe we do

Framework benefits

folklorearchitecture opinion

communityskills

components

component model

SPAs : web development :: Trump : democracy

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

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)

Browser Platform

Component

JavaScript Framework

Component Component Component

date pickertask list

shopping cart

media player

Application

<video src="bunny.mp4" controls> <track kind="subtitles" …> </video>

play / pause

.play() / .pause()

source: Big Buck Bunny

The browser is the framework

#UseThePlatform

Browser Platform

Component

Application


Component Component Component

😱😱

Browser Platform

Application


Component Component

Browser Platform

ComponentComponent Component Component

Application

Component

Component

<audio src="meow.mp4" controls>

Browser Platform

ComponentComponent Component

Application

Component

Browser Platform


Glue Code

Application

<input type="text" class="date">

$("input.date").datepicker();

<div class="tabs">

<ul>

<li> <a href="#about">About</a>

…

<li> <a href="#comments">Discussion</a>

</ul>

<p id="about">lorem ipsum dolor sit amet</p>

…

<ol id="comments"> … </ol>

</div>

$(".tabs").tabs();

<div class="tabs">

<ul>


…


</ul>


…


</div>

$(".tabs").tabs();

🎉 Unobtrusive JavaScript 🎉

Component

Browser Platform


Glue Code

HTMLJSCS

S

HTML

JSCSS

HTML

JSCSS

HTML

JSCSS

✓

👌 Progressive Enhancement 👍

Component

Browser Platform


Glue Code

HTMLJSCS

S

HTML

JSCSS

HTML

JSCSS

HTML

JSCSS

✓

👌 Progressive Enhancement 👍

Progressive enhancement is not about dealing with old browsers, it's about dealing with new browsers.

— Jeremy Keith (@adactio)

<div class="tabs">

<ul>


…


</ul>


…


</div>

$(".tabs").tabs();

<tab-nav>

<ul>


…


</ul>

</tab-nav>


…


$(".tabs").tabs();

<tab-nav>

<ul>


…


</ul>

</tab-nav>

<tab-contents>


…


</tab-contents>

$(".tabs").tabs();

<ul is="tab-nav">


…


</ul>

<tab-contents>


…


</tab-contents>

$(".tabs").tabs();

<ul is="tab-nav">


…


</ul>

<tab-contents>


…


</tab-contents>

📄 Custom Elements📄

customElements.define("task-list");

customElements.define("task-list", TaskList);

class TaskList extends HTMLElement {}


class TaskList extends HTMLElement { constructor() { // element created or upgraded super(); … }

connectedCallback() { // element inserted into the DOM … }

disconnectedCallback() { // element removed from the DOM … } }


class TaskList extends HTMLElement { …

attributeChangedCallback(attrName, oldVal, newVal) { … }

static get observedAttributes() { return ["theme"]; } }



connectedCallback() { let obs = new MutationObserver(this.onChange); obs.observe(this, { childList: true, subtree: true }); }

…

onChange() { … } }



connectedCallback() { let shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.innerHTML = "<canvas></canvas>"; … }

… }

📄 Shadow DOM📄

Component

Browser Platform


Glue Code

Component

Browser Platform


Glue Code

📄 Custom Elements📄

Boring Is Good

Component

Browser Platform Component

Component

Glue Code

Component

image source: Openclipart/atlantis

Component

Browser Platform Component

Component

Glue Code

Component

image source: Openclipart/atlantis

Style Guides

&

Component Libraries

Wrap-up

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

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

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

Summary

Embracing the browsers constraints provides benefits

JS Frameworks provide a proprietary architecture

Web components offer a standardized way to get the best

of both worlds

Frederik Dohr [email protected]

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 0116www.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 1680331 München Germany Phone: +49 2173 3366-0

Thank you – that’s all we have.

@fnd

Stefan [email protected]

@stilkov

http://www.innoq.com

mailto:[email protected]?subject=

progressive web components · 2016-11-17 · progressive web components ... be as good as native...

Documents