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

Web Components: Bessere (SPA-)Architektur mit Smart- und Presentational-Components-Pattern

Web Components: Bessere (SPA-)Architektur mit Smart- und Presentational-Components-Pattern

Web Components: ein Begriff, gar (ehemaliger?) Hype, den wir in der Webentwicklung seit einiger Zeit lesen und immer wieder darüber stolpern. Custom Elements, Shadow DOM und HTML Templates ergeben ein natives Komponentenmodell für unseren Browser. Komponenten, wiederverwendbare SPA-Framework-unabhängige UI-Bausteine, die wir in jeder und für jede App nutzen könnten.

Doch noch immer werden Komponenten frameworkabhängig bspw. in Angular, React oder Vue.js entwickelt. Liegt das daran, dass unserer Anwendungsarchitektur noch ein wichtiges Pattern fehlt, um SPA-Components mit Web Components sinnvoll zu kombinieren? Mit dem Pattern der Smart und Presentational Components erreichen wir eine klare Trennung zwischen State Management (Smart) und reinem User Interface und seiner Interaktion (Presentational). Was genau es damit auf sich hat und wie dies mit Web Components realisiert werden kann, zeigt Manuel Rauber im Live-Coding mit Vor- und Nachteilen anhand einer Real-World-Demo-Applikation.

Manuel Rauber

April 28, 2021
Tweet

More Decks by Manuel Rauber

Other Decks in Programming

Transcript

  1. Web Components: Bessere (SPA-) Architektur?
    Smart- & Presentation Components Pattern
    Manuel Rauber
    @ManuelRauber
    Consultant

    View Slide

  2. Manuel Rauber

    Consultant @ Thinktecture AG


    [email protected]

    @manuelrauber

    https://manuel-rauber.com

    View Slide

  3. • Motivation


    • Was sind eigentlich Komponenten?!


    • Web Components


    • Smart- and Presentation Components Pattern
    Agenda

    View Slide

  4. Motivation

    View Slide

  5. • Erstellung wiederverwendbarer Frontend-Komponenten


    • Fokus: Mehr Pattern und Gedankenmodell, weniger konkrete Impl.


    • Klare funktionale und visuelle Zuständigkeiten


    • Bessere Teamaufteilung, Aufgabenverteilung, Spezialisierung


    • Aufbau einer Frontend-Komponenten-Bibliothek
    Motivation

    View Slide

  6. Was sind eigentlich Komponenten?!

    View Slide

  7. View Slide

  8. • (Wiederverwendbarer) Baustein


    • Scharf geschnittene Zuständigkeit (singular!)


    • De
    fi
    nierte Inputs (bspw. HTML-Attribute, JS-Properties, @Input, props, …)


    • De
    fi
    nierte Outputs (bspw. Custom Events, @Output, props, …)


    • Unterstützung von Slotting/Content-Projection/-Transclusion


    • Dokumentiert & getestet
    Was ist denn eigentlich eine Frontend-Komponente?

    View Slide

  9. Web Components

    View Slide

  10. Ein Tag im Leben eines Entwicklers
    In rund 45 Minuten 😱

    View Slide

  11. • Anforderung: Entwicklung einer Komponente


    • Anforderungen ändern sich über Zeit


    • Begutachtung und Diskussion der einzelnen Entwicklungsschritte


    • Ziel: Gedankenmodell für Komponentenschnitt aufbauen


    • Daher: Ideen und Pattern wichtig, Code weniger :-)
    Ein Tag im Leben eines Entwicklers

    View Slide

  12. Product Owner


    Manu
    Entwickler


    Manu

    View Slide

  13. Ich brauche eine CD-Auswahlliste zum
    Aufklappen! Meine Anforderungen sind:


    • Bei Klick soll ein kleine Liste aufgehen.


    • Jeder Eintrag besteht aus Titel und
    Interpret.


    • Nach dem Auswählen soll der Titel der CD
    stehen bleiben.


    • In der Liste soll die ausgewählte CD visuell
    anders dargestellt werden.

    View Slide

  14. Einige Zeit später…

    View Slide

  15. CD Dropdown
    • Visuelle Daten-Repräsentation


    • UI-Logik (Auf-/Zuklappen)


    • State Management


    • Ausgewähltes Item


    • Liste geöffnet/geschlossen


    • Datenservice/-liste
    🚨 Komponente hat zu viele Zuständigkeiten

    View Slide

  16. Super, genau so!


    Wir brauchen jetzt aber noch ganz dringend
    eine Auswahlliste für Filme mit seiner
    Bewertung.


    Kannst Du das schnell machen?

    View Slide

  17. Einige Zeit später…

    View Slide

  18. CD Dropdown
    • Visuelle Daten-Repräsentation


    • UI-Logik (Auf-/Zuklappen)


    • State Management


    • Ausgewähltes Item


    • Liste geöffnet/geschlossen


    • Datenservice/-liste
    Movie Dropdown
    🚨 Copy & Waste - Komponente zu mächtig
    • Visuelle Daten-Repräsentation


    • UI-Logik (Auf-/Zuklappen)


    • State Management


    • Ausgewähltes Item


    • Liste geöffnet/geschlossen


    • Datenservice/-liste

    View Slide

  19. Genial, das ging ja richtig schnell!


    Jetzt haben wir ja noch etwas Zeit im Sprint
    übrig. Das gab’s noch nie!

    View Slide

  20. Einige Zeit später…

    View Slide

  21. CD Dropdown
    • Datenservice/-liste
    Movie Dropdown
    • Datenservice/-liste
    Dropdown
    • Visuelle Daten-Repräsentation


    • UI-Logik (Auf-/Zuklappen)


    • State Management


    • ausgewähltes Item


    • Liste geöffnet/geschlossen
    🚨 Dropdown hat zu viele Zuständigkeiten
    ✅ ✅

    View Slide

  22. DRY

    View Slide

  23. Wir brauchen eine Änderung!


    Die Filmauswahlliste hat neue
    Anforderungen:


    • Wenn Bewertung > 8, soll der Eintrag
    hervorgehoben dargestellt werden.


    • Nach Auswahl eines Films soll sein
    Filmplakat anstelle des Titels angezeigt
    werden.


    View Slide

  24. Smart- & Presentation Components Pattern

    View Slide

  25. • Smart- & Presentation Components


    • Smart- & Dumb Components


    • Stateful & Stateless Components


    • Stateful & Pure Components


    • Container & Presentation Components


    Oft leicht unterschiedliche Ausprägungen mit gleicher Basisidee
    Ein Pattern mit vielen Namen

    View Slide

  26. • DRY - Don’t repeat yourself


    • IoC - Inversion of Control


    • Open/Closed Principle


    • Offen für Erweiterung


    • Geschlossen für Modi
    fi
    kation


    • Herausarbeiten von spezi
    fi
    zierten Zuständigkeiten


    • Macht auch das OnBoarding von Kollegen einfacher


    • Gewappnet sein für stets neue Anforderungen
    Idee des Patterns

    View Slide

  27. • Kümmern sich um das Aussehen


    • Haben (kaum/keine) Abhängigkeiten


    • Kommunizieren via Events (bspw. Custom Events, @Output, props, …)


    • Erhalten Daten via Properties/Attributes (@Input, props, …)


    • Haben lokalen UI-abhängigen State (bspw. Checkbox)


    • Haben keinen globalen State


    • Haben UI-abhängige Logik (bspw. Dropdown-Menü)


    • Gleiche Eingabe erzeugt gleiches UI
    Presentation Components

    View Slide

  28. • Kümmern sich um Daten & State


    • Geben Daten an Presentation oder andere Smart Components weiter


    • Hängen sich an Events/Outputs von Presentation Components


    • Haben (kaum/keine) eigene UI-Logik


    • Haben globalen und/oder lokalen State


    • Haben Abhängigkeiten zu App-Services (State, HTTP, …)
    Smart Components

    View Slide

  29. Einige Zeit später…

    View Slide

  30. CD Dropdown
    • Visuelle Daten-Repräsentation


    • State Management


    • Ausgewähltes Item


    • Datenservice/-liste
    Movie Dropdown
    Dropdown + Dropdown Item
    • UI-Logik (Auf-/Zuklappen)


    • State Management (geöffnet/geschlossen)
    • Visuelle Daten-Repräsentation


    • State Management


    • Ausgewähltes Item


    • Datenservice/-liste
    🚨 CD+Movie hat zu viele Zuständigkeiten

    View Slide

  31. Einige Zeit später…

    View Slide

  32. CD Dropdown
    • Visuelle Daten-Repräsentation


    • State Management


    • Datenservice/-liste
    Movie Dropdown
    Dropdown + Dropdown Item
    • UI-Logik (Auf-/Zuklappen)


    • State Management (geöffnet/geschlossen)
    • Visuelle Daten-Repräsentation


    • State Management


    • Datenservice/-liste
    🚨 Datenrepräsentation als eigene Komponente

    Select + Select Item
    • UI-Logik (An-/Abwählen)


    • State Management (Ausgewähltes Item)

    Übungsaufgabe für den Zuschauer :-)

    View Slide

  33. • Viele kleine Komponenten mit klaren Zuständigkeiten


    • Komponenten sind offen für Erweiterungen


    • Hohe Wiederverwendbarkeit


    • Dropdown für ein “User Menü” oder “Action Button” in einer Toolbar
    Fazit der Umbauarbeiten

    View Slide

  34. • Einfache Wiederverwendung von UI-Bausteinen mit unterschiedlichen
    Datenquellen


    • Aufbau von wiederverwendbaren UI-Bibliotheken


    • Bspw. mit Storybook


    • Don’t repeat yourself, Inversion of Control


    • Offen für Erweiterung/Anpassung ohne “göttliches Kon
    fi
    g-Objekt”


    • Klare Zuständigkeiten von Komponenten


    • De
    fi
    nierte Inputs/Outputs


    • Pattern ist in jedem Framework anwendbar
    Vorteile des Patterns

    View Slide

  35. • Kann mehr Zeit in der Entwicklung in Anspruch nehmen


    • Den richtigen Schnitt zu
    fi
    nden, kann anspruchsvoll sein


    • Diskussionspartner und Pair-Programming sehr sinnvoll


    • “You ain’t gonna need it”: typischer Feature-Creep
    Nachteile des Patterns

    View Slide

  36. • Pattern hilft Komponenten mit klarer Zuständigkeit zu schneiden


    • Komponenten werden besser wiederverwendbar


    • Fördert Zusammenarbeit & Diskussion


    • Fördert Teamaufteilung und OnBoarding


    • Anwendbar in jedem Framework
    Fazit

    View Slide

  37. • Blog Serie: “The Perks & Flaws of Web Components” (englisch)


    • https://bit.ly/web-components-series


    • Web Components Cheat Sheet (deutsch)


    • https://www.thinktecture.com/de/cheatsheet/web-components/


    • Blog Post über Smart- & Presentation Pattern: Coming soon!


    • https://www.thinktecture.com/de/newsletter
    Mehr über Web Components

    View Slide

  38. 🤷 Un’ nu?
    • Ausprobieren! Pattern in der eigenen Codebasis ausprobieren


    • Benutzen! Presentation-UI-Bibliotheken erstellen für die Anwendung


    • Vorbereitet sein! Neue Komponenten von vornherein überdenken
    • Slides & Repo: https://thinktecture.com/manuel-rauber


    • Kontakt: [email protected] - @manuelrauber

    View Slide