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

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

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

32ae0ae04b5c4f1b29ee9e8826823fbc?s=128

Jörg Neumann

February 18, 2021
Tweet

Transcript

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

    Web entwickeln @JOERGNEUMANN
  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
  3. Demos https://bit.ly/35LFf4E

  4. <div></div>

  5. <html> <head> <script src="fancyFramework.js"></script> </head> <body> <div id="fancyWidget"></div> </body> </html>

     Keine Semantik  Intransparenz  Anpassungen schwierig  Framework-Abhängigkeit
  6. <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
  7. <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
  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
  9. <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
  10. DEMO

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

  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
  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
  16. <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
  17. <template id="template"> <h2>Hello World</h2> </template> const template = document.createElement('template'); template.innerHTML

    = '<h2>Hello World</h2>'; HTML TEMPLATES DEFINITION HTML JavaScript
  18. DEMO

  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.
  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
  21. DEMO

  22. 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>
  23. 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
  24. DEMO

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

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

  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
  29. Q & A