Progressively enhanced markup: using web components to build PWAs

Web components provide a standard way to create reusable components on the web. In this talk, we'll discuss how to leverage these new features to build PWA, introduce the idea of "progressively enhanced markup", and cover all the changes happening in Custom Elements and Shadow DOM API v1. Both landing in browsers later this year.

Transcript

1. +Eric Bidelman @ebidel June 20 - 21, 2016 Progressively Enhanced Markup using web components to build PWAs
2. @ebidel Digital Jedi, Google Eric Bidelman
3. @ebidel Digital Jedi, Google Eric Bidelman
6. a set of emerging standards that allow developers to extend HTML and its functionality. WEB COMPONENTS
8. thistock.im BROWSER SUPPORT?
9. thistock.im BROWSER SUPPORT?
10. SHADOW DOM CUSTOM ELS el.createShadowRoot() document.registerElement()
11. SHADOW DOM CUSTOM ELS el.createShadowRoot() v0 document.registerElement()
12. SHADOW DOM CUSTOM ELS el.createShadowRoot() v0 document.registerElement() customElements.define() el.attachShadow({mode:'open'}) v1
13. SHADOW DOM CUSTOM ELS el.createShadowRoot() v0 document.registerElement() customElements.define() el.attachShadow({mode:'open'}) v1 HTML IMPORTS <TEMPLATE> No changes:
20. LOVE IT. flickr.com/photos/krissen/6340984211
21. unsplash.com BROWSER SUPPORT MATTERS
22. <script src=“webcomponents.js"></script>
25. <my-tabs selected=“0”> <my-tab title=“1st tab”> <div>...content...</div> </my-tab> … </my-tabs> WEB COMPONENTS
26. INTEGRATED INTO THE PLATFORM
27. INTEGRATED INTO THE PLATFORM
28. INTEGRATED INTO THE PLATFORM
31. #UseThePlatform
32. WARNING
33. showingCode(); WARNING
34. CUSTOM ELEMENTS https://html.spec.whatwg.org/multipage/scripting.html#custom-elements
35. LET’S BUILD A BUTTON!
36. <button> ‣ Focus/keyboard behavior ‣ disabled attribute ‣ Built-in a11y features ‣ Participates in <form> submission
37. <button> ‣ Focus/keyboard behavior ‣ disabled attribute ‣ Built-in a11y features ‣ Participates in <form> submission
40. <div class="better-button">Fancy button!</div> TODAY
41. <div class=“better-button raised">Fancy button!</div> TODAY <style> .better-button { min-width: 5.14em; margin: 0 0.29em; text-transform: uppercase; border-radius: 3px; cursor: pointer; padding: 0.7em 0.57em; … } .better-button.disabled { background: #eaeaea; color: #a8a8a8; cursor: auto; pointer-events: none; box-shadow: none; } .better-button.raised:not(.disabled), .better-button:not(.disabled):hover { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),...; } </style>
42. <div class=“better-button raised” tabindex="0" role="button">Fancy button!</div> <style> .better-button { min-width: 5.14em; margin: 0 0.29em; text-transform: uppercase; border-radius: 3px; cursor: pointer; padding: 0.7em 0.57em; … } .better-button.disabled { background: #eaeaea; color: #a8a8a8; cursor: auto; pointer-events: none; box-shadow: none; } .better-button.raised:not(.disabled), .better-button:not(.disabled):hover { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),...; } </style> TODAY
43. const button = document.querySelector('.better-button'); button.addEventListener('click', e => { if (this.hasAttribute('disabled')) { e.preventDefault(); e.stopPropagation(); } // Draw ripple animation. }); <div class=“better-button raised” tabindex="0" role="button">Fancy button!</div> TODAY
44. const button = document.querySelector('.better-button'); button.addEventListener('click', e => { if (this.hasAttribute('disabled')) { e.preventDefault(); e.stopPropagation(); } // Draw ripple animation. }); <div class=“better-button raised” tabindex="0" role="button">Fancy button!</div> TODAY
45. WE CAN DO BETTER
46. <style> better-button { min-width: 5.14em; margin: 0 0.29em; text-transform: uppercase; border-radius: 3px; cursor: pointer; padding: 0.7em 0.57em; … } better-button[disabled] { background: #eaeaea; color: #a8a8a8; cursor: auto; pointer-events: none; box-shadow: none; } better-button[raised]:not([disabled]), better-button:not([disabled]):hover { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),...; } </style> <better-button raised>Fancy button!</better-button> <better-button raised disabled>Fancy button!</better-button>
48. PROGRESSIVELY ENHANCE
49. class BetterButton extends HTMLElement { } get disabled() { return this.hasAttribute('disabled'); } set disabled(val) { if (val) { this.setAttribute('disabled', ''); } else { this.removeAttribute('disabled'); } } // Do the same for the raised property.
50. class BetterButton extends HTMLElement { } static get observedAttributes() { return [‘disabled’]; } attributeChangedCallback(name, oldValue, newValue) { // only called for the disabled attr due to observedAttributes if (this.disabled) { this.setAttribute('tabindex', '-1'); this.setAttribute('aria-disabled', 'true'); } else { this.setAttribute('tabindex', '0'); this.setAttribute('aria-disabled', 'false'); } } <better-button disabled>Fancy button!</better-button>
51. class BetterButton extends HTMLElement { } constructor() { super(); this.addEventListener('keydown', e => { if (e.keyCode === 32 || e.keyCode === 13) { this.dispatchEvent( new MouseEvent('click', {bubbles: true, cancelable: true})); } }); this.addEventListener('click', e => { if (this.disabled) { e.preventDefault(); e.stopPropagation(); } this.drawRipple(e.offsetX, e.offsetY); }); }
52. class BetterButton extends HTMLElement { } connectedCallback() { this.setAttribute('role', 'button'); this.setAttribute('tabindex', '0'); } disconnectedCallback() { ... }
53. class BetterButton extends HTMLElement { } drawRipple(x, y) { let div = document.createElement('div'); div.classList.add('ripple'); this.appendChild(div); div.style.top = `${y - div.clientHeight/2}px`; div.style.left = `${x - div.clientWidth/2}px`; // Make ripple color same as text color. div.style.backgroundColor = getComputedStyle(this).color; div.classList.add(‘run'); div.addEventListener( 'transitionend', e => div.remove()); } better-button .ripple { position: absolute; transform: scale3d(0,0,0); opacity: 0.8; transition: all 800ms cubic-bezier(0.4,0,0.2,1); border-radius: 50%; width: 150px; height: 150px; will-change: opacity, transform; contain: content; } better-button .ripple.run { opacity: 0; transform: none; }
54. class BetterButton extends HTMLElement { } drawRipple(x, y) { let div = document.createElement('div'); div.classList.add('ripple'); this.appendChild(div); div.style.top = `${y - div.clientHeight/2}px`; div.style.left = `${x - div.clientWidth/2}px`; // Make ripple color same as text color. div.style.backgroundColor = getComputedStyle(this).color; div.classList.add(‘run'); div.addEventListener( 'transitionend', e => div.remove()); } better-button .ripple { position: absolute; transform: scale3d(0,0,0); opacity: 0.8; transition: all 800ms cubic-bezier(0.4,0,0.2,1); border-radius: 50%; width: 150px; height: 150px; will-change: opacity, transform; contain: content; } better-button .ripple.run { opacity: 0; transform: none; }
55. class BetterButton extends HTMLElement { } drawRipple(x, y) { let div = document.createElement('div'); div.classList.add('ripple'); this.appendChild(div); div.style.top = `${y - div.clientHeight/2}px`; div.style.left = `${x - div.clientWidth/2}px`; // Make ripple color same as text color. div.style.backgroundColor = getComputedStyle(this).color; div.classList.add(‘run'); div.addEventListener( 'transitionend', e => div.remove()); } better-button .ripple { position: absolute; transform: scale3d(0,0,0); opacity: 0.8; transition: all 800ms cubic-bezier(0.4,0,0.2,1); border-radius: 50%; width: 150px; height: 150px; will-change: opacity, transform; contain: content; } better-button .ripple.run { opacity: 0; transform: none; } BOOM
56. class BetterButton extends HTMLElement { } drawRipple(x, y) { let div = document.createElement('div'); div.classList.add('ripple'); this.appendChild(div); div.style.top = `${y - div.clientHeight/2}px`; div.style.left = `${x - div.clientWidth/2}px`; // Make ripple color same as text color. div.style.backgroundColor = getComputedStyle(this).color; div.classList.add(‘run'); div.addEventListener( 'transitionend', e => div.remove()); } better-button .ripple { position: absolute; transform: scale3d(0,0,0); opacity: 0.8; transition: all 800ms cubic-bezier(0.4,0,0.2,1); border-radius: 50%; width: 150px; height: 150px; will-change: opacity, transform; contain: content; } better-button .ripple.run { opacity: 0; transform: none; } BOOM
57. class BetterButton extends HTMLElement { ... } window.customElements.define('better-button', BetterButton); Register the element <better-button raised disabled>Fancy button!</better-button> let button = new BetterButton(); let button = document.createElement(‘better-button’); button.disabled = true; button.raised = true; Create instances
58. <style> better-button { box-sizing: border-box; min-width: 5.14em; margin: 0 0.29em; font: inherit; text-transform: uppercase; outline-width: 0; border-radius: 3px; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; cursor: pointer; padding: 0.7em 0.57em; transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); display: inline-block; overflow: hidden; position: relative; /* Fixes rendering issue where chrome doesn't properly clip parent
59. this.setAttribute('tabindex', '-1'); this.setAttribute('aria-disabled', 'true'); } else { this.setAttribute('tabindex', '0'); this.setAttribute('aria-disabled', 'false'); } } drawRipple(x, y) { let div = document.createElement('div'); div.classList.add('ripple'); this.appendChild(div); div.style.top = `${y - div.clientHeight/2}px`; div.style.left = `${x - div.clientWidth/2}px`; div.style.backgroundColor = window.getComputedStyle(this).color; div.classList.add('run'); div.addEventListener('transitionend', e => div.remove()); } } window.customElements.define('better-button', BetterButton); </script>
61. PROGRESSIVELY ENHANCE
62. <button> ‣ Focus/keyboard behavior ‣ disabled attribute ‣ Built-in a11y features ‣ Participates in <form> submission
63. <button> ‣ Focus/keyboard behavior ‣ disabled attribute ‣ Built-in a11y features ‣ Participates in <form> submission
64. class BetterButton extends HTMLButtonElement { constructor() { super(); this.addEventListener('click', e => this.drawRipple(e.offsetX, e.offsetY)); } drawRipple(x, y) { ... } } customElements.define('better-button', BetterButton, {extends: 'button'}); <button is="better-button" raised>Fancy button!</button> document.createElement('button', {is: 'better-button'})
65. class BetterButton extends HTMLButtonElement { constructor() { super(); this.addEventListener('click', e => this.drawRipple(e.offsetX, e.offsetY)); } drawRipple(x, y) { ... } } customElements.define('better-button', BetterButton, {extends: 'button'}); <button is="better-button" raised>Fancy button!</button> document.createElement('button', {is: 'better-button'})
67. Focus/keyboard behavior disabled attribute Built-in a11y features Participates in <form>
68. ASIDE customElements.define(‘better-button', …);
69. ELEMENT UPGRADES ASIDE
70. ELEMENT UPGRADES ASIDE HTMLElement FancyButtonElement
71. CUSTOM ELEMENTS PROGRESSIVELY ENHANCED MARKUP ARE ASIDE
76. ( WPT: Nexus 5 - Chrome - 3G ) 2.2s first paint CODELABS SITE
77. ( WPT: Nexus 5 - Chrome - 3G ) 2.2s first paint CODELABS SITE
78. <style> paper-tabs:not(:defined) { /* Pre-style, give layout,replicate internal styles of paper-tabs */ display: block; height: 48px; opacity: 0; transition: opacity 0.3s ease-in-out; } </style> :defined - pre-style components
79. <style> paper-tabs:not(:defined) { /* Pre-style, give layout,replicate internal styles of paper-tabs */ display: block; height: 48px; opacity: 0; transition: opacity 0.3s ease-in-out; } </style> :defined - pre-style components
80. <h2>Welcome to Codelabs!</h2> <p>Google Codelabs provide a guided, tutorial, hands-on coding...</p>
81. <h2>Welcome to Codelabs!</h2> <p>Google Codelabs provide a guided, tutorial, hands-on coding...</p> <div id="sortby"> <paper-tabs selected="0"> <paper-tab>Popular</paper-tab><paper-tab>Recent</paper-tab>... </paper-tabs> </div>
82. <h2>Welcome to Codelabs!</h2> <p>Google Codelabs provide a guided, tutorial, hands-on coding...</p> <div id="sortby"> <paper-tabs selected="0"> <paper-tab>Popular</paper-tab><paper-tab>Recent</paper-tab>... </paper-tabs> </div> <card-sorter id="cards"> <a href="/pwa" data-filter-duration=“55” data-filter-updated=“2016-05-24”…> <div class="card-header web-bg"> <img src=“webicon.svg”><img src=“clock.svg"><span>55 min</span> </div> <div>Build a Progressive Web App with Firebase…</div> <paper-button>Start</paper-button> <span>Updated 2016-05-25</span> </a> ... </card-sorter>
83. <h2>Welcome to Codelabs!</h2> <p>Google Codelabs provide a guided, tutorial, hands-on coding...</p> <script src="card-sorter.js" async></script> <script src=“paper-tabs.js” async></script> <div id="sortby"> <paper-tabs selected="0"> <paper-tab>Popular</paper-tab><paper-tab>Recent</paper-tab>... </paper-tabs> </div> <card-sorter id="cards"> <a href="/pwa" data-filter-duration=“55” data-filter-updated=“2016-05-24”…> <div class="card-header web-bg"> <img src=“webicon.svg”><img src=“clock.svg"><span>55 min</span> </div> <div>Build a Progressive Web App with Firebase…</div> <paper-button>Start</paper-button> <span>Updated 2016-05-25</span> </a> ... </card-sorter>
84. What we’ve done… customElements.define('better-button', class extends HTMLButtonElement { ... }, {extends: 'button'});
85. What we’ve done… customElements.define('better-button', class extends HTMLButtonElement { ... }, {extends: 'button'});
86. SHADOW DOM https://w3c.github.io/webcomponents/spec/shadow/
87. <select> <option>Do</option> <option>Re</option> <option selected>Mi</option> <option>Fa</option> <option>So</option> </select>
88. <select multiple> <option>Do</option> <option>Re</option> <option selected>Mi</option> <option>Fa</option> <option>So</option> </select>
89. <video src="video.mp4" controls></video>
90. <video src="video.mp4" controls></video>
91. <input type="date">
93. SHADOW DOM
94. class BetterButton extends HTMLElement { constructor() { ... var shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style> :host { ... } .ripple { position: absolute; transform: scale3d(0,0,0); opacity: 0.6; transition: all 800ms cubic-bezier(0.4, 0, 0.2, 1); ... } ... </style> <div class="ripple"></div> `; } }
95. class BetterButton extends HTMLElement { constructor() { ... var shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style> :host { ... } .ripple { position: absolute; transform: scale3d(0,0,0); opacity: 0.6; transition: all 800ms cubic-bezier(0.4, 0, 0.2, 1); ... } ... </style> <div class="ripple"></div> `; } }
96. class BetterButton extends HTMLElement { constructor() { ... var shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style> :host { ... } .ripple { position: absolute; transform: scale3d(0,0,0); opacity: 0.6; transition: all 800ms cubic-bezier(0.4, 0, 0.2, 1); ... } ... </style> <div class="ripple"></div> `; } } Styles are scoped to a shadow root. Selectors don’t leak out or collide with outside rules.
97. class BetterButton extends HTMLElement { constructor() { ... var shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style> :host { ... } .ripple { position: absolute; transform: scale3d(0,0,0); opacity: 0.6; transition: all 800ms cubic-bezier(0.4, 0, 0.2, 1); ... } ... </style> <div class="ripple"></div> `; } } Styles are scoped to a shadow root. Selectors don’t leak out or collide with outside rules.
100. Composition with <slot>
101. Composition with <slot> <style> :host { ... } </style> <slot></slot>
102. Composition with <slot> <style> :host { ... } </style> <slot></slot> <better-b> Fancy button! </better-b>
103. Composition with <slot> <style> :host { ... } </style> <slot></slot> <better-b> Fancy button! </better-b>
104. Composition with <slot> <style> :host { ... } </style> <slot></slot> <style> :host { ... } </style> <slot>Button</slot> <better-b> Fancy button! </better-b>
105. Composition with <slot> <style> :host { ... } </style> <slot></slot> <style> :host { ... } </style> <slot>Button</slot> <better-b> Fancy button! </better-b> <better-b></better-b>
106. Composition with <slot> <style> :host { ... } </style> <slot></slot> <style> :host { ... } </style> <slot>Button</slot> <better-b> Fancy button! </better-b> <better-b></better-b>
107. Composition with <slot> <style> :host { ... } </style> <slot></slot> <style> :host { ... } ::slotted(img) {height: 24px;} </style> <slot name="icon"></slot> <slot></slot> <style> :host { ... } </style> <slot>Button</slot> <better-b> Fancy button! </better-b> <better-b></better-b>
108. Composition with <slot> <style> :host { ... } </style> <slot></slot> <style> :host { ... } ::slotted(img) {height: 24px;} </style> <slot name="icon"></slot> <slot></slot> <style> :host { ... } </style> <slot>Button</slot> <better-b> Fancy button! </better-b> <better-b></better-b> <better-b> <img src="gear.svg" slot=“icon"> Settings </better-b>
109. Composition with <slot> <style> :host { ... } </style> <slot></slot> <style> :host { ... } ::slotted(img) {height: 24px;} </style> <slot name="icon"></slot> <slot></slot> <style> :host { ... } </style> <slot>Button</slot> <better-b> Fancy button! </better-b> <better-b></better-b> <better-b> <img src="gear.svg" slot=“icon"> Settings </better-b>
112. Style hooks using CSS Custom properties Placeholders in Shadow DOM: :host { padding: var(--button-padding, 0.7em); } .ripple { --default-size: 150px; width: var(--ripple-size, var(--default-size)); height: var(--ripple-size, var(--default-size)); }
113. Style hooks using CSS Custom properties Placeholders in Shadow DOM: <style> better-button { background-color: #E91E63; font-size: 40px; --button-padding: 2em; --ripple-size: 300px; } </style> <better-button raised> Ginormous button! </better-button> User provides styles: :host { padding: var(--button-padding, 0.7em); } .ripple { --default-size: 150px; width: var(--ripple-size, var(--default-size)); height: var(--ripple-size, var(--default-size)); }
114. RECAP
115. We taught the browser new HTML!
116. ‣ Created reusable component w/o libs ‣ Progressively enhanced from <button> ‣ Built-in A11y & keyboard behavior (CE) ‣ Self-contained DOM / CSS (SD) ‣ Has an imperative JS API (CE) ‣ Has a declarative API (CE/SD) ‣ Configurable styling (CSS custom props) We taught the browser new HTML!
117. unsplash.com IT’S A BEAUTIFUL FUTURE
118. elements.polymer-project.org customelements.io
119. +Eric Bidelman @ebidel github.com/ebidel thistock.im