Write-once-use-anywhere-web-components-md-dev-days.pdf

Frameworks und UI-Libraries gibt es viele – doch kaum eine ist wirklich universell einsetzbar und anpassbar. Mit Web Components schaffen Sie die Basis für Design Systems, die flexibel, plattformübergreifend und zukunftssicher sind. Dank moderner Browser-Schnittstellen wie der Popover- oder Anker-Positioning-API wird die Entwicklung einfacher als je zuvor. Sascha Lehmann zeigt in dieser Session, wie Sie mit Lit leistungsstarke Web Components bauen, typische Fallstricke vermeiden und APIs für maximale Kompatibilität gestalten.

Transcript

1. Write once, use anywhere Framework agnostische Design Systems mit Web Components Sascha Lehmann @derLehmann_S Consultant
2. Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S https://www.linkedin.com/in/sascha-lehmann sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/ Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
3. Wo ist das Problem? Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
4. DEV Team Produkt / POC Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
5. Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
6. DEV Team Produkt UX Team Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
7. • 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
8. Web Components Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
9. Design Systems Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
10. • 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
11. • 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
12. Welche Design Systems gibt es? Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
13. 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
14. Web Components Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
15. … 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
16. So werden sie definiert Custom Elements Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
17. 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
18. Vanilla oder Library? Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
19. Frameworks Libraries Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
20. Projekte strukturieren Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Componentss
21. Beispielanwendung animieren <Demo/>
22. Komponenten schneiden Architektur Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Componentss
23. Input Element Ein naiver erster Wurf … Verwendung Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
24. 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
25. 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
26. Nutze die Power von Slotting / Contentprojection Ein zweiter Anlauf … Verwendung Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
27. 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
28. 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
29. Web Component für native Forms registrieren Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
30. • 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
31. Beispielanwendung animieren <Demo/>
32. Alles auf einen Blick Do’s & Don’ts Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
33. • 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
34. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön!