Stempel seit 1996

Einführung in Alpine.js

Am 11. OKTOBER. 2022, findet wieder das Treffen der Symfony-Usergroup bei mindworks statt.

Kombi-Event mit der Symfony-Usergroup Hamburg:

Präsenz-Treffen der PHP-Usergroup Hamburg bei mindworks.

Einlass: 18.30 Uhr

Vortrag: 19 Uhr

Diesmal mit einem Vortrag von Jan-Felix Wittmann:

In den letzten Jahren gab es immer mehr Bibliotheken oder Frameworks, die versprochen haben, einfach und modern JavaScript-Anwendungen zu schreiben. Dabei standen hauptsächlich die sogenannten single-page applications (SPA) im Fokus des allgemeinen Interesses. Da wir aber als PHP-Entwickler noch zum größten Teil auch serverseitige Anwendungen schreiben und nur vereinzelt bestimmte Komponenten auf der Seite benötigen (Autocompletion, Carousel, komplexe Formulare (Warenkorb) etc.), sind Libraries wie Vuejs, React oder Angular oft wie „Mit Kanonen auf Spatzen schießen“. Oft verlässt man dabei komplett den PHP- bzw. HTML-Kontext, hat komplexe Buildprozesse (Webpack) oder muss sich mit Tools wie NPM beschäftigen (dependency hell).

Letztendlich benutzt man oft jQuery, da es bereits einen großen Fundus an existierenden und schnell einsetzbaren Plugins gibt. jQuery war für die damalige Zeit revolutionär, ist nach heutigen Maßstäben jedoch nicht mehr zeitgemäß und erschwert durch die Komplexität die langfristige Wartung. Bei jQuery sind vor allem die CSS-Queries auf bestimmte DOM-Elemente deklarativ und ist ansonsten stark imperativ geprägt. Durch Bibliotheken (React, Vuejs) hat man sich allerdings inzwischen an das MVVM Pattern (Model View ViewModel) gewöhnt, das es sehr einfach macht, die Anwendung von der Model-(State) Schicht zu betrachten, da das Model (State) direkt an bestimmte DOM-Elemente gebunden wird (Two-way Data Binding). Anders als jQuery unterstützt Alpine.js das MVVM Pattern.

Ich werde anhand von Live-Coding Beispielen aufzeigen, wie Alpine.js (https://alpinejs.dev/) diese die Lücke zwischen jQuery und z. B. Vue.js schließen kann. jQuery erfüllt den Anspruch, moderne und wartbare wiederverwendbare Komponenten zu schreiben im Einklang mit bestehenden jQuery Komponenten (da Alpine.js kein virtuelles DOM nutzt, sondern das HTML bzw. das DOM per HTML diffing (Alpine Morph Plugin) aktualisiert). Das sogenannte Two-way Data Binding unterstützt, dass das Model in Kind-Komponenten vererbt wird und man für einfache Komponenten nicht den HTML-Kontext verlassen muss und vieles direkt deklarativ im HTML definieren kann. Grundsätzlich hat die Bibliothek keine Abhängigkeiten und kann direkt ohne Buildprozess (wie früher jQuery) verwendet werden.

Weiterhin werde ich auf folgende Themen bzw. Frameworks im Laufe des Vortrags kurz eingehen Alpine morph (morphdom) – HTML-DOM Diffing Library htmx – welche den Zugang zu AJAX, CSS Transitions, WebSockets und Server Sent Events direkt in HTML, unter Verwendung von Attributen unterstützt livewire – das Laravel PHP, mit dem man serverseitig dynamische Anwendungen schreiben kann, ohne eine Zeile Javascript Code zu schreiben.

Für Getränke und eine Kleinigkeit zu essen ist gesorgt.

Nach dem Vortrag verlosen wir noch einen JetBrains-Gutschein.

Damit wir wissen, wie viele kommen, meldet euch bitte über Meetup.com an.

Während der Veranstaltung werden möglicherweise Fotos aufgenommen, von denen eine Auswahl im Internet veröffentlicht wird. Wenn du zu dieser Veranstaltung erscheinst, stimmst du zu, dass Fotos von deiner Person gemacht und im Internet veröffentlicht werden.

Über die Symfony-Usergroup Hamburg

Die Symfony-Usergroup Hamburg (SFUGHH) wurde 2012 von SensioLabs Deutschland in Zusammenarbeit mit mindworks ins Leben gerufen und findet alle zwei Monate, jeweils am ersten Dienstag des Monats, statt. Die Treffen finden in der Regel bei mindworks statt und es wird meistens ein Vortrag gehalten. Die Usergroup wendet sich an fortgeschrittene PHP-Entwickler und solche, die es werden wollen. Aktuelle Informationen zur Symfony-Usergroup Hamburg stehen stets auf Meetup.com zur Verfügung.