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 Zustimmung 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.

Der Minimalismus von Alpine.js gewährleistet, dass Entwickler das leichtgewichtige Framework für Kleinigkeiten einsetzen können, ohne der Webanwendung einen riesigen Überbau wie etwa jQuery hinzuzufügen. Außerdem vermeidet Alpine.js einige Fallstricke des JavaScript-Ökosystems: Build-Tools, Bundling, Transpiling und weitere Elemente können rasch zu großer Komplexität führen. Alpine hingegen lässt sich per Content Delivery Network (CDN) oder Datei schnörkellos einbinden, wie folgendes Listing zeigt: Das reine Einbinden genügt, um Alpine zu nutzen.

<script src="//unpkg.com/alpinejs" defer></script>

Des Weiteren soll Alpine.js paradigmafrei sein: Entwickler müssen keine vollständige Single Page Application bauen, sondern können das Framework in jeder Umgebung nutzen, und zwar unabhängig davon, ob es sich um eine traditionelle serverseitige Anwendung oder Progressive Web App handelt. Mit rund 32 Kilobyte ist das nach Erfahrung des Autors bedenkenlos möglich, ohne die Performance zu beeinträchtigen. Der Alpine.js-Erfinder betont in seinen Talks zur Alpine-Konferenz, dass seine Inspiration unter anderem im populären CSS-Framework Tailwind liegt: Das ist ebenfalls modular aufgebaut und verlagert sämtliches Styling mithilfe von CSS-Klassen in das DOM. Auch deshalb wird Alpine.js unter Anhängern häufig als "das Tailwind für JavaScript" bezeichnet.

Alpines offizielles Logo

(Bild: Caleb Porzio, alpinejs.dev)

Alpine verzichtete lange auf eine eigene Dokumentation oder Branding. Gründer Porzio wollte den Fokus auf den Inhalt legen und die Menschen mit der Einfachheit sowie den Funktionen des Frameworks überzeugen. Deshalb befanden sich bis Anfang Juni 2021 sämtliche Informationen zum Projekt in der README-Datei auf GitHub. In seinem Talk "The Story of Alpine" erzählt er die Anekdote, dass er unzählige Anfragen erhalten habe von Nutzern, die anboten, eine solche Dokumentationsseite zu spenden. Der Wunsch nach einer besseren und komfortableren Dokumentation war offensichtlich groß. Mittlerweile verfügt Alpine über beides: Markenimage und ausführlichere Anleitungen, auch um den Einstieg ins Framework zu erleichtern.

Alpine.js befindet sich mittlerweile in seinem dritten Major-Release. Während Version 2.0 nur einige Breaking Changes einführte und somit – nach den Grundsätzen der semantischen Versionierung – eine Major-Version sein musste, ist Alpine 3.0 eine komplette Kernsanierung der Codebasis. Die mangelnde Erweiterbarkeit von Alpine 2.x sorgte bei den Entwicklern für Schwierigkeiten und machte das Erstellen von Plug-ins aufwendig. In einem seiner Vorträge sagt Porzio, dass er erst durch das Schreiben von Alpine.js 1 und 2 genug Erfahrung sammeln konnte, um eine qualitativ hochwertige JavaScript-Bibliothek zu erstellen. Dies setzte er beim Neuschreiben des Codes um.

Version 3 enthält bisher zwei hauseigene Plug-ins. Auch durch die Community ist künftig mit einer größeren Menge an Erweiterungen zu rechnen durch die inzwischen vereinfachte Entwicklung. Der geringe Umfang der Codebasis der beiden offiziellen Plug-ins ist bemerkenswert – die Kernfunktionalitäten sind in zwanzig bis dreißig Zeilen implementiert und zeugen von der soliden API, die Alpine.js 3 den Plug-in-Autoren bietet.

Das Intersect-Plug-in ermöglicht das Ausführen von Code, sobald Nutzer ein DOM-Element in den sichtbaren Bereich scrollen. Hiermit lassen sich unter anderem Funktionen wie das Einblenden von bestimmtem Text oder Bereichen implementieren, sobald die Nutzer weit genug gescrollt haben. Das Plug-in bietet somit einen vereinfachten Wrapper für die Intersection Observer API, mit der aktuelle Browser die Intersect-Funktion anbieten.

Intersect: Plug-in Box

