UI-Feuerwerk mit Struktur: Web Components mit Angular

Was haben Bootstrap, Foundation oder Material Design gemeinsam? Richtig, sie bieten ein Framework, um unsere HTML5-Anwendung “entwicklerhübsch” darzustellen. Werden auf dieser Basis UI-Komponenten entwickelt, sind sie meist stark mit Konzept und Design des Frameworks verwoben. Eigene, oftmals durch Corporate Identity vorgegebene UI-Semantiken, Bedienkonzepte und Designkonzepte lassen sich nur schwer mit einem bestehenden Framework verheiraten. Die Portier- und Wiederverwendbarkeit leiden darunter. Doch 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/w-jax-2017-web-components

Transcript

1. JÖRG NEUMANN | ACANDO GMBH
   MANUEL RAUBER | THINKTECTURE AG
   WEB COMPONENTS MIT ANGULAR
   UI-FEUERWERK MIT STRUKTUR
   

   View Slide

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
   

   View Slide

3. MANUEL RAUBER
   THEMEN
   § Cross-Plattform Entwicklung mit Angular
   § Backend Entwicklung mit Node.js, .NET oder .NET Core
   § Consultant, Speaker, Writer
   KONTAKT
   § Mail: manuel.rauber@thinktecture.com
   § Twitter: @manuelrauber
   § Blog: https://manuel-rauber.com
   

   View Slide

4. View Slide

5. View Slide

6. DEVELOPER CHALLENGES
   

   View Slide

7. DESIGN DEVELOPMENT
   DESIGNER / DEVELOPER WORKFLOW
   

   View Slide

8. 
   

   View Slide

9. 
   
   
   
   
   
   
   § Keine Semantik
   § Intransparenz
   § Anpassungen schwierig
   § Framework-Abhängigkeit
   

   View Slide

10. 
    
    
    
    
    
    
    +
    -
    …
    
    
    
    § Global Scoping
    § Namenskonflikte
    § Styling-Konflikte
    

    View Slide

11. 
    
    
    
    
    
    
    
    
    § Semantik
    § Local Scoping
    § Konfiguration
    § Bundle Import
    

    View Slide

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
    

    View Slide

13. 
    
    
    
    
    
    
    
    
    Custom
    Elements
    HTML
    Imports
    Shaddow
    DOM
    HTML
    Templates
    

    View Slide

14. DEMO
    

    View Slide

15. CUSTOM ELEMENTS
    DEFINITION
    § Eigene HTML-Elemente erstellen
    § Das Verhalten ist vom Dokument entkoppelt
    § Eigenständiges Lifecycle-Modell (Erstellung, Attributänderungen, …)
    
    

    View Slide

16. DEMO
    

    View Slide

17. HTML TEMPLATES
    DEFINITION
    § HTML Element
    § Enthält Content der nach dem Laden
    nicht direkt gerendert wird
    § Wird erst bei Verwendung gerendert
    § Das Fragment kann im Dokument
    wiederverwendet werden
    
    
    
    Nr.
    Name
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

18. DEMO
    

    View Slide

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.
    

    View Slide

20. DEMO
    

    View Slide

21. SHADOW DOM - STYLING
    CSS SELECTORS
    § Pseudo-classes: :host, :host(), :host-context()
    § Pseudo-elements: ::slotted()
    § Combinator: >>> *
    
    <br/>:host {<br/>display: block;<br/>width: fit-content;<br/>font-size: 30px;<br/>background: #78909c;<br/>margin: 1px;<br/>padding: 14px;<br/>}<br/>span {<br/>background: white;<br/>font-size: 30px;<br/>}<br/>
    
    
    Document
    Element (Shadow Host)
    Shadow Root
    Content
    

    View Slide

22. 
    
    
    
    
    +
    -
    
    
    kg
    
    Verwendung:
    Template:
    SHADOW DOM - COMPOSITION
    DEFINITION
    § Ermöglicht das Einbetten von
    benutzerdefinierten Elementen
    § -Element im Template dient
    als Platzhalter
    § slot-Eigenschaft im Host stellt die
    Verbindung her
    

    View Slide

23. DEMO
    

    View Slide

24. HTML IMPORTS
    DEFINITION
    § Dienen zum Paketieren
    von Komponenten
    § Kann CSS und JavaScript enthalten
    § Einbindung erfolgt über:
    
    § Wird zukünftig von ES6-Modulen
    abgelöst
    
    
    Human Being
    
    
    
    What is a body without a heart?
    
    
    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');
    

    View Slide

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

    View Slide

26. 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
    

    View Slide

27. DEMO
    

    View Slide

28. 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
    

    View Slide

29. DEMO
    

    View Slide

30. ANGULAR
    

    View Slide

31. 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
    

    View Slide

32. 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()
    

    View Slide

33. DEMO
    

    View Slide

34. 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
    

    View Slide

35. @MANUELRAUBER
    @JOERGNEUMANN
    

    View Slide

36. Q & A
    

    View Slide

37. 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
    

    View Slide

38. 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
    

    View Slide

39. 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/
    

    View Slide