Slide 1

Slide 1 text

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

Slide 8

Slide 8 text

JavaScript framework tax bloat complexity dependency technical debt

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 18

Slide 18 text

< >
 


Slide 19

Slide 19 text


 


Slide 20

Slide 20 text


 


Slide 21

Slide 21 text


 
 play / pause .play() / .pause()

Slide 22

Slide 22 text

source: Big Buck Bunny

Slide 23

Slide 23 text

The browser is the framework #UseThePlatform

Slide 24

Slide 24 text

Browser Platform Component Application JavaScript Framework Component Component Component

Slide 25

Slide 25 text

Browser Platform Application JavaScript Framework Component Component

Slide 26

Slide 26 text

Browser Platform Component Component Component Component Application Component

Slide 27

Slide 27 text

Component 
 
 Browser Platform Component Component Component Application

Slide 28

Slide 28 text

Component Browser Platform Component Component Component Glue Code Application

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

lorem ipsum dolor sit amet

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

Slide 31

Slide 31 text

lorem ipsum dolor sit amet

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

Slide 32

Slide 32 text

lorem ipsum dolor sit amet

$(".tabs").tabs(); Unobtrusive JavaScript

Slide 33

Slide 33 text

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)

Slide 35

Slide 35 text

lorem ipsum dolor sit amet

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

Slide 36

Slide 36 text

lorem ipsum dolor sit amet

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

Slide 37

Slide 37 text

lorem ipsum dolor sit amet

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

Slide 38

Slide 38 text

lorem ipsum dolor sit amet

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

Slide 39

Slide 39 text

lorem ipsum dolor sit amet

Custom Elements

Slide 40

Slide 40 text

customElements.define("task-list");

Slide 41

Slide 41 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Component Browser Platform Component Component Component Glue Code

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Wrap-up

Slide 52

Slide 52 text

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 [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 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
 [email protected] @stilkov