Die beispielhafte Nutzung des Intersect-Plug-ins zum Anzeigen eines Alerts veranschaulichen die beiden Abbildung zur Plug-in Box und dem Plug-in Alert.

Intersect: Plug-in Alert

Das zweite Plug-in namens Persist erlaubt das einfache Speichern von Variablen im LocalStorage des Browsers. Bei der Initialisierung von Variablen werden deren Werte mit $persist(…) umschlossen. Das Framework "merkt sich" anschließend stets den aktuellen Wert der Variable und lädt ihn beim erneuten Besuch der Seite wieder.

jQuery 101: Quellcode erläutert

jQuery-Code basiert auf dem zentralen jQuery-Objekt $. Ruft man es als Methode auf, selektiert es Elemente anhand ihres CSS-Selektors (wie beispielsweise $(„div > p“)). Gleichzeitig enthält es auch Attribute und Funktionen wie $.ajax(). Der Quellcode setzt auf die Verkettung, denn die meisten Methoden geben selbst wieder ein jQuery-Objekt aus, entweder im Original oder als Kopie. So entstehen längere Aufruf-Ketten. Beispiel: Das Einfärben aller p-Tags in Rot, außer jene mit der Klasse gruen: $("p").css("color","red").find(".gruen").css("color", "green");)

Der Autor von Alpine.js betont immer wieder, dass sein Framework für sich selbst sprechen solle und die Entwicklerinnen und Entwickler in der Praxis überzeugen müsse. Er selbst gibt sich überzeugt von der Eleganz und Nutzerfreundlichkeit seiner Bibliothek. Aus diesem Grund lohnt es sich, verschiedene alltägliche Szenarien aus der Webentwicklung und deren Implementierung mithilfe von Alpine zu betrachten – besonders im Vergleich zu jQuery als einer der etabliertesten Alternativen.

Durch den Klick auf "Ein-/Ausblenden" lässt sich Text darstellen beziehungsweise verbergen.

Eine einfache Aufgabe wie das dynamische Ein- und Ausblenden von Text per Knopfdruck zeigt noch keine großen Unterschiede in der Codekomplexität zwischen Alpine und jQuery. Doch das Paradigma wird deutlich: Während bei jQuery die Selektion der DOM-Elemente über IDs, Klassen oder starre Strukturen erfolgt, verschafft Alpines DOM-basierter Ansatz mehr Klarheit:

<div x-data="{ show: false }">
    <button @click="show = !show">Nachricht ein-/ausblenden</button>

    <p x-show="show">I ❤️ Alpine</p>
</div>

Dagegen benötigt jQuery für dieselbe Aufgabe schon längeren Code:

<div>
    <button id="toggle">Nachricht ein-/ausblenden</button>

    <p id="message">I ❤️ Alpine</p>
</div>

<script>
    $("#message").hide();

    $("#toggle").click(() => {
        $("#message").toggle();
    })
</script>

Des Weiteren steht so der gesamte Code für die Funktion gesammelt an einer Stelle statt entfernt in einem script-Tag. Bei einem kleinen Codeschnipsel ist dieser Vorteil noch vernachlässigbar, mit wachsender Komplexität ist die Position von Code allerdings von Belang.

Alpine.js implementiert Eventhandling durch @ (bzw. x-on: in der Langform). Auf die Weise lassen sich alle DOM-Events behandeln. Das Attribut x-show blendet das Element ein beziehungsweise aus – je nachdem, ob der übergebene Ausdruck "truthy" oder "falsy" (JavaScripts schwaches Typsystem sorgt dafür, dass vielerlei Ausdrücke in der Praxis als false evaluiert, wie z. B. die Zahl null, ein leerer String, null, undefined usw. Bei diesen nicht-booleanschen Typen spricht man dann von "truthy" bzw. "falsy") ist.

Mithilfe der "+"- und "–"-Knöpfe soll der Zähler verändert werden.

Bei Komponenten mit dynamischen Inhalten zeigt sich Alpines Vue-ähnliche Syntax deutlicher. Mit x-data lassen sich JavaScript-Variablen direkt im DOM definieren und verwenden – das ermöglicht veränderbare Anzeigen wie einen Zähler. Zudem zeigt sich, dass innerhalb der Alpine-Attribute normaler JavaScript-Code möglich ist, wie hier die Inkrement- und Dekrement-Operatoren. Die Direktive x-text setzt den Text eines Elements auf den Wert der Variablen. Diese Funktion ist auch XSS-geschützt, die Eingaben werden maskiert, also von schädlichen Ausdrücke bereinigt. Wer auf eigene Gefahr hin puren HTML-Code setzen will, nutzt stattdessen x-html:

