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.

*

*

Empfholende Artikel


NVM – Noder Version Manager

February 18, 2022

Als Fullstack oder Frontendentwickler benötigt man heute eigentlich immerNodeJS. Zumindest bei einem modernen Stack. Um zum Beispiel JS, CSS Dateien zu kompilieren oder in verschiedene Packages zu bündeln um es dann in das Projekt zu laden. Oder seine lokale Entwicklungsumgebung mit nützlichen Tools zu bereichern wie zum Beispiel Linter, Typescript. Wenn man mehrer verschiedene Projekte […]

InnoDB vs MyISAM

January 29, 2022

InnoDB setzt man ein um schnell Daten auszulesen. SELECT Anfragen werden hier schnell ausgeführt. MyISAM hingegen ist bei SELECT anfragen etwas langsamer aber dafür bei INSERT und UPDATE Anfragen schnell wie der Blitz. Daher kommt es häufig vor, dass man in einer Datenbank beide Formate vortrifft. Ich habe ein Projekt bei dem ich die Pageviews […]

Git Branch master zu main umbennen

December 20, 2021

Zuerst benennen wir unser Master in Main lokal um: 2. Nun möchten wir auf unserem entferntem Repository das selbe tun. Ändert den master auf main in eurem entfernetem Repository (GitLab, GitHub etc.). Dann könnt ihr von lokal aus: den neuen branch bespielen. Um den master jetzt zu löschen folgendes eingeben: Ich persönlich fand es unnötig […]

Sprechblassen mit HTML und CSS bauen

November 22, 2021

Es kommt immer mal wieder vor, dass man eine Sprechblase zum Beispiel in einer Kommentarbox bauen muss. Wie war das gleich nochmal?!? Man kann sich ja nicht immer alles merken und es gibt im Netzt auch nützliche Generatoren für diese Fälle. Für Sprechblasen könnte man zum Beispiel diesen hier nehmen: https://www.html-code-generator.com/css/speech-bubble-generator . Mit ein paar […]

Table colspan und rowspan Generator

November 21, 2021

Komplizierte Konstrukte mit Tabellen abzubilden war eigentlich eine Dispziplinzwischen den Jahr 2000 und 2003 herum. Immer wieder kommen aber bei Stackoverflow Fragen auf, wie man solche oder solche Tabellen darstellt. Statt auf das coole und moderne Grid System zurückzugreifen wird noch mit Tabellen gearbeitet. Wie auch immer. Wer sich den Horror mit colspans und rowspan […]

Eine bestehende Datenbank auf einem Docker laufen lassen

November 11, 2021

Stellt euch vor ihr bekommt die undankbare Aufgabe ein altes WordPress Projekt zu upgraden. Das Projekt hinkt bereits zwei Major Releases hinterher. Das bedeutet ihr könnt nicht einfach im Produktivsystem ein upgrade vollziehen. Ihr müsst euch das Produsystem auf eure lokale Entwicklungsumgebung kopieren. Dafür eignet sich Docker ganz gut. Heute gehe ich davon aus, dass […]