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
Recommend
More recommend
