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


Git – Closing a Branch – Was soll das sein?

May 4, 2021

Wer mit Bitcucket arbeitet kennt den Terminus. Nach einem erfolgreichen Merge auf den Master kann der Branch mit einem Häckchen in einer Checkbox geschlossen werden. Unter den Kollegen ist man sich einig. Branch immer schließen. Bloß warum? Zuerst sollte erwähnt werden, dass es in Git kein explizietes Branch closen gibt. Man kann einen Branch aber […]

Git Pull Request enthält fremde Commits

April 2, 2021

Vielleicht ist das euch auch schon mal passiert. Mir jedenfalls passiert das immer mal wieder mal. Ich checke in ein Branch ein um zum Beispiel ein Code Review vorzunehmen. Nachdem ich fertig bin, schnappe ich mir ein Ticket und eröffne einen neuen Feature Branche. Der eine oder andere ahnt bestimmt schon, worauf ich hinaus will? […]

Git Commit Message Regeln

March 22, 2021

Lange Zeit war mir das auch nicht klar, dass es Regeln für Git Commit Messages gibt. Wie sinnvoll die Regeln sind erschließt sich spätestens dann wenn man in größeren Teams arbeitet. Diese 7 Regeln möchte ich euch hier kurz erklären. Die Regel hat der Softwareentwickler Chris Beams vor einiger Zeit erstellt und auf seinem Blog […]

HTML Boilerplate / Scaffold / Vorlage

February 13, 2021

Um schnell mal etwas auszuprobieren, kann es sein das man ein HTML Grundgerüst benötigt. Vielleicht geht es euch ähnlich wie mir. Ich bin faul uns suche dann im anderen Projekten schnell das Gerüst. Was aber immer mit nicht ganz ohne Aufwendung dann einzufügen ist. Man muss hier und dort noch was löschen bzw. korrigieren. Aus […]

Docker auf Ubuntu 18.04 installieren

February 13, 2021

Docker auf einem frischen Ubunto 18.04 installieren geht in wenigen Schritten. Mit frischem meine ich ein System wo noch keine ältere Dockerversion vorher lief. Wir holen jetzt paar Pakete die wir für die Docker Installation brauchen rein. Nun fügen wir den GPG Key/Schlüssel für das offizielle Docker Repository hinzu. (ist ein freies Kryptographiesystem) Jetzt fügen […]

Git – Neuen Branch verwerfen / löschen

February 10, 2021

Es kommt vor, dass man ein Feature für ein Projekt entwickeln soll und man zuerst ausprobiert was so geht. Ihr arbeitet an einem Remote Repository und entwickelt lokal. Dann schnell mal ein composer update und die composer.lock ist geändert. Ihr wollt am liebsten den ganzen Branch verwerfen und zum Step zurück wo ihr angefangen habt. […]