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

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

32ae0ae04b5c4f1b29ee9e8826823fbc?s=47 Jörg Neumann
February 18, 2021
Programming
1
290

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

32ae0ae04b5c4f1b29ee9e8826823fbc?s=128

Jörg Neumann

February 18, 2021
Tweet

More Decks by Jörg Neumann

See All by Jörg Neumann
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
0
20
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
0
41
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
0
290
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
0
250
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
6
370
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
3
580
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
0
150
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
1
270
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
0
190

Other Decks in Programming

See All in Programming
49ae3cdb8b1a20b56aac93648f202238?s=48 futabato
0
760
E66449b8260b07a1cf51c5ab5eaa8180?s=48 dunglas
2
14k
D5744e72b6a5e6673f991cab987a31ab?s=48 siketyan
0
150
35e08efcf39d692f540047fb756eb4e3?s=48 konifar
0
1.8k
A45d7e872a00eb4478c45fa0f7595a3d?s=48 rilmayer
3
790
7e56a691cfb413e0f6e631791f33fe54?s=48 mismith0227
0
200
9f2edd3fb2cc8feb20221138ca91d9fc?s=48 kuriko
0
270
9f2edd3fb2cc8feb20221138ca91d9fc?s=48 kuriko
0
270
13fb4600e942b31c69cfeaf4768c36cc?s=48 takazudo
7
720
Fbe7836c8ca96e3099dd5bbd83d1a391?s=48 hideg
0
350
Af9db90220551fb78d294987b6296fbf?s=48 chmikata
0
430
9f2edd3fb2cc8feb20221138ca91d9fc?s=48 kuriko
0
260

Featured

See All Featured
B47b288784fda77a94aeb234ca743c24?s=48 keavy
112
15k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
30
5.4k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
85
8.3k
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
25
11k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
210
20k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
64
10k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
6
820
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
298
40k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.2k
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
38
5.8k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
656
120k

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