Web Components: UI-Feuerwerk mit Struktur

JÖRG NEUMANN | ACANDO WEB COMPONENTS UI-FEUERWERK MIT STRUKTUR

JÖRG NEUMANN THEMEN ▪ Mobile Development ▪ UI-Technologien ▪ Consulting,
Coaching, Training KONTAKT ▪ Mail: [email protected] ▪ Twitter: @JoergNeumann ▪ GitHub: https://github.com/JoergNeumann ▪ Blog: www.HeadWriteLine.BlogSpot.com

DEVELOPER CHALLENGES

DESIGN DEVELOPMENT DESIGNER / DEVELOPER WORKFLOW

<html> <head> <script src="fancyFramework.js"></script> </head> <body> <div id="fancyWidget"></div> </body> </html>
▪ Keine Semantik ▪ Intransparenz ▪ Anpassungen schwierig ▪ Framework-Abhängigkeit

<html> <head> <script src="fancyFramework.js"></script> </head> <body> <div id="fancyWidget"> <span id="label"></span>
<button id="incButton">+</button> <button id="decButton">-</button> … </div> </body> </html> ▪ Global Scoping ▪ Namenskonflikte ▪ Styling-Konflikte

<html> <head> <link rel="import" href="number-pad.html"></link> </head> <body> <number-pad value="1" minimum="1"
maximum="1"> </number-pad> </body> </html> ▪ Semantik ▪ Local Scoping ▪ Konfiguration ▪ Bundle Import

CUSTOM ELEMENTS Eine API zur Registrierung von eigenen HTML Elementen
HTML TEMPLATES UI-Vorlage für eine Komponente SHADOW DOM Kapselung der inneren DOM- Bestandteile eines Elements HTML IMPORTS / ES MODULES Importieren von Komponenten WEB COMPONENTS

<html> <head> <link rel="import" href="number-pad.html"></link> </head> <body> <number-pad value="1" minimum="1"
maximum="1"> </number-pad> </body> </html> Custom Elements HTML Imports Shaddow DOM HTML Templates

CUSTOM ELEMENTS DEFINITION ▪ Eigene HTML-Elemente erstellen ▪ Das Verhalten
ist vom Dokument entkoppelt ▪ Eigenständiges Lifecycle-Modell (Erstellung, Attributänderungen, …) <my-person firstName="Jörg"></my-person>

CUSTOM ELEMENTS ENTWICKLUNG ▪ Definition erfolgt in Form von ES6-Klassen
▪ Ableitung von HTMLElement oder vorhandenem Element möglich ▪ Custom Element muss im Browser registriert werden class MyPerson extends HTMLElement { constructor(){ super(); this._firstName = null; } get firstName(){ return this._firstName; } set firstName(newName){ this._firstName = newName; } } customElements.define("my-person", MyPerson);

