Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Write once, use anywhere: Framework agnostische...

Sascha Lehmann
November 10, 2024
29

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.

Sascha Lehmann

November 10, 2024
Tweet

More Decks by Sascha Lehmann

Transcript

  1. Write once, use anywhere Framework agnostic Design Systems auf Basis

    von Web Components Sascha Lehmann @derLehmann_S Consultant
  2. Wo ist das Problem? Write once, use anywhere Framework agnostic

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

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

    Systems auf Basis von Web Components UX Team
  5. • 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
  6. … 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
  7. So werden sie definiert Custom Elements Write once, use anywhere

    Framework agnostic Design Systems auf Basis von Web Components
  8. 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
  9. Input Element Ein naiver erster Wurf … Write once, use

    anywhere Framework agnostic Design Systems auf Basis von Web Components Verwendung
  10. 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
  11. “Never reimplement what the Browser already implements for you!” Write

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

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

    anywhere Framework agnostic Design Systems auf Basis von Web Components
  15. • 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