Web Components mit Angular – Moderne UIs mit Struktur

Web Components mit Angular – Moderne UIs mit Struktur

Bootstrap, Foundation oder Material Design – all das sind uns bekannte UI-Frameworks. Doch was haben sie gemeinsam? Genau, sie bieten eine UI-Basis an, um unsere HTML5-Anwendungen "entwicklerhübsch" darzustellen. Werden auf dieses Basis UI-Komponenten entwickelt, sind sie meist stark mit den Ideen, Konzepten und dem Design des Frameworks verheiratet. Eigene, oftmals durch Corporate Identity vorgegebene UI-Semantiken, Bedien- und Designkonzepte lassen sich oft nur schwer in ein bestehendes Framework integrieren. Die Portier- und Wiederverwendbarkeit leiden darunter. Moderne Konzepte, wie Web Components, Shadow DOM und Custom-HTML-Elemente können helfen, eigene wiederverwendbare und gutaussehende UI-Komponenten zu entwickeln. In dieser Session wollen Jörg Neumann und Manuel Rauber ein Konzept zur Entwicklung von Web Components mit dem Angular-Komponentenmodell vorstellen und zeigen, mit welchem Workflow man vom Design bis hin zur stylisch umgesetzten App kommt.

GitHub: https://github.com/thinktecture/angulardays-2018-spring-web-components

667fbca1f58bc0215c744b5ae8f8e5d2?s=128

Manuel Rauber

March 21, 2018
Tweet

