Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Manuel Rauber 
 Consultant @ Thinktecture AG [email protected] 
 @manuelrauber 
 https://manuel-rauber.com

Slide 3

Slide 3 text

• Motivation • Was sind eigentlich Komponenten?! • Web Components • Smart- and Presentation Components Pattern Agenda

Slide 4

Slide 4 text

Motivation

Slide 5

Slide 5 text

• 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

Slide 6

Slide 6 text

Was sind eigentlich Komponenten?!

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

• (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?

Slide 9

Slide 9 text

Web Components

Slide 10

Slide 10 text

Ein Tag im Leben eines Entwicklers In rund 45 Minuten 😱

Slide 11

Slide 11 text

• 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

Slide 12

Slide 12 text

Product Owner Manu Entwickler Manu

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

Einige Zeit später…

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Super, genau so! Wir brauchen jetzt aber noch ganz dringend eine Auswahlliste für Filme mit seiner Bewertung. Kannst Du das schnell machen?

Slide 17

Slide 17 text

Einige Zeit später…

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Genial, das ging ja richtig schnell! Jetzt haben wir ja noch etwas Zeit im Sprint übrig. Das gab’s noch nie!

Slide 20

Slide 20 text

Einige Zeit später…

Slide 21

Slide 21 text

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 ✅ ✅

Slide 22

Slide 22 text

DRY

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

Smart- & Presentation Components Pattern

Slide 25

Slide 25 text

• 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

Slide 26

Slide 26 text

• 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

Slide 27

Slide 27 text

• 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

Slide 28

Slide 28 text

• 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

Slide 29

Slide 29 text

Einige Zeit später…

Slide 30

Slide 30 text

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 ✅

Slide 31

Slide 31 text

Einige Zeit später…

Slide 32

Slide 32 text

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 :-)

Slide 33

Slide 33 text

• 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

Slide 34

Slide 34 text

• 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

Slide 35

Slide 35 text

• 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

Slide 36

Slide 36 text

• 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

Slide 37

Slide 37 text

• 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

Slide 38

Slide 38 text

🤷 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