Schön und ungebunden: Leichtgewichtige UI-Komponenten fürs Web entwickeln

Transcript

1. JÖRG NEUMANN | ACLUE
   SCHÖN UND UNGEBUNDEN
   Leichtgewichtige UI-Komponenten
   fürs Web entwickeln
   @JOERGNEUMANN
   

   View Slide

2. JÖRG NEUMANN
   THEMEN
    Mobile Development
    UI-Technologien
    Consulting, Coaching, Training
   KONTAKT
    Mail: Joerg.Neumann@Aclue.de
    Twitter: @JoergNeumann
    GitHub: https://github.com/JoergNeumann
    Blog: www.HeadWriteLine.BlogSpot.com
   

   View Slide

3. Demos
   https://bit.ly/35LFf4E
   

   View Slide

4. 
   

   View Slide

5. 
   
   
   
   
   
   
   
    Keine Semantik
    Intransparenz
    Anpassungen schwierig
    Framework-Abhängigkeit
   

   View Slide

6. 
   
   
   
   
   
   
   +
   -
   …
   
   
   
    Global Scoping
    Namenskonflikte
    Styling-Konflikte
   

   View Slide

7. 
   
   
   
   
   
   
   
    Semantik
    Local Scoping
    Konfiguration
    Bundle Import
   

   View Slide

8. 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
   ES MODULES
   Einbinden von
   Komponenten
   WEB
   COMPONENTS
   

   View Slide

9. 
   
   
   
   
   
   
   
   
   ECMA Script
   Module
   Custom
   Elements
   HTML
   Templates
   Shadow
   DOM
   

   View Slide

10. DEMO
    

    View Slide

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

    View Slide

12. class NumberPad extends HTMLElement {
    constructor() {
    super();
    }
    get value() { return +this.getAttribute('value'); }
    set value(value) { this.setAttribute('value', value); }
    get minimum() { return +this.getAttribute('minimum'); }
    set minimum(value) { this.setAttribute('minimum', value); }
    get maximum() { return +this.getAttribute('maximum'); }
    set maximum(value) { this.setAttribute('maximum', value); }
    …
    }
    customElements.define('number-pad', NumberPad);
    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
    

    View Slide

13. DEMO
    

    View Slide

14. 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 Slide

15. 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}!';
    }
    }
    }
    OBSERVED ATTRIBUTES
    DEFINITION
     Attribute für automatische
    Änderungsverfolgung registrieren
     Static Getter: observedAttributes
     Benachrichtigung erfolgt
    über attributeChangedCallback
    

    View Slide

16. 
    
    
    Nr.
    Name
    
    
    
    
    
    
    
    
    
    
    
    
    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
    

    View Slide

17. 
    Hello World
    
    const template = document.createElement('template');
    template.innerHTML = 'Hello World';
    HTML TEMPLATES
    DEFINITION
    HTML JavaScript
    

    View Slide

18. DEMO
    

    View Slide

19. 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 Slide

20. class NumberPad extends HTMLElement {
    constructor() {
    super();
    this.attachShadow({mode: 'open'});
    }
    render() {
    ...
    var clone = document.importNode(template.content, true);
    this.shadowRoot.appendChild(clone);
    }
    ...
    }
    SHADOW DOM
    DEFINITION
    

    View Slide

21. DEMO
    

    View Slide

22. SHADOW DOM - STYLING
    CSS SELECTORS
     Pseudo-classes: :host, :host(), :host-context()
     Pseudo-elements: ::slotted()
     Combinator: >>> *
    Document
    Element (Shadow Host)
    Shadow Root
    Content
    
    <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/>
    
    
    

    View Slide

23. DEFINITION
     Ermöglicht das Einbetten von
    benutzerdefinierten Elementen
     -Element im Template dient
    als Platzhalter
     slot-Eigenschaft im Host stellt die
    Verbindung her
    
    kg
    
    
    
    
    
    
    +
    -
    
    Verwendung:
    Template:
    SHADOW DOM - COMPOSITION
    

    View Slide

24. DEMO
    

    View Slide

25. BROWSER-KOMPATIBILITÄT
    CUSTOM ELEMENTS V1
    HTML TEMPLATES
    SHADOW DOM V1
    ES MODULES
    

    View Slide

26. POLYMER PROJECT
    LitElement
     Basisklasse zur Entwicklung von leichtgewichtigen Web Components
     bietet ein reaktives Programmiermodell
    lit-html
     sehr effiziente HTML Templating Library
     basiert auf ES Template String
    

    View Slide

27. DEMO
    

    View Slide

28. FAZIT
    KOMPONENTEN HELFEN!
     Bessere Struktur der App
     Kapselung von Markup & Code
     Bessere Wiederverwendung
     Klare Semantik
     Fördert die Wartbarkeit
     LitElement und lit-html erleichtern
    die Entwicklung
    

    View Slide

29. Q & A
    

    View Slide