Transcript

  1. JÖRG NEUMANN | ACANDO GMBH MANUEL RAUBER | THINKTECTURE AG

    WEB COMPONENTS MIT ANGULAR MODERNE UIS MIT STRUKTUR
  2. JÖRG NEUMANN THEMEN § Mobile Development § UI-Technologien § Consulting,

    Coaching, Training KONTAKT § Mail: Joerg.Neumann@Acando.de § Twitter: @JoergNeumann § GitHub: https://github.com/JoergNeumann § Blog: www.HeadWriteLine.BlogSpot.com
  3. MANUEL RAUBER THEMEN § Cross-Plattform Entwicklung mit Angular § Backend

    Entwicklung mit Node.js und .NET Core § Consultant, Speaker, Writer KONTAKT § Mail: manuel.rauber@thinktecture.com § Twitter: @manuelrauber § Blog: https://manuel-rauber.com
  4. None
  5. None
  6. DEVELOPER CHALLENGES

  7. DESIGN DEVELOPMENT DESIGNER / DEVELOPER WORKFLOW

  8. <div></div>

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

    § Keine Semantik § Intransparenz § Anpassungen schwierig § Framework-Abhängigkeit
  10. <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
  11. <html> <head> <link rel="import" href="number-pad.html"></link> </head> <body> <number-pad value="1" minimum="1"

    maximum="1"> </number-pad> </body> </html> § Semantik § Local Scoping § Konfiguration § Bundle Import
  12. 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 HTML IMPORTS / ES MODULES Importieren von Komponenten WEB COMPONENTS
  13. <html> <head> <link rel="import" href="number-pad.html"></link> </head> <body> <number-pad value="1" minimum="1"

    maximum="1"> </number-pad> </body> </html> Custom Elements HTML Imports Shadow DOM HTML Templates
  14. DEMO

  15. CUSTOM ELEMENTS DEFINITION § Eigene HTML-Elemente erstellen § Das Verhalten

    ist vom Dokument entkoppelt § Eigenständiges Lifecycle-Modell (Erstellung, Attributänderungen, …) <my-person firstName="Jörg"></my-person>
  16. 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 class MyPerson extends HTMLElement { constructor(){ super(); this._firstName = null; } get firstName(){ return this._firstName; } set firstName(newName){ this._firstName = newName; } } customElements.define("my-person", MyPerson);
  17. DEMO

  18. 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
  19. OBSERVED ATTRIBUTES DEFINITION § Attribute für automatische Änderungsverfolgung registrieren §

    Static Getter: observedAttributes § Benachrichtigung erfolgt über attributeChangedCallback 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}!'; } } }
  20. DEMO

  21. 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 <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>
  22. <button onclick="useIt()">Use me</button> <div id="container"></div> <script> function useIt() { var

    content = document.querySelector('template').content; // Update something in the template DOM. var span = content.querySelector('span'); span.textContent = parseInt(span.textContent) + 1; document.querySelector('#container').appendChild( document.importNode(content, true)); } </script> <template> <div>Template used: <span>0</span></div> <script>alert('Thanks!')</script> </template> BEISPIEL
  23. DEMO

  24. 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.
  25. DEMO

  26. SHADOW DOM - STYLING FUNKTIONSWEISE § Über <style> Element im

    Shadow DOM § Alles Styles sind lokal var shadow = document.querySelector('#host') .attachShadow({mode: 'open'}); shadow.innerHTML = '<span>Some new text</span>' + '<style>span { color: red; }</style>';
  27. SHADOW DOM - STYLING CSS SELECTORS § Pseudo-classes: :host, :host(),

    :host-context() § Pseudo-elements: ::slotted() § Combinator: >>> * <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> Document Element (Shadow Host) Shadow Root Content
  28. <div id="frame"> <span> <span id="label"></span> <slot name="addition"></slot> </span> <button id="increment-button">+</button>

    <button id="decrement-button">-</button> </div> <number-pad value="3" minimum="1" maximum="5"> <span slot="addition">kg</span> </number-pad> Verwendung: Template: SHADOW DOM - COMPOSITION DEFINITION § Ermöglicht das Einbetten von benutzerdefinierten Elementen § <slot>-Element im Template dient als Platzhalter § slot-Eigenschaft im Host stellt die Verbindung her
  29. DEMO

  30. HTML IMPORTS DEFINITION § Dienen zum Paketieren von Komponenten §

    Kann CSS und JavaScript enthalten § Einbindung erfolgt über: <link rel="import"> § Wird zukünftig von ES6-Modulen abgelöst <html> <head> <title>Human Being</title> <link rel="import" href="/imports/heart.html"> </head> <body> <p>What is a body without a heart?</p> </body> </html> var link = document.querySelector('link[rel=import]'); var heart = link.import; // Access DOM of the document in /imports/heart.html var pulse = heart.querySelector('div.pulse');
  31. BROWSER-KOMPATIBILITÄT CUSTOM ELEMENTS V1 HTML TEMPLATES SHADOW DOM V1 HTML

    IMPORTS
  32. BROWSER-KOMPATIBILITÄT Chrome Firefox IE 11+/ Edge Opera Safari 9+ Chrome

    (Android) Safari (iOS 9+) Template Native Native Partial Native Native Native Native HTML Imports Native Polyfill Polyfill Native Polyfill Native Polyfill Custom Elements Native Polyfill Polyfill Native Partial Native Partial Shadow DOM Native Polyfill Polyfill Native Partial Native Partial
  33. WEB COMPONENT POLYFILLS FUNKTIONSWEISE § Rüstet partiell fehlende Features nach

    § Funktioniert in neueren Browsern § Asynchroner Ladevorgang <html> <head> <!-- Load polyfills --> <script src="…/webcomponentsjs/webcomponents-loader.js"> </script> <script> window.addEventListener('WebComponentsReady', function() { <!-- Web Component Definition --> class MyElement extends HTMLElement { … } }); </script> </head> <body> <my-element></my-element> </body> </html>
  34. DEMO

  35. POLYMER

  36. POLYMER WEB COMPONENTS-FRAMEWORK VON GOOGLE § Version 1.0 wurde 2015

    veröffentlicht § Version 2 in 2017 FEATURES § Einfache Entwicklung von Custom Elements § Two-Way Data Binding § Computed Properties § Conditional & Repeat Templates § Gesture Events § Element Library
  37. DEMO

  38. ANGULAR

  39. ANGULAR SINGLE-PAGE APPLICATION FRAMEWORK VON GOOGLE § Version 1 wurde

    2010 veröffentlicht § Version 2 in 2016 als kompletter Rewrite („Application Platform“) § Folgt semantischer Versionierung (a lá Google Chrome) FEATURES § Hierarchisches Komponentenmodell § Datenbindung § Datenflusssteuerung via Input & Output § Routing § Dependency Injection
  40. KOMPONENTEN HIERARCHISCHES KOMPONENTENMODELL § Kapseln Logik und Anzeige § Anzeige

    besteht aus Struktur und Design Parent -> Child Application Hackathons Users Hackathon Hackathon [hackathons]=“someExp” [hackathon]=“someExp” Child-> Parent Application Hackathons Users Hackathon Hackathon (rate)=“onRate()” (rate)=“onRate()” via @Input() via @Output()
  41. DEMO

  42. KOMPONENTEN VIEW ENCAPSULATION § None: Keine Kapselung der View, Stile

    von Komponenten können sich überschreiben § Emulated: Kapselung des Stylings via Rewriting der CSS-Bezeichner § Native: Kapselung des Templates via Shadow DOM @Component({ selector: 'hackathon-form', templateUrl: 'hackathonForm.html‘, encapsulation: ViewEncapsulation.None }) @Component({ selector: 'hackathon-form', templateUrl: 'hackathonForm.html‘, encapsulation: ViewEncapsulation.Native })
  43. KOMPONENTEN SLOTS § Definieren von außen bestimmbaren dynamischen Inhalt §

    Anzeige besteht aus Struktur und Design § Einfache oder mehrfache Slot(selektion) möglich
  44. DEMO

  45. KOMPONENTEN ANGULAR COMPONENTS === WEBCOMPONENTS? § Noch nicht! § Neue

    experimentelle API in Angular 6: Angular Elements § Wandelt Angular Components in echte Web Components um § Können überall eingebunden werden § Automatisches Bootstrapping § Automatische Umwandlung von Input/Output in echte Events und Observed Attributes
  46. DEMO

  47. FAZIT Komponenten helfen! § Bessere Struktur der App § Klare

    Semantik § Fördert die Wartbarkeit Web Components unterstützen § Kapselung von Markup & Code § Bessere Wiederverwendung § Bisher noch nicht 100% Browser Support Angular § Unterstützt eine komponentenbasierte Architektur
  48. @MANUELRAUBER @JOERGNEUMANN

  49. Q & A

  50. RESSOURCEN WEBCOMPONENTS.ORG § http://webcomponents.org/ WEB COMPONENTS TUTORIALS § https://blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the-web-an- overview-of-web-components/#TSeSZK7qXciRX8oE.99

    § https://component.kitchen/tutorial WEB COMPONENTS BROWSER SUPPORT § http://webcomponents.org SHADOW DOM § https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM
  51. WEB COMPONENTS: BROWSER SUPPORT ÜBERBLICK ALLER FEATURES/BROWSERS § http://jonrimmer.github.io/are-we-componentized-yet/ CUSTOM

    ELEMENTS § http://caniuse.com/#search=Custom%20elements SHADOW DOM § http://caniuse.com/#search=shadow%20dom TEMPLATES § http://caniuse.com/#feat=template HTML IMPORTS § http://caniuse.com/#search=html%20imports
  52. SPECS CUSTOM ELEMENTS § http://w3c.github.io/webcomponents/spec/custom/ HTML IMPORTS § http://w3c.github.io/webcomponents/spec/imports/ TEMPLATES

    § https://html.spec.whatwg.org/multipage/scripting.html#the-template-element SHADOW DOM § http://w3c.github.io/webcomponents/spec/shadow/