Progressive Web Components GOTO Berlin 2016 Frederik Dohr, @fnd - - PowerPoint PPT Presentation

Progressive Web Components

Frederik Dohr, @fnd
 Stefan Tilkov, @stilkov GOTO Berlin 2016

History repeating …

CORBA Web 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 fjrst.

• 2. Stop there.”

http://idlewords.com/talks/website_obesity.htm

JavaScript framework tax

bloat complexity dependency technical debt

The web-native way of distributing logic

Process Flow Presentation Domain Logic Data

Server Client > Rendering, layout, styling


• n an unknown client

> Logic & state machine on server > Client user-agent extensible via
 code on demand

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

Framework? We don’t need no stinking framework

Maybe we do

Framework benefjts

folklore architecture opinion community skills components component model

🙐

SPAs : web development :: Trump : democracy

Any suffjciently complicated JavaScript client application contains an ad-hoc, informally-specifjed, bug-ridden, slow implementation of half a browser.

— Stefan Tilkov, with apologies to Phillip Greenspun

Hard to put into words how utterly broken JS-fjrst 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 picker task list shopping cart media player Application

< >
 


<video >
 


<video src="bunny.mp4" controls>
 


<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 JavaScript Framework

Component Component Component

😲 😲

Browser Platform Application JavaScript Framework

Component Component

Browser Platform

Component Component Component Component

Application

Component

Component

<audio src="meow.mp4" controls>
 


Browser Platform

Component Component Component

Application

Component

Browser Platform

Component Component Component

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> <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> <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(); 🎊 Unobtrusive JavaScript 🎊

Component

Browser Platform

Component Component Component

Glue Code

HTML JS CSS HTML JS CSS HTML JS CSS HTML JS CSS

✓

👍 Progressive Enhancement 👎

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)

<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();

<tab-nav> <ul> <li> <a href="#about">About</a> … <li> <a href="#comments">Discussion</a> </ul> </tab-nav> <p id="about">lorem ipsum dolor sit amet</p> … <ol id="comments"> … </ol>

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

<tab-nav> <ul> <li> <a href="#about">About</a> … <li> <a href="#comments">Discussion</a> </ul> </tab-nav> <tab-contents> <p id="about">lorem ipsum dolor sit amet</p> … <ol id="comments"> … </ol> </tab-contents>

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

<ul is="tab-nav"> <li> <a href="#about">About</a> … <li> <a href="#comments">Discussion</a> </ul> <tab-contents> <p id="about">lorem ipsum dolor sit amet</p> … <ol id="comments"> … </ol> </tab-contents>

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

<ul is="tab-nav"> <li> <a href="#about">About</a> … <li> <a href="#comments">Discussion</a> </ul> <tab-contents> <p id="about">lorem ipsum dolor sit amet</p> … <ol id="comments"> … </ol> </tab-contents>

📅 Custom Elements

📅

customElements.define("task-list");

customElements.define("task-list", TaskList); class TaskList extends HTMLElement {}

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 … } }

customElements.define("task-list", TaskList); class TaskList extends HTMLElement { … attributeChangedCallback(attrName, oldVal, newVal) { … } static get observedAttributes() { return ["theme"]; } }

customElements.define("task-list", TaskList); class TaskList extends HTMLElement { … connectedCallback() { let obs = new MutationObserver(this.onChange);

• bs.observe(this, { childList: true, subtree: true });

} …

• nChange() {

… } }

customElements.define("task-list", TaskList); class TaskList extends HTMLElement { … connectedCallback() { let shadowRoot = this.attachShadow({ mode: "open" }); shadowRoot.innerHTML = "<canvas></canvas>"; … } … }

📅 Shadow DOM

📅

Component

Browser Platform

Component Component Component

Glue Code

Component

Browser Platform

Component Component Component 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 benefjts

JS Frameworks provide a proprietary architecture

Web components ofger a standardized way to get the best

• f both worlds

Frederik Dohr fnd@innoq.com

• Krischerstr. 100

• Gewerbestr. 11

www.innoq.com

• Ludwigstr. 180E

Thank you – that’s all we have. @fnd

Stefan Tilkov
 stefan.tilkov@innoq.com

@stilkov