Alpine.js – Ein kurzer Einstieg

Nicht alle Webprojekte müssen zwangsläufig darauf hinauslaufen sie mit Javascript Frameworks wie Vue JS, React oder Angular umzusetzen. In den Jahren 2015 bis 2020 war das schon ein spürbarer Trend. Man betrachtet nicht mehr den Overhead von Frameworks bei kleinen Projekten sondern wie schnell man ohne lange Nachzudenken Projekte bauen kann. Allerdings fällt dieser Ansatz spätestens bei neuen Anforderungen einen auf die Füße. Ich meine jetzt nicht, dass es schlecht ist Frameworks zu nutzen. Ich baue sehr gerne Webapplikationen mit Vue JS. Aber kleine Projekte oder auch größere mit geringem dynamischen Frontendelementen bauen ich mittlerweile und mit vorliebe in Vanilla JS. Seit dem ich das mache wächst meine Javascript Passion von Codezeile zu Codezeile.

Heute möchte ich euch die Javascript Bibliothek Alpine.js vorstellen. Alpine ist quasi ein mini Miniframwork. Es bietet dem Nutzer die Reaktivität von größeren Framworks wie Vue oder React aber das zu deutlich weniger Rechenleistung und Code. Eigentlich genau das was man für ein kleines ansprechendes Webprojekt braucht.

Test Shop Seite gebaut mit TailwindCSS und Alpine.js.
Test Shop Seite gebaut mit TailwindCSS und Alpine.js. Zur Demo Seite.

Installation

Alpine.js kann man sich über CDN oder über NPM ins Projekt holen. In unserem Beispiel nutzen wir CDN. Ziel unseres Projekts wird sein, eine Shoping Cart Seite eines Fahrradshops zu bauen mit dynamischen Warenkorbmenü und Produktinformationen in Tab Style.

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>

Wie funktioniert Alpine.js

Es ist wirklich ganz einfach und am besten ich erkläre euch das in Schritten.

  1. Deklaration der Variablen im Scope. D.h. man definiert einen Container und deklariere im Start HTML Tag die Variablen die dynamisch sein sollen.
<div x-data="{ isOpen: false }">...</div>

2. In diesem Container hat Alpine.js nun zugriff auf die Variable isOpen. Sie ist mit false initialisiert worden. Im Container befindet sich ein Button der ein bestimmtes Textfeld anzeigen oder ausblenden soll (toogle).

<button @click="isOpen = !isOpen" @keydown.escape="isOpen = false" >klick</button>

Wiederrum im gleichen Container befindet sich auch der Content Block bzw. Textfeld der ein- und ausgeblendet werden soll.

<div x-show="isOpen">Lorem ipsum </div>

Hier kurz das ganze Beispiel:

<div x-data="{ isOpen: false }">
	<button @click="isOpen = !isOpen" @keydown.escape="isOpen = false" >klick</button>
	<div x-show="isOpen">Lorem ipsum</div>
</div>

Ähnlich wie bei Vue Js können wir auch dynamische Klassen hinzufügen. In unserem Beispiel wollen wir die Buttonfarbe zwischen rot und grün wechseln. Grün offen und Rot zu.

<div x-data="{ isOpen: false }">
   <p x-text="isOpen"></p>
   <button class="focus:outline-none" @click="isOpen = !isOpen">
      <span class="px-2 py-1 bg-red-700 text-white" :class="{ 'bg-green-300' : isOpen }">
   klick
      </span>
   </button>
   <div x-show="isOpen">
      Lorem ipsum                
   </div>                    
</div>

Das ist nur eine kleine Auswahl an Möglichkeiten. Alpine.js harmoniert blendend mit TailwindCSS.

Die eben aufgeführten Beispiele reichen aber bereits um das Tutorial Ziel zu erreichen. Hier der

Link zur ShopTest Seite

die ich mit Alpine.js und TailwindCSS umgesetzt habe. Dynamisch sind hier das toogle des Warenkorbes, Profilmenü sowie in der mobilen Ansicht das Burgermenü.

Links
Hier ein Link zu einer Seite die viele Alpine.js Snippets für euch bereit hält.
  • https://www.alpinetoolbox.com/examples/
  • https://github.com/alpinejs/alpine


Leave a Comment

Your email address will not be published. Required fields are marked *

*

*

Empfholende Artikel


Laravel Mailhog Docker

October 20, 2021

Letztens wurde ich gefragt, wie ich Mail bei Laravel teste. Ich meinte ich habe einen SMTP Server den ich nutzen kann. Da meinte er, dass wäre zwar okay aber man könnte sich damit auch eine valide Mailadresse verbrennen. Mit verbrennen meint der Kollege, dass sie global als SPAM Mailadresse angerechnet werden kann. Falls die Tests […]

MySQL über die Console

October 16, 2021

Vielleicht geht es euch ja wie mir. Ständig vergesse ich die MySQL Commands. Schnell kommt es vor, dass man in einer MySQL Docker Instanz etwas an der Datenbank machen muss. In meinem Fall, der mich dazu brachte es ein für alle mal die wichtigsten MySQL Commands niederzuschreiben, war es, dass meine Docker App ständig meinte […]

Docker: Laravel 8 mit PHP 8

October 15, 2021

Moinsen Leute! Laravel 8 mit PHP 8 auf einem nginx mit node 14 laufen lassen. Wer das benötigt, der sollte folgende docker config nutzen. Wer eine andere Node Version braucht, der schaut hier nach welche er braucht und kopiert den Link hier zur geeigneten Nodejs Distribution rein. Und hier die Docker-compose.yml Datei. Lege einen nginx […]

Git Remote Eintrag löschen

October 15, 2021

Ihr habt ein lokales Repository und ein Remote Repository. Das Remote Repository liegt zum Beispiel bei GitHub und ihr wollt es nun aber bei GitLab unterbringen. Wie löscht man jetzt die Remote Config im lokalen Git Projekt Verzeichnis. Falls ihr noch nicht in dem gewünschten Verzeichnis seid, dann aber schnell hin da. Mit git status […]

Docker GUI – Portainer easy und übersichtlich

October 6, 2021

Klar, ich mag die Kommandozeile. Für alle möglichen Aufgaben ist sie mein zuverlässiger Begleiter. So auch im Docker Umfeld. Die Commands sind eigentlich einfach aber man vergisst schnell wieder einiges und muss dann im Netz Nachschlagen. Vielleicht geht es euch ja genau so? Und für Docker gibt es eine freie und wirklich gute GUI. Sie […]

Tailwind Purge unter npm run dev laufen lassen

August 28, 2021

Einer der Hauptgründe warum ich von Bootstrap auf TaiklwindCSS umgestiegen bin, ist der realisierte Traum von relative kleinen CSS Dateien. Statt ein ganzes CSS Framework immer und wieder zu laden, kann man mit TailwindCSS nur den wirklich im Code benötigten Style generieren lassen. Also eine 100% Effizienz, was bedeutet wir sparen Ressourcen. Und zwar Strom […]