Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components Sascha Lehmann @derLehmann_S Consultant

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

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

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

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

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

• 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

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

… 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

So werden sie definiert Custom Elements Write once, use anywhere Framework agnostic 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 agnostic Design Systems auf Basis von Web Components

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

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

Projekte strukturieren Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components

Beispielanwendung animieren

Komponenten schneiden Architektur Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components

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

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

“Never reimplement what the Browser already implements for you!” Write once, use anywhere Framework agnostic Design Systems auf Basis von Web Components

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

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

Beispielanwendung animieren

Alles auf einen Blick Do’s & Don’ts Write once, use anywhere Framework agnostic 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 agnostic Design Systems auf Basis von Web Components

Sascha Lehmann [email protected] Dankeschön! @derLehmann_S [email protected] https://www.thinktecture.com/thinktects/sascha-lehmann/  ✉ 