Vielen Dank an alle Beteiligten für eine tolle enterJS 2024! Im Herbst geht es weiter mit einem Online-Event zu Barrierefreiheit im Web

Web Component Design Patterns mit Lit

Online-Workshop, 29. Juni 2023

Web Components ermöglichen UI-Komponenten für alle großen Frameworks – write once, run everywhere! Schnell und performant mit Lit, aber nach der Euphorie folgt schnell die Ernüchterung: Wie bekomme ich meine Komponenten wirklich performant? Wie kann ich Verhalten zwischen Komponenten teilen? Welche Möglichkeiten der Komponierung gibt es? Was sind effiziente Parent-Child-Patterns und wie nutze ich eigentlich Events effizient? Wie kann ich Updates minimieren und darüber hinaus, wie teste ich das eigentlich?

Dieser Workshop hat die Antwort auf all diese Fragen und zeigt sie durch anschauliche Praxisbeispiele aus einer sehr großen UI-Library für einen DAX-Konzern.

Vorkenntnisse

  • Grundsätzliches Verständnis von Web Components oder Erfahrungen in einem großen Frontend-Framework
  • Verständnis, was Design Patterns sind
  • Viele Fragen und Probleme
  • Kenntnisse von Lit sind von Vorteil, aber kein Muss

Lernziele

  • Vermittlung von Design Patterns für Web Components, die nicht wirklich auf Lit beschränkt sind
  • Darstellung von Best Practices im Umgang mit Web Components

Agenda

  • WebComponents 101 ReCap
  • Basic Patterns: Slots
  • Basic Patterns: Events
  • Basic Patterns: Focus Delegation
  • Basic Patterns: Resize Observation
  • Advanced Patterns: Parent-Child Composition
  • Advanced Patterns: Mixins in Lit
  • Use-Case: Slotted Icons
  • Use-Case: Custom Radio Button Group
  • Finale: Lit Tipps’n Tricks

 

Speaker

 

Christian Ulbrich
Christian Ulbrich und seine Firma Zalari GmbH sind dort zu finden, wo Enterprise-Frontendapplikationen sind. Seit 10 Jahren wird über AngularJS (R.I.P.), Angular, React, Vue, Lit, Svelte alles durchgewalkt und jede Frontendherausforderung genommen. Micro-Frontends, Web Components, Blockchain im Frontend – uns erschüttert nichts und wenn die Probleme anfangen, legt er erst richtig los...

enterJS-Newsletter

Du möchtest über die enterJS
auf dem Laufenden gehalten werden?

 

Anmelden