JÖRG NEUMANN | ACANDO
WEB COMPONENTS
UI-FEUERWERK MIT STRUKTUR
Slide 2
Slide 2 text
JÖRG NEUMANN
THEMEN
▪ Mobile Development
▪ UI-Technologien
▪ Consulting, Coaching, Training
KONTAKT
▪ Mail: Joerg.Neumann@Acando.de
▪ Twitter: @JoergNeumann
▪ GitHub: https://github.com/JoergNeumann
▪ Blog: www.HeadWriteLine.BlogSpot.com
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
DEVELOPER CHALLENGES
Slide 6
Slide 6 text
DESIGN DEVELOPMENT
DESIGNER / DEVELOPER WORKFLOW
Slide 7
Slide 7 text
Slide 8
Slide 8 text
▪ Keine Semantik
▪ Intransparenz
▪ Anpassungen schwierig
▪ Framework-Abhängigkeit
Slide 9
Slide 9 text
+
-
…
▪ Global Scoping
▪ Namenskonflikte
▪ Styling-Konflikte
Slide 10
Slide 10 text
▪ Semantik
▪ Local Scoping
▪ Konfiguration
▪ Bundle Import
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Custom
Elements
HTML
Imports
Shaddow
DOM
HTML
Templates
Slide 13
Slide 13 text
DEMO
Slide 14
Slide 14 text
CUSTOM ELEMENTS
DEFINITION
▪ Eigene HTML-Elemente erstellen
▪ Das Verhalten ist vom Dokument entkoppelt
▪ Eigenständiges Lifecycle-Modell (Erstellung, Attributänderungen, …)
Slide 15
Slide 15 text
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);
Slide 16
Slide 16 text
DEMO
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
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}!';
}
}
}
Slide 19
Slide 19 text
HTML TEMPLATES
DEFINITION
▪ HTML Element
▪ Enthält Content der nach dem Laden
nicht direkt gerendert wird
▪ Wird erst bei Verwendung gerendert
▪ Das Fragment kann im Dokument
wiederverwendet werden
Nr.
Name
Slide 20
Slide 20 text
DEMO
Slide 21
Slide 21 text
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.
kg
Verwendung:
Template:
SHADOW DOM - COMPOSITION
DEFINITION
▪ Ermöglicht das Einbetten von
benutzerdefinierten Elementen
▪ -Element im Template dient
als Platzhalter
▪ slot-Eigenschaft im Host stellt die
Verbindung her
Slide 25
Slide 25 text
DEMO
Slide 26
Slide 26 text
HTML IMPORTS
DEFINITION
▪ Dienen zum Paketieren
von Komponenten
▪ Kann CSS und JavaScript enthalten
▪ Einbindung erfolgt über:
▪ Wird zukünftig von ES-Modulen
abgelöst
Human Being
What is a body without a heart?
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');
Slide 27
Slide 27 text
BROWSER-KOMPATIBILITÄT
CUSTOM ELEMENTS V1
HTML TEMPLATES
SHADOW DOM V1
HTML IMPORTS
WEB COMPONENT POLYFILLS
FUNKTIONSWEISE
▪ Rüstet partiell
fehlende Features nach
▪ Funktioniert in neueren
Browsern
▪ Asynchroner Ladevorgang
window.addEventListener('WebComponentsReady', function() {
<!-- Web Component Definition -->
class MyElement extends HTMLElement {
…
}
});
Slide 30
Slide 30 text
DEMO
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
Q & A
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
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/