Das Problem
Wer Anfang der 2010er Jahre (oder gar noch früher) Web-Applikationen entwickelt hat, kam wohl um die Programmiersprache PHP nicht ganz herum. So verwendeten auch wir zu dieser Zeit PHP bei der Erstellung des neuen Projekts iPROT. Erste Frontend Frameworks wie Backbone.js oder Angularjs waren zwar gerade entstanden, wir vertrauten aber auf Bewährtes und bauten die Logik hauptsächlich auf der Server-Seite in PHP.
Natürlich kam auch jQuery zum Einsatz. Es war in dieser Zeit, in der sich nicht alle Browser an den HTML-Standard hielten (sprich IE), eine Riesenerleichterung für die Frontend-Entwicklung. Ja es funktionierte so gut, dass wir immer mehr jQuery-Code ergänzten, was die Sache irgendwann unübersichtlich werden ließ.
Es waren aber nicht nur Tausende Zeilen jQuery Code, der uns zu Schaffen machte, es waren vor allem riesige, verschachtelte PHP Schleifen-Konstrukte, in denen HTML-Code erzeugt wurde. Zu guter Letzt gab es noch PHP Konstrukte, die JavaScript Code erzeugten 🙈.
Die Trennung
Mit der Entscheidung das Frontend und das Backend weitgehend zu entkoppeln und vom Server Daten im JSON-Format zu übermitteln war klar, dass wir im Frontend eine Bibliothek, oder ein Framework verwenden werden, das uns beim Templating unterstützt.
Zwar bin ich ein großer Fan von Vue.js und würde auch ein neues Web-Projekt sofort mit Vue starten, den Umbau dieser bestehenden Code-Basis wollte ich aber behutsamer angehen und nicht quasi bei Null starten. So kam Alpine.js ins Spiel.
Überzeugt hat mich Alpine.js wegen der Möglichkeit den Umstellungsprozess in kleinen Schritten anzugehen. So konnten wir in der ersten Phase etwa große Teile des bestehenden jQuery Codes weiter verwenden um diesen mit einer funktionierenden Applikation Schritt für Schritt zu reduzieren.
Zum Beispiel
Ein großer Nutzen für uns ist das unkomplizierte Templating im HTML-Code, gepaart mit der einhergehenden Reaktivität:
<select name="chapterSelect" x-model="searchChapter" @change="doSearch">
<template x-for="chapter in chapters" :key="chapter.id">
<option :value="chapter.id" x-text="chapter.name"></option>
</template>
</select>
Die so erzeugte Auswahlliste von Kapiteln verwendet die JavaScript Variable
chapters, die aus einem Array von Objekten mit id und name (und noch ein
paar mehr) Eigenschaften besteht. Durch das verwendete x-model wird
automatisch der Wert der Variable searchChapter vorausgefüllt. Wird ein Wert
aus der Liste ausgewählt (@change) wird die Funktion doSearch aufgerufen.
Die geneigte Leser*in kann sich vorstellen, wie das PHP-Konstrukt aussah, das
die Auswahlliste erzeugte (wir verwendeten dazu eine eigene Funktion, der vier
Parameter übergeben wurden, unter anderem ein String für style Anweisungen).
Außerdem ändert sich die Liste automatisch, wenn sich der chapters-Array
ändert (zum Beispiel wenn an anderer Stelle der Applikation ein Kapitel
hinzugefügt wird).
Alpine.js kapselt die Gültigkeit von Variablen auf DOM-Elemente. Eingeschlossene Elemente erhalten automatisch Zugriff auf die Variablen, für die Kommunikation nicht verschachtelter Alpine.js Komponenten werden Events geschickt. Mit einem Hintergrundwissen von Angular oder Vue.js wird man sich bei Alpine.js gleich wohl fühlen.
Werkzeuge
Jetzt ist Alpine.js noch nicht so lange am Markt, weshalb auch das Vorhandensein von Werkzeugen für Editoren nicht sehr weit verbreitet ist. Für den JavaScript Code ist das unproblematisch, hier funktionieren bestehende Tools. Der HTML-Code wird auch korrekt eingerückt, einzig bei den Alpine.js-spezifischen HTML Attributen gibt es noch Luft nach oben. Auto-Vervollständigung von Variablen oder Funktionen bleibt hier außen vor, es gibt aber eine erweiterte Syntax-Erkennung als Visual Studio Code Plugin.
VSCode mit dem Alpinejs-syntax-highlight Plugin. $t in x-text ruft die globale Übersetzungsfunktion auf (ein Alpine.js Plugin)
Fazit
Mit der Umstellung konnten wir die Code-Basis gehörig aufräumen und ausmisten. Der größte Vorteil ist aber, dass das Arbeiten mit dem neuen Code wieder Spaß macht: Wir haben jetzt automatisches Neu-Laden bei Änderungen, wesentlich perfomanteren Code und vor allem wieder Übersicht.
Mich konnte das Micro-Framework Alpine.js überzeugen und ich werde es wohl auch in anderen Projekten einsetzen.