Lit-Entwickler für Web Components und Widgets, die auf jeder Website laufen.

Warum Lit und nicht React, Angular oder Vue

• Ein normales HTML-Element: Eine Lit-Komponente ist ein Custom Element, das der Browser von sich aus kennt. Sie läuft in reinem HTML, in WordPress und in React-, Angular- oder Vue-Apps, und die Seite muss nie wissen, womit sie gebaut wurde.
• Styles, die sich nicht in die Quere kommen: Shadow DOM hält das CSS des Widgets drinnen und das CSS der Seite draußen. Das Theme der Website kann das Widget nicht kaputt machen und das Widget nicht die Website. Farben und Schriften werden über CSS Custom Properties angepasst, die genau für diesen Weg über die Grenze gedacht sind.
• Klein: Lit selbst hat komprimiert etwa 5 KB. Ein Widget in React, Angular oder Vue bringt sein Framework mit, auf eine Seite, die vielleicht schon ein anderes lädt.
• Nah an der Plattform: Templates sind normale JavaScript-Template-Literals, ohne JSX-Compiler und ohne virtuelles DOM, und Lit aktualisiert nur die Teile, die sich geändert haben. Die Element-API ist ein Browser-Standard, keine Framework-Version, der Sie hinterherlaufen müssen.

Im Einsatz: ein Reservierungs-Widget für Restaurants

Für einen Anbieter von Gastro-Software habe ich ein Reservierungs-Widget gebaut, das Restaurants mit einem Script-Tag und einem Element in ihre eigene Website einbinden. Ein Button öffnet einen Dialog, der den Gast durch Datum, Personenzahl, Service, Uhrzeit und Kontaktdaten führt, mit Event-Tickets, Anzahlungen über Stripe, Restaurants mit mehreren Standorten und Alternativzeiten, wenn die gewünschte Zeit belegt ist. Es spricht Deutsch (per Sie oder per du, auch in der Schweizer Variante), Englisch, Spanisch, Französisch und Italienisch, hat drei Themes und nimmt seine Farben aus Attributen oder CSS Custom Properties.

Der erste Download ist komprimiert etwa 22 KB groß, Lit inklusive. Der eigentliche Ablauf und jede Sprache laden erst, wenn sie gebraucht werden. Das Widget kommt aus einem CDN: Jedes Release bekommt eine eigene URL, die sich nie ändert, und jeder Pull Request einen Vorschau-Link, der direkt im Pull Request steht. Linkvorschauen in WhatsApp oder Instagram führen nie JavaScript aus, deshalb rendert ein kleiner Node-Service auf Dokploy für jedes Restaurant eine Reservierungsseite auf dem Server, mit dem Widget darin.

Im Einsatz: ein Buchungsbutton für Versicherungspartner

Für eine große Autoglas-Kette habe ich einen Buchungsbutton gebaut, den Versicherungspartner auf ihren eigenen Websites einbinden. Der Partner füllt ihn mit den Kunden- und Fahrzeugdaten, die er schon hat. Ein Klick prüft die Daten, legt einen Buchungsentwurf an und schickt den Kunden auf die Buchungsseite, wo er mit den bereits eingetragenen Daten abschließt. Das Ganze ist eine einzelne, eigenständige Datei von komprimiert etwa 17 KB, Lit inklusive, gestaltet komplett über CSS Custom Properties.

Lit neben dem Rest des Stacks

Eine ganze Web-App würde ich nicht mit Lit bauen. Für eine App mit Routing, Formularen und viel Zustand nehme ich Angular. Lit ist für die Teile, die auf Seiten leben müssen, die Sie nicht kontrollieren: Widgets, Einbettungen und Designsysteme, die Teams mit unterschiedlichen Frameworks gemeinsam nutzen. Eine Buchungsplattform in Angular mit einem Lit-Button auf den Websites der Partner ist genau diese Aufteilung.

So können wir zusammenarbeiten

• App-Entwicklung: ein Widget oder eine Komponentenbibliothek als Projekt, mit schriftlichem Umfang, einer Demo pro Woche, und der Code gehört Ihnen.
• Team-Verstärkung: Ich arbeite in Ihrem Team an Ihren Web Components mit, Teilzeit oder Vollzeit, ab drei Monaten.
• Beratung: welches Framework zu Ihrem Widget oder Designsystem passt, oder ein Review des bestehenden, nach Stunden oder als monatlicher Retainer.