JÖRG NEUMANN | ACANDO GMBH MANUEL RAUBER | THINKTECTURE AG WEB COMPONENTS MIT ANGULAR 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 

MANUEL RAUBER THEMEN § Cross-Plattform Entwicklung mit Angular § Backend Entwicklung mit Node.js, .NET oder .NET Core § Consultant, Speaker, Writer KONTAKT § Mail: [email protected] § Twitter: @manuelrauber § Blog: https://manuel-rauber.com 

No content

No content

DEVELOPER CHALLENGES 

DESIGN DEVELOPMENT DESIGNER / DEVELOPER WORKFLOW 



§ Keine Semantik § Intransparenz § Anpassungen schwierig § Framework-Abhängigkeit 

§ Global Scoping § Namenskonflikte § Styling-Konflikte 

§ 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 

Custom Elements HTML Imports Shaddow DOM HTML Templates 

DEMO 

CUSTOM ELEMENTS DEFINITION § Eigene HTML-Elemente erstellen § Das Verhalten ist vom Dokument entkoppelt § Eigenständiges Lifecycle-Modell (Erstellung, Attributänderungen, …) 

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); 

DEMO 

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 § 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 

Use me function useIt() { var content = document.querySelector('template').content; // Update something in the template DOM. var span = content.querySelector('span'); span.textContent = parseInt(span.textContent) + 1; document.querySelector('#container').appendChild( document.importNode(content, true)); } alert('Thanks!') BEISPIEL 

DEMO 

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 FUNKTIONSWEISE § Shadow DOM wird an existierendes Element angehängt § Kann statisches oder dynamisch erzeugtes Element sein § Kann natives oder benutzerdefiniertes Elemente sein § Aktivierung über Element.attachShadow()

var shadow = document.querySelector('#host') .attachShadow({mode: 'open'}); shadow.innerHTML = '<span>Some text</span>'; 

DEMO 

SHADOW DOM - STYLING FUNKTIONSWEISE § Über Element im Shadow DOM § Alles Styles sind lokal var shadow = document.querySelector('#host') .attachShadow({mode: 'open'}); shadow.innerHTML = '<span>Some new text</span>' + '<style>span { color: red; }'; 

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

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 

HTML IMPORTS DEFINITION § Dienen zum Paketieren von Komponenten § Kann CSS und JavaScript enthalten § Einbindung erfolgt über: § Wird zukünftig von ES6-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'); 

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 window.addEventListener('WebComponentsReady', function() { <!-- Web Component Definition --> class MyElement extends HTMLElement { … } }); 

DEMO 

POLYMER 

POLYMER WEB COMPONENTS-FRAMEWORK VON GOOGLE § Version 1.0 wurde 2015 veröffentlicht § Version 2 in 2017 FEATURES § Einfache Entwicklung von Custom Elements § Two-Way Data Binding § Computed Properties § Conditional & Repeat Templates § Gesture Events § Element Library 

DEMO 

ANGULAR 

ANGULAR SINGLE-PAGE APPLICATION FRAMEWORK VON GOOGLE § Version 1 wurde 2010 veröffentlicht § Version 2 in 2016 als kompletter Rewrite („Application Platform“) § Folgt semantischer Versionierung (a lá Google Chrome) FEATURES § Hierarchisches Komponentenmodell § Datenbindung § Datenflusssteuerung via Input & Output § Routing § Dependency Injection 

KOMPONENTEN HIERARCHISCHES KOMPONENTENMODELL § Kapseln Logik und Anzeige § Anzeige besteht aus Struktur und Design Parent -> Child Application Hackathons Users Hackathon Hackathon [hackathons]=“someExp” [hackathon]=“someExp” Child-> Parent Application Hackathons Users Hackathon Hackathon (rate)=“onRate()” (rate)=“onRate()” via @Input() via @Output() 

DEMO 

KOMPONENTEN VIEW ENCAPSULATION § None: Keine Kapselung der View, Stile von Komponenten können sich überschreiben § Emulated: Kapselung des Stylings via Rewriting der CSS-Bezeichner § Native: Kapselung des Templates via Shadow DOM @Component({ selector: 'hackathon-form', templateUrl: 'hackathonForm.html‘, encapsulation: ViewEncapsulation.None }) @Component({ selector: 'hackathon-form', templateUrl: 'hackathonForm.html‘, encapsulation: ViewEncapsulation.Native }) 

KOMPONENTEN SLOTS § Definieren von außen bestimmbaren dynamischen Inhalt § Anzeige besteht aus Struktur und Design § Einfache oder mehrfache Slot(selektion) möglich 

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 Angular § Unterstützt eine komponentenbasierte Architektur 

Q & A 

RESSOURCEN REPOSITORY § https://github.com/thinktecture/angulardays-2017-web-components 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/