<div x-data="{ count: 0 }">
    <button @click="count--">-</button>

    <span>
        Anzahl:
        <span x-text="count"></span>
    </span>

    <button @click="count++">+</button>
</div>

Verglichen mit dem deklarativen Alpine wirkt die imperative jQuery-Implementierung eher umständlich:

<div>
    <button id="subtract">-</button>

    <span>
        Anzahl:
        <span id="count"></span>
    </span>

    <button id="add">+</button>
</div>

<script>
    let count = 0;
    function updateCount() {
        $("#count").text(count);
    }
    updateCount();

    $("#subtract").click(() => {
        count--;
        updateCount();
    });
    $("#add").click(() => {
        count++;
        updateCount();
    });
</script>

In diesem Beispiel offenbart sich auch der Nachteil des imperativen jQuery: Nach der Änderung der Variable count ist deren Anzeige manuell zu aktualisieren, wie obiges Listing veranschaulicht. Das ist fehleranfällig und sorgt für "langatmigen" Code. Alpine.js glänzt hier hingegen durch Reaktivität: Wie auch andere Frontend-Frameworks wie React aktualisiert es die Darstellung automatisch, sobald sich die zugrundeliegenden Daten ändern.

Das dynamische Hinzufügen von DOM-Elementen ist eine häufige Aufgabe in der Webentwicklung – hier dargestellt am Beispiel von Tabellen-Zeilen.

Das Hinzufügen von DOM-Elementen mit jQuery galt als ausgesprochen mühsam. In Vorträgen hat Caleb Porzio dazu stets Anekdoten und War Stories auf Lager, die er zum Verdeutlichen seiner Probleme mit diesem Framework anführt:

<div x-data="{ rounds: [] }">
    <button @click="rounds.push([
        Math.max(...rounds.map(r => r[0]), 0) + 1,
        (new Date()).toLocaleTimeString()
        ])">Runde hinzufügen</button>

    <table>
        <thead>
            <tr>
                <th>Runde</th>
                <th>Uhrzeit</th>
            </tr>
        </thead>

        <tbody>
            <template x-for="round in rounds">
                <tr>
                    <td x-text="round[0]"></td>
                    <td x-text="round[1]"></td>
                </tr>
            </template>
        </tbody>
    </table>
</div>

Die jQuery-Implementation packt den HTML-Code für eine neue Tabellenzeile in einen String:

<div>
    <button id="add">Runde hinzufügen</button>

    <table id="roundtable">
        <thead>
            <tr>
                <th>Runde</th>
                <th>Uhrzeit</th>
            </tr>
        </thead>

        <tbody></tbody>
    </table>
</div>


<script>
    const rounds = [];

    $('#add').click(() => {
        const newRound = [
            Math.max(...rounds.map(r => r[0]), 0) + 1,
            (new Date()).toLocaleTimeString()
        ];
        rounds.push(newRound);

        $('#roundtable tbody').append(
            `<tr><td>${newRound[0]}</td>` +
            `<td>${newRound[1]}</td>` +
            '</tr>'
        );
    })
</script>

Auch wenn es andere Möglichkeiten gibt, das Hinzufügen von DOM-Elementen mit jQuery zu implementieren, demonstriert es anschaulich Porzios persönliche Erfahrung. Im Alpine-Code steht die zu erstellende Zeile direkt in der entsprechenden Tabelle. Die Schleife erinnert mit der x-for-Syntax ebenfalls an Vue.js – mit der Einschränkung, dass Schleifen bei Alpine nur an template-Tags erlaubt sind. Die Variable rounds ist bei Alpine auch lokal für den div-Container beschränkt. Bei jQuery gilt sie je nach Implementierung im Zweifelsfall sogar global, sodass auftretende Namenskonflikte zu Mehrarbeit führen.

