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

Progressive Web Components GOTO Berlin 2016 Frederik Dohr, @fnd 
 Stefan Tilkov, @stilkov

History repeating … Web CORBA WS-* REST

What’s the client side analogy?

“Web app” 2) “Web service” 1) > Uses browser as runtime > Use HTTP as transport > Ignores forward, back, refresh > Ignore verbs > Does not support linking > Ignores URIs > Exposes monolithic “app” > Expose single “endpoint” > Fails to embrace the browser > Fails to embrace the Web 1) in the SOAP/WSDL sense 2) built as a careless SPA

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 fj rst. 2. Stop there.” http://idlewords.com/talks/website_obesity.htm

JavaScript framework tax bloat complexity technical debt dependency

The web-native way of distributing logic > Rendering, layout, styling 
 Client Presentation on an unknown client > Logic & state machine on server Process Flow Server > Client user-agent extensible via 
 Domain Logic code on demand Data

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

Framework? We don’t need no stinking framework Maybe we do

Framework bene fj ts folklore architecture opinion skills community components component model

🙐

SPAs : web development :: Trump : democracy

Any su ffj ciently complicated JavaScript client application contains an ad-hoc, informally-speci fj ed, bug-ridden, slow implementation of half a browser. — Stefan Tilkov, with apologies to Phillip Greenspun

Hard to put into words how utterly broken JS- fj rst web development is. So many parts of the system work against you when you take the reins. — Alex Russell (@slightlylate)

shopping cart task list date picker media player Application Component Component Component Component JavaScript Framework Browser Platform


 < > 



 <video > 



 <video src="bunny.mp4" controls> 


play / pause <video src="bunny.mp4" controls> 
 <track kind="subtitles" …> 
 </video> .play() / .pause()

source: Big Buck Bunny

The browser is the framework #UseThePlatform

Application Component Component Component Component JavaScript Framework Browser Platform

Application 😲 😲 Component Component JavaScript Framework Browser Platform

Application Component Component Component Component Component Browser Platform


 <audio src="meow.mp4" controls> 
 Application Component Component Component Component Browser Platform

Application Glue Code Component Component Component Component Browser Platform

<input type="text" class="date"> $("input.date").datepicker();

<div class="tabs"> $(".tabs").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>

<div class="tabs"> $(".tabs").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>

<div class="tabs"> $(".tabs").tabs(); <ul> <li> <a href="#about">About</a> … <li> <a href="#comments">Discussion</a> </ul> 🎊 Unobtrusive JavaScript 🎊 <p id="about">lorem ipsum dolor sit amet</p> … <ol id="comments"> … </ol> </div>

👍 Progressive Enhancement 👎 Glue Code CSS CSS CSS CSS JS JS JS JS ✓ Component Component Component Component HTML HTML HTML HTML Browser Platform

👍 Progressive Enhancement 👎 Progressive enhancement is not about dealing with old Glue Code browsers, it's about dealing with new browsers. CSS CSS CSS CSS JS JS JS JS ✓ — Jeremy Keith (@adactio) Component Component Component Component HTML HTML HTML HTML Browser Platform

<div class="tabs"> $(".tabs").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>

<tab-nav> $(".tabs").tabs(); <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>

<tab-nav> $(".tabs").tabs(); <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>

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

customElements.define("task-list");

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); obs.observe(this, { childList: true, subtree: true }); } … onChange() { … } } customElements.define("task-list", TaskList);

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

Glue Code Component Component Component Component Browser Platform

📅 📅 Custom Elements Glue Code Component Component Component Component Boring Is Good Browser Platform

Component Glue Code Component Component Component Browser Platform image source: Openclipart/atlantis

Style Guides & Component Component Libraries Glue Code Component Component Component Browser Platform image source: Openclipart/atlantis

Wrap-up

Backend platform goals > As few assumptions as possible > No implementation dependencies > Small interface surface > Based on standards > Parallel development Backend Platform > Independent deployment > Autonomous operations

What’s the frontend platform analogy? > As few assumptions as possible > No implementation dependencies Frontend Platform > Small interface surface > Based on standards > Parallel development Backend Platform > Independent deployment > Autonomous operations

The browser as a platform > Independent applications > Loosely coupled Frontend Platform > Separately deployable > Based on standard platform > Updated on the fly Backend Platform > Any device

Summary

Embracing the browsers constraints provides bene fj ts

JS Frameworks provide a proprietary architecture