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

Schön und ungebunden: Leichtgewichtige UI-Kompo...

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

Jörg Neumann

February 18, 2021
Tweet

More Decks by Jörg Neumann

Other Decks in Programming

Transcript

  1. 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
  2. <html> <head> <script src="fancyFramework.js"></script> </head> <body> <div id="fancyWidget"></div> </body> </html>

     Keine Semantik  Intransparenz  Anpassungen schwierig  Framework-Abhängigkeit
  3. <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
  4. <html> <head> <script type="module" src="NumberPad.js"></script> </head> <body> <number-pad value="1" minimum="1"

    maximum="1"> </number-pad> </body> </html>  Semantik  Local Scoping  Konfiguration  Bundle Import
  5. 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
  6. <html> <head> <script type="module" src="NumberPad.js"></script> </head> <body> <number-pad value="1" minimum="1"

    maximum="1"> </number-pad> </body> </html> ECMA Script Module Custom Elements HTML Templates Shadow DOM
  7. CUSTOM ELEMENTS DEFINITION  Eigene HTML-Elemente erstellen  Das Verhalten

    ist vom Dokument entkoppelt  Eigenständiges Lifecycle-Modell (Erstellung, Attributänderungen, …) <number-pad value="1" minimum="1" maximum="1"> </number-pad>
  8. 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
  9. 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
  10. 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
  11. <table id="producttable"> <thead> <tr> <td>Nr.</td> <td>Name</td> </tr> </thead> <tbody> <!--

    wird dynamisch mit inhalt gefüllt --> </tbody> </table> <template id="productrow"> <tr> <td class="record"></td> <td></td> </tr> </template> 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
  12. 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.
  13. 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
  14. SHADOW DOM - STYLING CSS SELECTORS  Pseudo-classes: :host, :host(),

    :host-context()  Pseudo-elements: ::slotted()  Combinator: >>> * Document Element (Shadow Host) Shadow Root Content <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>
  15. DEFINITION  Ermöglicht das Einbetten von benutzerdefinierten Elementen  <slot>-Element

    im Template dient als Platzhalter  slot-Eigenschaft im Host stellt die Verbindung her <number-pad value="3" minimum="1" maximum="5"> <span slot="addition">kg</span> </number-pad> <div id="frame"> <span> <span id="label"></span> <slot name="addition"></slot> </span> <button id="increment-button">+</button> <button id="decrement-button">-</button> </div> Verwendung: Template: SHADOW DOM - COMPOSITION
  16. 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
  17. 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