Das Alpine.js-Framework unterstützt in seinen Attributen vollwertigen JavaScript-Code, inklusive aktueller Sprachkonstrukte wie Getter und Setter. Die rudimentäre Implementierung eines Eingabefelds für formatierte IBAN-Nummern führt das im folgenden Listing vor. Über x-model wird eine Variable sowohl lesend als auch schreibend an ein input-Feld gebunden – das heißt, alle Änderungen der Variable zeigen sich im Textfeld, und alle Änderungen im Textfeld werden in der Variable gespeichert.

<div x-data="{
        _realIban: '',
        get iban() {
            return this._realIban.replace(/(.{4})/g, '$1 ');
        },
        set iban(val) {
            this._realIban = val.toUpperCase().replace(/ /g,'');
        }
    }">

    <label for="iban">IBAN eingeben:</label>
    <input id="iban" type="text" x-model="iban" placeholder="DE07 1234 1234 1234 1234 12">
</div>

Ein Vergleich mit jQuery wäre an dieser Stelle überflüssig, da dessen Implementierung nicht wesentlich abweicht. Der Einsatz von Gettern und Settern erinnert an die computed-Properties von Vue.js, insbesondere durch deren Reaktivität.

Dropdown-Menüs sind häufig verwendete Komponenten, die für eine optimale User Experience JavaScript benötigen.

Dropdown-Komponenten lassen sich zwar mit reinem CSS implementieren, allerdings wird der Quellcode dabei schnell unübersichtlich und basiert dann auf eher unschönen Hacks. Aus diesem Grund greifen Entwickler tendenziell zu JavaScript-basierten Dropdowns, wie man sie auch mithilfe von Alpine.js oder jQuery implementieren kann:

<div x-data="{ open: false }">
    <button @click="open = ! open">Dropdown anzeigen</button>
    <div x-show="open" @click.outside="open = false" class="dropdown-content">
        Hallo Welt 👋
    </div>
</div>

Hier zeigt sich erneut der imperative Charakter von jQuery gegenüber Alpines datenbasierter, reaktiver Architektur:

<div>
    <button id="dropdown-toggle">Dropdown anzeigen</button>
    <div id="dropdown-content">
        Hallo Welt 👋
    </div>
</div>

<p>test</p>

<script>
    $("#dropdown-content").hide()

    $("#dropdown-toggle").click(() => {
        $("#dropdown-content").toggle()
    })
</script>

Alpine bietet mit dem @click.outside-Attribut einen Mehrwert, denn eine solche Implementierung in jQuery wäre aufwendig und würde schnell zu ungewollten Seiteneffekten führen. Derartige Komfortfunktionen unterstreichen Caleb Porzios Motivation, Entwicklern das Leben zu vereinfachen. Häufig benötigte Operationen wie das Abfangen von Klicks außerhalb eines Elements sind im Framework enthalten und leicht umzusetzen.

Mit Alpine.js lassen sich Ressourcen auch asynchron laden und anzeigen.

Alpine bietet die Möglichkeit, kleinere eigenständige Komponenten zu entwickeln. Durch die Verlagerung sämtlichen Quellcodes direkt in den DOM statt in separaten script-Tags steigt die Übersichtlichkeit, und die Komponenten ähneln in ihrer Struktur Vue.js. Mit x-init wird JavaScript-Code in der Initialisierungs-Phase ausgeführt und kann so beispielsweise Daten initial laden. Asynchronität wird ebenfalls unterstützt:

<div x-data="{ fact: undefined }"
     x-init="fact = (await (await fetch('https://catfact.ninja/fact')).json()).fact">

    <p x-show="fact == undefined">Wird geladen...</p>
    <template x-if="fact != undefined">
        <div>
            <h1>Zufälliger Katzen-Fakt</h1>
            <p x-text="fact"></p>
        </div>
    </template>
</div>

In der jQuery-Implementierung im folgenden Listing ließe sich der HTTP-Aufruf zwar auch mit fetch umsetzen, viele jQuery-Entwickler greifen aber eher zu den Funktionen des Frameworks.

<div>
    <p id="loading">Wird geladen...</p>
    <div id="content">
        <h1>Zufälliger Katzen-Fakt</h1>
        <p id="cat-fact"></p>
    </div>
</div>

<script>
    $('#content').hide()

    $.getJSON('https://catfact.ninja/fact', (data) => {
        $("#cat-fact").text(data.fact)
        $('#loading').hide()
        $('#content').show()
    });
</script>

