Alpine.js ist ein kleines JavaScript-Framework, mit dem sich Verhalten direkt im HTML beschreiben lässt: Menüs, die aufklappen, Tabs, Dialogfenster und Formulare mit Prüfung. Caleb Porzio hat es 2019 veröffentlicht.
- Alpine.js
Ein kleines JavaScript-Framework, das Interaktion über Attribute direkt im HTML-Code festlegt.
Beispiel: „Das Burger-Menü haben wir mit Alpine.js gebaut, dafür reichten drei Attribute im HTML.“Abgrenzung zu Vue.js: Die Schreibweise der Attribute ist an Vue angelehnt. Alpine braucht aber weder einen Bauschritt noch Komponentendateien; ein Script-Tag genügt.
Verwandt: HTMX, das ebenfalls über Attribute arbeitet und dabei Inhalte vom Server nachlädt.
Wie Alpine.js funktioniert
Über Attribute mit dem Präfix x-. Mit x-data legt ein Element fest, welche Daten es hat, mit x-on reagiert es auf Klicks oder Eingaben, und mit x-show blendet es sich ein oder aus. Alpine liest diese Attribute beim Laden der Seite und hält die Darstellung danach mit den Daten in Einklang.
<nav x-data="{ offen: false }">
<button x-on:click="offen = !offen">Menü</button>
<ul x-show="offen">
<li><a href="/leistungen/">Leistungen</a></li>
</ul>
</nav>Das HTML bleibt dabei die Quelle der Wahrheit. Wer den Quelltext liest, sieht an Ort und Stelle, was ein Element tut, und muss nicht in einer zweiten Datei suchen.
Wofür Alpine.js gedacht ist
Für Seiten, die auf dem Server entstehen, aus einem CMS oder einem PHP-Framework, und an einzelnen Stellen Interaktion brauchen. Genau dafür hat man früher jQuery genommen; Alpine beschreibt dasselbe deklarativ und mit deutlich weniger Code.
Gern kombiniert wird es mit Tailwind CSS und Laravel. Die Website von Homepage Helden läuft in genau dieser Kombination, mit Statamic als CMS, und jedes aufklappende Menü auf diesen Seiten ist Alpine.
Wann Alpine.js nicht mehr reicht
Wenn die Oberfläche selbst zur Anwendung wird, mit vielen Ansichten, gemeinsamem Zustand und eigenem Routing. Dann wird der Code in den Attributen unübersichtlich, und ein Framework mit Komponentendateien wie Vue.js oder React ist die bessere Grundlage.