Heutzutage gibt es eine unfassbar große Anzahl an JavaScript Frameworks, die einem das Entwickeln von Webseiten und Webanwendungen vereinfachen wollen. Gerade für größere, interaktivere Anwendungen helfen diese Framworks viel. Jedoch kommen sie vermehrt mit einem Mehraufwand daher, der sich erst bei größeren Projekten lohnt. Für kleinere Webseiten gibt es nicht unbedingt viele Vorteile. Das möchte Alpine.js ändern. Dabei legt es Wert darauf, dass man es in eine bestehende HTML Seite integrieren kann. So ist man nicht unbedingt darauf angewiesen, die Webseite von Grund auf neu zu schreiben. Auch möchte AlpineJS einen Syntax etablieren, die es nicht unbedingt erforderlich macht auf Vanila JavaScript zurückgreifen zu müssen.
Ein kurzer Überblick
Aber lass es uns an einem einfachen Beispiel demonstrieren. Wir möchten eine Webseite bauen, auf der wir einen Button klicken können, der uns Text anzeigen lässt.
Vanila JavaScript
Mit normalen JavaScript würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<button onclick="hide()">Erweitere</button>
<div id="versteckt">
Das ist der versteckte Inhalt.
</div>
</body>
<script>
function hide() {
var x = document.getElementById("versteckt");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</html>JQuery
Das gleiche können wir auch schon mit JQuery vereinfachen:
!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").toggle();
});
});
</script>
</head>
<body>
<button>Erweitere</button>
<div id="versteckt">
Das ist der versteckte Inhalt.
</div>
</body>
</html>AlpineJS
Mit Hilfe von AlpineJS geht dies noch ein wenig einfacher.
<!DOCTYPE html>
<html>
<head>
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<div x-data="{ open: false }">
<button @click="open = !open">Erweitere</button>
<div x-show="open">
Das ist der versteckte Inhalt.
</div>
</div>
</body>
</html>Doch was haben wir gerade gemacht?
Als Erstes haben wir AlpineJS importiert.
<script src="//unpkg.com/alpinejs" defer></script>Danach haben wir mit x-data="{ open: false } die Variable open initialisiert. Hierbei nutzt AlpineJS die gleichen Syntax von JavaScript Objects. So haben wir die Daten schon zusammen. Als Nächstes brauchen wir Logik für unseren Buttons. Hierfür können wir das Klick-Event gleich direkt ansprechen mit @click. Was danach kommt, ist wieder einfaches JavaScript. Hierbei können wir auch Funktionen nutzen, die wir woanders definiert haben. Jedoch habe ich mich bei diesem Beispiel dafür entschieden, die Logik gleich dahinter zu schreiben. Als allerletztes bekommt unser div noch die Funktion x-show="open". Dieses schaut nach, ob die Variable wahr oder falsch ist und zeigt dementsprechend den Teil an.
Fazit
Wie kurz umrissen, kann AlpineJS für kleinere Webseiten eine einfachere Möglichkeit sein, schnell Interaktivität zu ermöglichen. Jedoch befindet sich dieses Projekt erst noch am Anfang und kann deswegen nicht unbedingt so ausgereift sein wie andere Möglichkeiten. Dennoch ist es einen Blick wert.
Schreibe einen Kommentar