Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Components mit Angular: UI-Feuerwerk mit Struktur

Web Components mit Angular: UI-Feuerwerk mit Struktur

Was haben Bootstrap, Foundation oder Material Design gemeinsam? Richtig, sie bieten ein Framework, um unsere HTML5-Anwendung “entwicklerhübsch” darzustellen. Werden auf dieser Basis UI-Komponenten entwickelt, sind sie meist stark mit dem Konzept und Design des Frameworks verwoben. Eigene, oftmals durch Corporate Identity vorgegebene UI-Semantiken, Bedienkonzepte und Designkonzepte lassen sich nur schwer mit einem bestehenden Framework verheiraten. Die Portier- und Wiederverwendbarkeit leidet darunter. Doch moderne Konzepte, wie Web Components, Shadow DOM und Custom-HTML-Elemente können helfen, eigene, wiederverwendbare und gutaussehende UI-Komponenten zu entwickeln.

In dieser Session wollen Jörg Neumann und Manuel Rauber ein Konzept zur Entwicklung von Web Components mit dem Angular-Komponentenmodell vorstellen und zeigen mit welchem Workflow man vom Design bis hin zur stylisch umgesetzten App kommt.

GitHub: https://github.com/thinktecture/angulardays-2017-web-components

Manuel Rauber

October 11, 2017
Tweet

More Decks by Manuel Rauber

Other Decks in Programming

Transcript

  1. JÖRG NEUMANN | ACANDO GMBH
    MANUEL RAUBER | THINKTECTURE AG
    WEB COMPONENTS MIT ANGULAR
    UI-FEUERWERK MIT STRUKTUR

    View full-size slide

  2. 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

    View full-size slide

  3. 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

    View full-size slide

  4. DEVELOPER CHALLENGES

    View full-size slide

  5. DESIGN DEVELOPMENT
    DESIGNER / DEVELOPER WORKFLOW

    View full-size slide








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

    View full-size slide








  7. +
    -




    § Global Scoping
    § Namenskonflikte
    § Styling-Konflikte

    View full-size slide










  8. § Semantik
    § Local Scoping
    § Konfiguration
    § Bundle Import

    View full-size slide

  9. 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

    View full-size slide










  10. Custom
    Elements
    HTML
    Imports
    Shaddow
    DOM
    HTML
    Templates

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. 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

    View full-size slide

  14. 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}!';
    }
    }
    }

    View full-size slide

  15. 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












    View full-size slide

  16. Use me

    <br/>function useIt() {<br/>var content = document.querySelector('template').content;<br/>// Update something in the template DOM.<br/>var span = content.querySelector('span');<br/>span.textContent = parseInt(span.textContent) + 1;<br/>document.querySelector('#container').appendChild(<br/>document.importNode(content, true));<br/>}<br/>

    Template used: 0
    alert('Thanks!')

    BEISPIEL

    View full-size slide

  17. 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.

    View full-size slide

  18. 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()




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


    View full-size slide

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

    View full-size slide

  20. SHADOW DOM - STYLING
    CSS SELECTORS
    § Pseudo-classes: :host, :host(), :host-context()
    § Pseudo-elements: ::slotted()
    § Combinator: >>> *

    <br/>:host {<br/>display: block;<br/>width: fit-content;<br/>font-size: 30px;<br/>background: #78909c;<br/>margin: 1px;<br/>padding: 14px;<br/>}<br/>span {<br/>background: white;<br/>font-size: 30px;<br/>}<br/>


    Document
    Element (Shadow Host)
    Shadow Root
    Content

    View full-size slide






  21. +
    -


    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

    View full-size slide

  22. 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');

    View full-size slide

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

    View full-size slide

  24. 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

    View full-size slide

  25. WEB COMPONENT POLYFILLS
    FUNKTIONSWEISE
    § Rüstet partiell
    fehlende Features nach
    § Funktioniert in neueren
    Browsern
    § Asynchroner Ladevorgang



    <br/>
    <br/>window.addEventListener('WebComponentsReady', function() {<br/><!-- Web Component Definition --><br/>class MyElement extends HTMLElement {<br/>…<br/>}<br/>});<br/>





    View full-size slide

  26. 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

    View full-size slide

  27. 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

    View full-size slide

  28. 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()

    View full-size slide

  29. 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
    })

    View full-size slide

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

    View full-size slide

  31. 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

    View full-size slide

  32. 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

    View full-size slide

  33. 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

    View full-size slide

  34. 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/

    View full-size slide