Geektastic Connect: Einführung in Web-Components

Anstatt AngularJS, React oder Vue.js für die Realisierung von komplexen UI Komponenten im Web zu nutzen bietet es sich an einen Blick auf den neuen Web-Standard Web Components zu richten. In dieser Session wollen wir genau dies tun. Wir schauen uns an was diese Web Components überhaupt sind und wie wir damit UI Komponenten erstellen können ohne ein proprietäres Framework nutzen zu müssen.

Transcript

1. Einführung in Web- Components 4 . D e z e m b e r 2 0 1 9 D ü s s e l d o r f / G e e k t a s t i c C o n n e c t
2. MICHAEL VITZ Senior Consultant bei INNOQ Deutschland GmbH @michaelvitz
3. Komponenten im Web
5. 5 http://atomicdesign.bradfrost.com
6. Atomic Design
7. https://innoq.style/components/detail/alert--error.html
8. Bestandteile HTML CSS vermutlich JavaScript möglicherweise Optimiere das Aussehen Optimiere die UX Mach es Funktional
9. Web-Components
10. Web-Components •Erlauben das Definieren von eigenen HTML Elementen •Set von Web APIs •Custom Elements •Shadow DOM •HTML Template •ES Modules (wird im Vortrag nicht behandelt) https://www.webcomponents.org/introduction
11. Custom Elements
12. Autonomous Custom Element <my-alert type="warn"> <h4>Achtung</h4> <p>Etwas schlimmes ist passiert!</p> </my-alert> class MyAlert extends HTMLElement { … } customElements.define('my-alert', MyAlert);
13. 13 Kennen wir das nicht woher? https://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml
14. Customized Built-In Element <a href="/somewhere" is="embeddable-content"> Some Link </a> class EmbeddableContent extends HTMLAnchorElement { … } customElements.define(‘embeddable-content', EmbeddableContent, {extends: ‘a'});
15. Custom Element API •constructor()
 // instance is created •connectedCallback()
 // instance is inserted into DOM •disconnectedCallback()
 // instance is removed from DOM •attributeChangedCallback(attrName, oldVal, newVal)
 // one of observed attributes changed -> static get observedAttributes() •adoptedCallback()
 // instance is adopted via document.adoptNode(el)
16. https://caniuse.com/#search=custom%20elements Polyfill
17. Shadow DOM
18. Shadow DOM •Ermöglicht stärkere Kapselung der Komponente this.attachShadow({mode: 'open'}); oder this.attachShadow({mode: 'closed'});
19. https://caniuse.com/#search=shadow%20DOM Polyfill
20. HTML Template
21. HTML Template •Ermöglicht User ein Template anzugeben das von der Komponente verwendet wird <template id="alert"> <slot name="title"><h1>Achtung</h1></slot> <slot name="text"><p>Es passiert!</p></slot> <p>Ihnen wird nichts passieren.</p> </template>
22. https://caniuse.com/#search=html%20templates
23. Krischerstr. 100 40789 Monheim am Rhein Germany +49 2173 3366-0 Ohlauer Str. 43 10999 Berlin Germany +49 2173 3366-0 Ludwigstr. 180E 63067 Offenbach Germany +49 2173 3366-0 Kreuzstr. 16 80331 München Germany +49 2173 3366-0 Hermannstrasse 13 20095 Hamburg Germany +49 2173 3366-0 Gewerbestr. 11 CH-6330 Cham Switzerland +41 41 743 0116 innoQ Deutschland GmbH innoQ Schweiz GmbH www.innoq.com Danke! Fragen? Michael Vitz michael.vitz@innoq.com +49 151 19116015 @michaelvitz https:/ /www.innoq.com/de/talks/2019/12/geektastic-düsseldorf-dezember-2019-web-components/ https:/ /github.com/mvitz/web-components-introduction