class MyElement extends HTMLElement { constructor() { super(); } connectedCallback()
{ // render … } disconnectedCallback() { // release … } attributeChangedCallback(attr, oldValue, newValue) { // refresh … } static get observedAttributes() { return ['myProperty']; } adoptedCallback(oldDocument, newDocument) { // change … } } customElements.define('my-element', MyElement); }); Element wird erstellt Element wurde in ein neues Dokument verschoben Element wurde aus Dokument entfernt Attribut wurde geändert Attribute für Verfolgung registrieren Element registrieren Element wurde ins Dokument eingefügt CUSTOM ELEMENTS – LIFECYCLE METHODS

OBSERVED ATTRIBUTES DEFINITION ▪ Attribute für automatische Änderungsverfolgung registrieren ▪
Static Getter: observedAttributes ▪ Benachrichtigung erfolgt über attributeChangedCallback class HelloElement extends HTMLElement { // 'name'-Attribute für Verfolgung registrieren static get observedAttributes() { return ['name']; } // Auf Änderung reagieren attributeChangedCallback(attr, oldValue, newValue) { if (attr == 'name') { this.textContent = 'Hallo ${newValue}!'; } } }

HTML TEMPLATES DEFINITION ▪ HTML Element <template> ▪ Enthält Content
der nach dem Laden nicht direkt gerendert wird ▪ Wird erst bei Verwendung gerendert ▪ Das Fragment kann im Dokument wiederverwendet werden <table id="producttable"> <thead> <tr> <td>Nr.</td> <td>Name</td> </tr> </thead> <tbody>  </tbody> </table> <template id="productrow"> <tr> <td class="record"></td> <td></td> </tr> </template>

SHADOW DOM DEFINITION ▪ Bietet ein gekapseltes DOM / CSS
für eine Komponente FEATURES ▪ Isolated DOM: Lokale Elemente der Komponente sind von außen nicht sichtbar. ▪ Scoped CSS: Lokale CSS-Definitionen wirken sich nur auf die Komponente aus. ▪ Composition: Komponente kann von außen per Markup erweitert werden. ▪ Einfaches CSS: Keine Konflikte mit id/class-Namen von außen. ▪ Produktivität: App besteht aus gekapselten, wiederverwendbaren Komponenten.

SHADOW DOM - STYLING CSS SELECTORS ▪ Pseudo-classes: :host, :host(),
:host-context() ▪ Pseudo-elements: ::slotted() ▪ Combinator: >>> * <template id="template"> <style> :host { display: block; width: fit-content; font-size: 30px; background: #78909c; margin: 1px; padding: 14px; } span { background: white; font-size: 30px; } </style> <span id="counter"></span> </template> Document Element (Shadow Host) Shadow Root Content

<div id="frame"> <span> <span id="label"></span> <slot name="addition"></slot> </span> <button id="increment-button">+</button>
<button id="decrement-button">-</button> </div> <number-pad value="3" minimum="1" maximum="5"> <span slot="addition">kg</span> </number-pad> Verwendung: Template: SHADOW DOM - COMPOSITION DEFINITION ▪ Ermöglicht das Einbetten von benutzerdefinierten Elementen ▪ <slot>-Element im Template dient als Platzhalter ▪ slot-Eigenschaft im Host stellt die Verbindung her

HTML IMPORTS DEFINITION ▪ Dienen zum Paketieren von Komponenten ▪
Kann CSS und JavaScript enthalten ▪ Einbindung erfolgt über: <link rel="import"> ▪ Wird zukünftig von ES-Modulen abgelöst <html> <head> <title>Human Being</title> <link rel="import" href="/imports/heart.html"> </head> <body> <p>What is a body without a heart?</p> </body> </html> var link = document.querySelector('link[rel=import]'); var heart = link.import; // Access DOM of the document in /imports/heart.html var pulse = heart.querySelector('div.pulse');

BROWSER-KOMPATIBILITÄT CUSTOM ELEMENTS V1 HTML TEMPLATES SHADOW DOM V1 HTML
IMPORTS

BROWSER-KOMPATIBILITÄT Chrome Firefox IE 11+/ Edge Opera Safari 9+ Chrome
(Android) Safari (iOS 9+) Template Native Native Partial Native Native Native Native HTML Imports Native Polyfill Polyfill Native Polyfill Native Polyfill Custom Elements Native Polyfill Polyfill Native Partial Native Partial Shadow DOM Native Polyfill Polyfill Native Partial Native Partial

WEB COMPONENT POLYFILLS FUNKTIONSWEISE ▪ Rüstet partiell fehlende Features nach
▪ Funktioniert in neueren Browsern ▪ Asynchroner Ladevorgang <html> <head>  <script src="…/webcomponentsjs/webcomponents-loader.js"> </script> <script> window.addEventListener('WebComponentsReady', function() {  class MyElement extends HTMLElement { … } }); </script> </head> <body> <my-element></my-element> </body> </html>

FAZIT Komponenten helfen! ▪ Bessere Struktur der App ▪ Klare
Semantik ▪ Fördert die Wartbarkeit Web Components unterstützen ▪ Kapselung von Markup & Code ▪ Bessere Wiederverwendung ▪ Bisher noch nicht 100% Browser Support

RESSOURCEN WEBCOMPONENTS.ORG ▪ http://webcomponents.org/ WEB COMPONENTS TUTORIALS ▪ https://blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the- web-an-overview-of-web-components/#TSeSZK7qXciRX8oE.99
▪ https://component.kitchen/tutorial WEB COMPONENTS BROWSER SUPPORT ▪ http://webcomponents.org SHADOW DOM ▪ https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

WEB COMPONENTS: BROWSER SUPPORT ÜBERBLICK ALLER FEATURES/BROWSERS ▪ http://jonrimmer.github.io/are-we-componentized-yet/ CUSTOM
ELEMENTS ▪ http://caniuse.com/#search=Custom%20elements SHADOW DOM ▪ http://caniuse.com/#search=shadow%20dom TEMPLATES ▪ http://caniuse.com/#feat=template HTML IMPORTS ▪ http://caniuse.com/#search=html%20imports

SPECS CUSTOM ELEMENTS ▪ http://w3c.github.io/webcomponents/spec/custom/ HTML IMPORTS ▪ http://w3c.github.io/webcomponents/spec/imports/ TEMPLATES
▪ https://html.spec.whatwg.org/multipage/scripting.html#the-template-element SHADOW DOM ▪ http://w3c.github.io/webcomponents/spec/shadow/

Web Components: UI-Feuerwerk mit Struktur

Web Components: UI-Feuerwerk mit Struktur

Jörg Neumann

More Decks by Jörg Neumann

Other Decks in Technology

Featured

Transcript

JÖRG NEUMANN | ACANDO WEB COMPONENTS UI-FEUERWERK MIT STRUKTUR

JÖRG NEUMANN THEMEN ▪ Mobile Development ▪ UI-Technologien ▪ Consulting,

DEVELOPER CHALLENGES

DESIGN DEVELOPMENT DESIGNER / DEVELOPER WORKFLOW

<div></div>

<html> <head> <script src="fancyFramework.js"></script> </head> <body> <div id="fancyWidget"></div> </body> </html>

<html> <head> <script src="fancyFramework.js"></script> </head> <body> <div id="fancyWidget"> <span id="label"></span>

<html> <head> <link rel="import" href="number-pad.html"></link> </head> <body> <number-pad value="1" minimum="1"

CUSTOM ELEMENTS Eine API zur Registrierung von eigenen HTML Elementen

<html> <head> <link rel="import" href="number-pad.html"></link> </head> <body> <number-pad value="1" minimum="1"

DEMO

CUSTOM ELEMENTS DEFINITION ▪ Eigene HTML-Elemente erstellen ▪ Das Verhalten

CUSTOM ELEMENTS ENTWICKLUNG ▪ Definition erfolgt in Form von ES6-Klassen

DEMO

class MyElement extends HTMLElement { constructor() { super(); } connectedCallback()

OBSERVED ATTRIBUTES DEFINITION ▪ Attribute für automatische Änderungsverfolgung registrieren ▪

HTML TEMPLATES DEFINITION ▪ HTML Element <template> ▪ Enthält Content

DEMO

SHADOW DOM DEFINITION ▪ Bietet ein gekapseltes DOM / CSS

DEMO

SHADOW DOM - STYLING CSS SELECTORS ▪ Pseudo-classes: :host, :host(),

<div id="frame"> <span> <span id="label"></span> <slot name="addition"></slot> </span> <button id="increment-button">+</button>

DEMO

HTML IMPORTS DEFINITION ▪ Dienen zum Paketieren von Komponenten ▪

BROWSER-KOMPATIBILITÄT CUSTOM ELEMENTS V1 HTML TEMPLATES SHADOW DOM V1 HTML

BROWSER-KOMPATIBILITÄT Chrome Firefox IE 11+/ Edge Opera Safari 9+ Chrome

WEB COMPONENT POLYFILLS FUNKTIONSWEISE ▪ Rüstet partiell fehlende Features nach

DEMO

FAZIT Komponenten helfen! ▪ Bessere Struktur der App ▪ Klare

Q & A

RESSOURCEN WEBCOMPONENTS.ORG ▪ http://webcomponents.org/ WEB COMPONENTS TUTORIALS ▪ https://blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the- web-an-overview-of-web-components/#TSeSZK7qXciRX8oE.99

WEB COMPONENTS: BROWSER SUPPORT ÜBERBLICK ALLER FEATURES/BROWSERS ▪ http://jonrimmer.github.io/are-we-componentized-yet/ CUSTOM

SPECS CUSTOM ELEMENTS ▪ http://w3c.github.io/webcomponents/spec/custom/ HTML IMPORTS ▪ http://w3c.github.io/webcomponents/spec/imports/ TEMPLATES