In manchen Szenarien ist eine Referenz auf ein DOM-Element nötig. Hier hat jQuery einen Heimvorteil: Die einfache Selektion ist ein Kernfeature des Frameworks. Allerdings müssen an dieser Stelle wieder IDs oder Klassen genutzt werden, um das Element per JavaScript zu adressieren:

<div x-data>
    <button @click="$refs.text.remove()">Text entfernen</button>

    <p x-ref="text">Hallo Welt</p>
</div>

Alpine.js kann hingegen mit x-ref DOM-Elemente direkt als JavaScript-Variable speichern (unter $refs):

<div>
    <button id="remove">Text entfernen</button>

    <p id="text">Hallo Welt</p>
</div>

<script>
    $("#remove").click(() => {
        $("#text").remove();
    })
</script>

Wichtig ist aber, dass sich diese Direktive in einer Alpine-Komponente befindet: Das Elternelement muss also beispielsweise das x-data-Attribut haben, damit das Framework es verarbeitet. Das Gegenteil ist auch möglich, durch x-ignore ignoriert das Framework einzelne Elemente.

Analog zu den so genannten Watchers in Vue.js bietet Alpine x-effect. Mit diese Funktion wird JavaScript-Code ausgeführt, wenn sich das Innere der Komponente verändert, also, sobald ein Ausdruck neu evaluiert wird – das nächste Code-Beispiel führt das vor. Dabei wird nicht eine einzelne Variable isoliert betrachtet, sondern der gesamte Abhängigkeitsbaum eines DOM-Elements.

<div x-data="{ count: 0 }" x-effect="console.log('Zähler ' + count)">
    <button @click="count++">Zähler erhöhen</button>
</div>

Zwar legen die Ähnlichkeiten in Syntax und Konzepten den Vergleich mit Vue.js nahe. Allerdings sollte Alpine.js stets als das betrachtet werden, was es ist: ein Mikro-Framework, das Webseiten eine Prise JavaScript einhaucht, ohne sie dabei direkt in eine Single Page Application umzuwandeln. Frameworks wie React oder Vue zu nutzen, um lediglich einen Text per Knopfdruck ein- und auszublenden, ist genauso widersinnig wie der Versuch, mit Alpine eine vollständige Single Page Application zu implementieren.

Nur weil man einen Hammer in der Hand hat, ist nicht plötzlich alles ein Nagel. Das sollten Entwicklerinnen und Entwickler auch bei der Verwendung von Alpine im Hinterkopf behalten. Es gibt allerdings auch Kritikpunkte am Framework: Der JavaScript-Code im DOM erschwert die maschinelle Optimierung und ist mit vielen bestehenden Tools nicht kompatibel. Auch die wünschenswerte Separation of Concerns, also die saubere Trennung von Quellcode nach logischen Verantwortlichkeiten, wird aufgrund der Strukturierung und Positionierung des Codes durch das Framework teilweise behindert.

In seiner Disziplin kann Alpine.js dennoch einen Mehrwert bieten. Aktuelle Trends gehen oft in Richtung Minimalismus und Mikroframeworks; Alpine trifft diesen Trend durch seine geringe Größe und die Kompaktheit. Die aufgeführten Praxisbeispiele sind keine allumfassende Liste, zeigen aber die Struktur von Alpine-Code und geben erste Ideen für Einsatzszenarien. Wer sich von jQuery lösen möchte, findet in Alpine einen guten Weg: Das Framework implementiert nicht übermäßig viele Funktionen, die modernes JavaScript nativ besitzt – wie unter anderem jQuerys Kernfeature (die Auswahl von DOM-Elemente via CSS-Selektoren) –, sodass Entwickler während der Arbeit mit dem Framework reines JavaScript "wiederentdecken" können.

Das Framework ist kompakt und vermittelt durch seine reaktive Natur die Paradigmen moderner Frontend-Frameworks. Gleichzeitig bietet es durch seine Vue-ähnliche Syntax einen guten Einstieg für alle, die mit diesem Framework bereits Erfahrung haben. Aus diesem Grund ist es einen Blick für jeden interessierten JavaScript-Entwickler wert.

Young Professionals schreiben für Young Professionals
YP_Timo_Zander

Timo Zander

hat Angewandte Mathematik und Informatik studiert. Er interessiert sich für Open Source, das JavaScript-Universum und aufstrebende Technologien.

(sih)