Write once, use anywhere Framework agnostische Design Systems mit Web Components Sascha Lehmann @derLehmann_S Consultant 

Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S https://www.linkedin.com/in/sascha-lehmann [email protected] https://www.thinktecture.com/thinktects/sascha-lehmann/ Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Wo ist das Problem? Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

DEV Team Produkt / POC Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

DEV Team Produkt UX Team Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

• Gilt eine frirmenweite Regelung mit welchem Framework gearbeitet wird, oder kann jedes Team nach Entwicklerzusammensetung/-erfahrung frei entscheiden? • Gibt es externe Dienstleister oder Argenturen die mit im Boot sind? • Gibt es CMS Systeme die auch versorgt werden müssen? • Etc. Welche Fragen gilt es zu stellen? Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Web Components Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Design Systems Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

• Eine Sammlung von Erfahrungen (Do’s and Don’ts) • Pattern & Component Library • Styleguide (Die Gurndlage des Designprozesses) • Design Language Was ist ein Design System Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

• Visuelle Konsistenz in einer (oder mehreren) Anwendung(en) • Einheitliche Basis für Product Owner, Marketing und Entwicklung • Erzeugt ein Interface zwischen Design & Entwicklung • Schnellere Implementierung neuer Features Was sind die Ziele? Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Welche Design Systems gibt es? Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Building Blocks eines Design Systems Tokens md.sys.color.primary md.sys.color.on-primary md.sys.typescale.display-l md.sys.typescale.display-s Typography Display Headline Title Body Colors Primary Secondary Tertiary Background Elevations 0dp 1dp 2dp 3dp States enabled disabled Layout Gaps Margins Paddings Border-Radius Motion Design Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Web Components Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

… aber basierend auf Web Standards Kein eigener Web-Standard… Custom Elements ES Modules Shadow DOM HTML Templates Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

So werden sie definiert Custom Elements Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

document node node node Shadow Host Shadow DOM Shadow Root node node node Shadow DOM Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Vanilla oder Library? Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Frameworks Libraries Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Projekte strukturieren Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Componentss 

Beispielanwendung animieren 

Komponenten schneiden Architektur Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Componentss 

Input Element Ein naiver erster Wurf … Verwendung Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Vorteile Ein naiver erster Wurf … • Properties können „straight forward“ übrgeben werden • Styling ist vollständig durch Shadow-DOM gekapselt • Einfache Verwendung der Komponente Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Nachteile Ein naiver erster Wurf … • Wir ”verstecken” bzw. kapseln alles in der Komponente • Soll die komponente später erweitert werden wächst auch die Anzahl der „Input-Parameter“ → Input-Hell • Bei Elementen die im Formular-Kontext verwendet werden sollen → Frameworks und native Forms erkennen die Komponente nicht automatisch als Formular-Element Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Nutze die Power von Slotting / Contentprojection Ein zweiter Anlauf … Verwendung Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Vorteile Ein zweiter Anlauf … • Die ”nativen” HTML Elemente bleiben im Light-DOM ✓ Default Verhalten bleibt erhalten ✓ Barrerefreiheit kann gewärleistet werden ✓ Keine Wrapper für Frameworks nötig • Höhere Flexibilität der Komponente ✓ Keine ”Input-Hell” ✓ Einfachere Erweiterbarkeit ✓ Komponente gibt die Struktur vor Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Nachteile Ein zweiter Anlauf … • Erhört die „Komplexität“ der Komponente Aufgrund von verteiltem Content • “Slotted“ Elements weden im Context des „Hosts“ gestyled und verbleiben im Light-DOM Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Web Component für native Forms registrieren Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

• Property-Driven-Ansatz eignet sich ideal für Kleine, leichtgewichtige Komponenten, bei denen nur das “Verhalten” beeinflussen • Content-Driven-Ansatz eignet sich für Komponenten die auf eine flexible Komposition von ”Content” angewiesen sind. Oder für Komponenten die in einem Form-Context eingesetzt werden → Bspw. Layouts, Container, Cards etc. Empfehlung Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Beispielanwendung animieren 

Alles auf einen Blick Do’s & Don’ts Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

• Zu Beginn ausführlich das Projektumfeld prüfen • Für Library oder Framework entscheiden • Mit der grundlegenden Technologie vertraut machen • Saubere Projektstruktur aufsetzen • Komponenten klein und leichtgewichtig halten • Slotting / Contentprojection nutzen um Flexibilität zu erhöhen • Reger Austausch mit UI/UX Team • Nichts reimplementieren was der Browser schon für uns tut • Alles in der Komponente wegkapseln • Mehrere Zuständigkeiten in einer Komponente vermischen • Vom Projektdruck treiben lassen Do’s Don’ts Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components 

Sascha Lehmann [email protected] Dankeschön!