Alpine.js: Das Schweizer Taschenmesser für dynamische Weboberflächen

Das minimalistische JavaScript-Framework Alpine.js will Webseiten eine Prise JavaScript verleihen. Ein Praxisvergleich der Alternative zu jQuery.

In Pocket speichern vorlesen Druckansicht 53 Kommentare lesen

(Bild: Panwasin seemala / Shutterstock.com)

Lesezeit: 17 Min.
Von
  • Timo Zander
Inhaltsverzeichnis

Moderne, interaktive Websites sind ohne JavaScript (JS) nicht denkbar. Doch selten kommt es in Reinform (vanilla) daher, sondern eher unter Einsatz eines Frameworks, das die Kleinarbeit erledigt. Lange Zeit, von 2005 an, galt jQuery als vermeintliches Muss zur Webseitenerstellung, und noch immer nutzen über 95 Prozent der von W3Tech ausgewerteten Seiten mit JavaScript das jQuery-Framework.

Diese Quote ist für ein über 16 Jahre altes Framework bemerkenswert, insbesondere in der sonst eher schnelllebigen JavaScript-Welt. In der aktuellen Version ist jQuerys Funktionsumfang eindrucksvoll. DOM-Elemente lassen sich hinzufügen, entfernen, verschieben, modifizieren sowie ein- und ausblenden; mit der AJAX-Bibliothek bietet es eine nahezu vollständige Abdeckung aller HTTP-Funktionen. Ferner lassen sich sämtliche CSS-Attribute von Elementen auslesen, verändern und hinzufügen. Auch die verfügbaren Animationen und Effekte sind mit der Zeit ausgereifter und vielfältiger geworden.

Young Professionals schreiben für Young Professionals

Dieser Beitrag ist Teil einer Artikelserie, zu der die Heise-Redaktion junge Entwickler:innen einlädt – um über aktuelle Trends, Entwicklungen und persönliche Erfahrungen zu informieren. Bist du selbst ein "Young Professional" und willst einen (ersten) Artikel schreiben? Schicke deinen Vorschlag gern an die Redaktion: developer@heise.de. Wir stehen dir beim Schreiben zur Seite.

Doch mit dem Funktionsumfang wuchs auch die Kritik daran, zumal JavaScript viele dieser Funktionen mittlerweile auch selber beherrscht. Gerade deshalb erntet jQuery in der Online-Welt regelmäßig Kritik und wird häufig als Sinnbild veralteter und aufgeblähter JavaScript-Programmierung verspottet. Zahlreiche Frameworks schicken sich an, jQuery zu beerben. Ein besonders schlanker und minimalistischer Vertreter seiner Art ist Alpine.js.

In einem Talk zur diesjährigen Alpine.js-Konferenz am 10. Juni 2021 erzählt Caleb Porzio, der Initiator des Projekt, die Geschichte der Entstehung des Frameworks: Er arbeitete selbst zuvor ausgiebig mit jQuery, stieß aber – nach anfänglichem Enthusiasmus – auf Grenzen und Schwierigkeiten im Umgang mit dem Framework. Er beschreibt beispielhaft das Verpacken von HTML-Templates in JavaScript-Strings als Aspekt, der ihn störte. Ähnlich unzufrieden war er aber auch mit dem alternativen Framework Vue.js: Die komplexe Umsetzung des Datei-Uploads in einer Single Page Application warf für ihn erneut die Frage auf, wieso das nicht einfacher geht.

Empfohlener redaktioneller Inhalt

Mit Ihrer Zustimmmung wird hier ein externes YouTube-Video (Google Ireland Limited) geladen.

Ich bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit können personenbezogene Daten an Drittplattformen (Google Ireland Limited) übermittelt werden. Mehr dazu in unserer Datenschutzerklärung.

Davon angetrieben wandte Porzio sich zunächst von JavaScript ab, stellte allerdings angesichts der Umständlichkeit von JavaScript-freien Implementierungen wieder fest, wie wichtig die Sprache weiterhin für die Webentwicklung ist. Hierdurch gelangte er zur Idee eines eigenen JavaScript-Frameworks mit einer von Vue.js inspirierten, deklarativen Syntax – ohne das Skript-Tag. In seiner Vorstellung sollte alles im Document Object Model (DOM), also in HTML-Attributen stattfinden. Aus Vue.js-Attributen wie v-if oder v-show wurden x-if und x-show – das von ihm "Project X" getaufte Framework war geboren.

Dieses minimale Framework mit MVP-Charakter (Minimum Viable Product) stieß auf Begeisterung: Rasch sammelten sich die ersten Contributors im GitHub-Repository, und das Echo in den sozialen Medien war positiv. Porzio merkte, dass nicht nur er den Bedarf für ein solches Framework verspürt, und entwickelte – nun gemeinsam mit der Community – das noch sehr rohe Project X weiter zu Alpine.js. Offenbar bleibt er dabei seinem bisher bewiesenen Ethos treu: Minimalität und Robustheit ("rugged and minimal") stehen ebenso wie die Nutzererfahrung im Fokus. In seinem Talk beschreibt er seinen Antrieb damit, "Dinge zu nehmen, die nahezu jeder Webentwickler machen muss, und sie idiotisch einfach zu machen".

Die Fangemeinde ist indes beachtlich: Mit fast 18 000 Sternen auf GitHub und knapp 150 Kontributoren kann sich das Projekt allmählich mit großen Projekten der Open-Source-Welt wie beispielsweise Jenkins (18 000 Sterne), Underscore (26 000 Sterne) oder Preact (30 000 Sterne) messen. Auch das erstmalige Veranstalten der Entwicklerkonferenz Alpine Day im Jahr 2021 spricht für eine aktive Community, die sich mittlerweile um das Projekt geformt hat.