Write once, use anywhere: Framework agnostische Design Systems mit Web Components

Es gibt sie da draußen zu Hauf. Nein die Rede ist nicht von Frontend-Frameworks, sondern vorgefertigten Component Libraries wie "Angular Material", "Ionic", "MUI", "TUI", "MudBlazor" uvm. Sie alle versuchen uns das Leben als Entwickler einfacher zu machen und uns wiederverwendbare Komponenten zu liefern. Je nach Library sind sie Framework ab- oder unabhängig, mal besser, mal schlechter zu customizen.Deshalb ist es im Enterprise-Umfeld nicht selten, dass sich Firmen dazu entscheiden eigene Libraries nach ihren Bedürfnissen zu kreieren. Sollen dann auch noch unterschiedliche Frontend-Frameworks oder CMS Systeme damit bedient werden können, kommt man nicht um sie herum. Web Components.Sascha Lehmann von Thinktecture zeigt Ihnen in dieser Session wie Sie mit Hilfe von "Lit" hochgradig anpassbare und leichtgewichtige Web Components bauen können, auf welche Fallstricke Sie bei der Architektur der Library achten müssen, wie Sie dabei von etablierten Libraries lernen können und die höchstmögliche Kompatibilität erreichen indem Sie die API's nutzen die der Browser uns gibt.

Transcript

1. Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components Sascha Lehmann @derLehmann_S Consultant
2. Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/ Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components
3. Wo ist das Problem? Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components
4. DEV Team Produkt / POC Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components
5. Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components
6. DEV Team Produkt Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components UX Team
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 agnostic Design Systems auf Basis von Web Components
8. Web Components Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components
9. … aber basierend auf Web Standards Kein eigener Web-Standard… Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components Custom Elements ES Modules Shadow DOM HTML Templates
10. So werden sie definiert Custom Elements Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components
11. document node node node Shadow Host Shadow DOM Shadow Root node node node Shadow DOM Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components
12. Vanilla oder Library? Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components
13. Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components Frameworks Libraries
14. Projekte strukturieren Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components
15. Beispielanwendung animieren <Demo/>
16. Komponenten schneiden Architektur Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components
17. Input Element Ein naiver erster Wurf … Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components Verwendung
18. Nachteile Ein naiver erster Wurf … Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components • Wir ”verstecken” bzw. kapseln alles in der Komponente • Dadurch Schlechte Erweiterbarkeit • Konfiguration muss über viele Inputs geregelt werden • Durch das Shadow-DOM kommt es zu Erschwernissen hinsichtlich der Barrierefreiheit • Frameworks erkennen die Komponente nicht automatisch als Formular-Element • Wir verlieren das Browser-Defaultverhalten
19. “Never reimplement what the Browser already implements for you!” Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components
20. Nutze die Power von Slotting / Contentprojection Ein zweiter Anlauf … Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components Verwendung
21. 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 agnostic Design Systems auf Basis von Web Components
22. Beispielanwendung animieren <Demo/>
23. Alles auf einen Blick Do’s & Don’ts Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components
24. • 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 agnostic Design Systems auf Basis von Web Components
25. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön! @derLehmann_S sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/