Save 37% off PRO during our Black Friday Sale! »

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.

667fbca1f58bc0215c744b5ae8f8e5d2?s=128

Manuel Rauber

April 28, 2021
Tweet

Transcript

  1. Web Components: Bessere (SPA-) Architektur? Smart- & Presentation Components Pattern

    Manuel Rauber @ManuelRauber Consultant
  2. Manuel Rauber 
 Consultant @ Thinktecture AG manuel.rauber@thinktecture.com 
 @manuelrauber

    
 https://manuel-rauber.com
  3. • Motivation • Was sind eigentlich Komponenten?! • Web Components

    • Smart- and Presentation Components Pattern Agenda
  4. Motivation

  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
  6. Was sind eigentlich Komponenten?!

  7. None
  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?
  9. Web Components

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

    😱
  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
  12. Product Owner Manu Entwickler Manu

  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.
  14. Einige Zeit später…

  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
  16. Super, genau so! Wir brauchen jetzt aber noch ganz dringend

    eine Auswahlliste für Filme mit seiner Bewertung. Kannst Du das schnell machen?
  17. Einige Zeit später…

  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
  19. Genial, das ging ja richtig schnell! Jetzt haben wir ja

    noch etwas Zeit im Sprint übrig. Das gab’s noch nie!
  20. Einige Zeit später…

  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 ✅ ✅
  22. DRY

  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.
  24. Smart- & Presentation Components Pattern

  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
  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
  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
  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
  29. Einige Zeit später…

  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 ✅
  31. Einige Zeit später…

  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 :-)
  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
  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
  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
  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
  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
  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: manuel.rauber@thinktecture.com - @manuelrauber