Seite 9 - Alpine.js

Mehrstufige Formulare erhöhen die Conversion, wenn sie UX-technisch sauber umgesetzt sind: klare Fortschrittsanzeige, Validierung pro Schritt statt erst beim Submit, und zuverlässige Rückwärtsnavigation ohne Datenverlust. Mit Alpine.js lässt sich dieses Pattern ohne externe Bibliothek vollständig realisieren.

x-data ist das Herzstück jeder Alpine.js Komponente. Wer State-Scope falsch einschätzt, landet bei unerwarteten Reaktivitäts-Effekten und schwerem Refactoring. Dieses Tutorial zeigt, wie man State korrekt abgrenzt, wiederverwendet und zwischen Komponenten kommuniziert.

Ein Mengenauswahl-Stepper wirkt trivial, ist aber voller Detailfragen: Was passiert bei manueller Eingabe eines ungültigen Werts? Wie wird der Lagerbestand als Obergrenze respektiert? Wie funktioniert die Bedienung ohne Maus? Mit Alpine.js lässt sich ein Stepper bauen, der all das sauber löst, ohne eine externe Formularbibliothek zu benötigen.

Alpine.js-Komponenten zu testen ist nicht offensichtlich: Das Framework ist eng an das DOM gekoppelt, was spezielle Test-Setups erfordert. Mit Vitest, jsdom und @testing-library/dom lassen sich reaktive Alpine-Komponenten zuverlässig, wartbar und schnell testen.

Ein Mega Menu Dropdown mit mehrspaltigen Unterkategorien ist eines der komplexesten Navigationsmuster im E-Commerce, und eines der am häufigsten falsch umgesetzten in Bezug auf Barrierefreiheit. Mit Alpine.js, dem Disclosure-Pattern statt falscher Menu-Rollen und sauberer Tastatursteuerung lässt sich ein Mega Menu bauen, das für Maus, Tastatur und Screenreader gleichermaßen funktioniert.

Flatpickr bringt Kilobytes jQuery-Erbe und eine externe Abhängigkeit mit. Ein eigener Alpine.js-Datepicker entsteht aus weniger als 80 Zeilen reaktivem JavaScript – mit Monatsnavigation, Keyboard-Support, Min/Max-Grenzen und vollständiger ARIA-Semantik, ohne eine einzige externe Abhängigkeit.

Ein Kanban Board mit Spalten, verschiebbaren Karten und persistentem Zustand lässt sich vollständig mit Alpine.js und der nativen HTML5 Drag and Drop API umsetzen. Kein SortableJS, kein jQuery UI, kein zusätzliches Kilobyte JavaScript, dafür volle Kontrolle über Verhalten, Barrierefreiheit und Darstellung des Boards.

Eine Preistabelle mit Umschalter zwischen monatlicher und jährlicher Abrechnung ist bei SaaS-Produkten und Abo-Modellen Standard, weil sie den Jahresrabatt direkt sichtbar macht und die Kaufentscheidung erleichtert. Mit Alpine.js entsteht eine Preistabelle, die Beträge reaktiv umrechnet, Rabatt-Badges anzeigt und den empfohlenen Tarif hervorhebt, komplett ohne Page Reload und ohne serverseitige Logik im Frontend.

Alpine.js v3 bietet 15 Direktiven, 6 magische Properties und 3 globale Methoden. Wer alle davon kennt und den richtigen Einsatzort versteht, schreibt interaktive UIs ohne Build-Step, ohne Virtual DOM und ohne die Komplexität großer Frameworks – direkt im HTML, reaktiv und wartbar.

Barrierefreiheit ist keine optionale Ergänzung – sie ist eine gesetzliche Anforderung und ein Qualitätsmerkmal. Alpine.js macht es einfach, ARIA-Attribute reaktiv mit dem UI-Zustand zu synchronisieren: aria-expanded folgt automatisch dem Toggle-State, aria-hidden wird dynamisch gesetzt, und Fokus-Traps halten den Keyboard-Fokus im richtigen Kontext.