Get the MOST

Im Symfony-Ökosystem werden Frontend-Komponenten seit einiger Zeit zunehmend über UX-Komponenten verarbeitet. Auch wenn hierdurch einige Anbelange vereinfacht werden, ist doch oftmals der Aufbau einer JavaScript Toolchain mit Node usw. notwendig, um etwa mit Symfony Webpack Encore zu arbeiten.

Durch neue Browser-Funktionen muss das nicht mehr zwingend der Fall sein. Die mit Symfony 6.3 neu eingeführte AssetMapper-Komponente hilft mit sogenannten ImportMaps dabei, die Komplexität noch einmal deutlich zu reduzieren: durch eine JSON-Datei wird auf sehr einfache Weise angegeben, welche Assets der Browser laden soll. Um JS-Dependencies aufzulösen, wird statt npm oder yarn ein Symfony CLI-Kommando ausgeführt.

Stimulus und Symfony UX

Ein JavaScript-Ökosystem für Symfony wurde bereits Ende 2020 gestartet. Vereinfacht ausgedrückt wurde Symfony Flex erweitert, um auch JavaScript-Anteile in einem Bundle leicht konfigurieren und einrichten zu können. Dazu wird eine Integration mit Stimulus verwendet. Diese Struktur führt zu einer zunehmenden Standardisierung und Aufteilung in wiederverwendbare UX-Komponenten.

Seitdem ist eine Menge passiert: nach Webpack Encore 1.0 und Stimulus Bridge 2.0 kam Symfony UX Turbo, das auf der Basis von Turbo das Schreiben von JavaScript in vielen Fällen überflüssig macht. Anschließend gab es noch einen weiteren Versionssprung, so dass wir aktuell bei Symfony UX 2.0 und Stimulus 3 stehen.

Bereits im Jahr 2020 haben wir das Buch “Symfony: The Fast Track” hier vorgestellt. Nun ist eine neue Auflage bereitgestellt worden, welche auf den Stand für Symfony 5.4 und 6.0 gebracht wurde.

Eine deutsche Übersetzung steht im Moment noch nicht zur Verfügung, aber das englische Original ist im Zweifelsfall vermutlich ohnehin zu bevorzugen.

Alle Infos im Detail sowie weiterführende Links finden sich in der Ankündigung.

Seit knapp einem Monat steht eine umfangreiche Unterstützung zur Docker-basierten Arbeit mit Symfony bereit. Hierbei gibt es Neuerungen in mehreren zentralen Werkzeugen, die ineinander greifen und aufeinander aufbauen:

1. Das Composer-Plugin Flex kann bei Bedarf nun neue Services in die Datei docker-compose.yml eintragen sowie notwendige PHP Extensions und Bibliotheken im Dockerfile anpassen.
2. Symfony CLI erkennt, dass Docker Compose für das Projekt verwendet wird, und stellt automatisch entsprechende Umgebungsvariablen bereit.
3. Mit dem Beispielcontainer Symfony Docker lassen sich schnell neue Projekte aufsetzen. Es stellt auch ein GitHub Template bereit, mit dem neue Repositories angelegt werden können.
4. Das API Platform Projekt stellt ein Helm Chart bereit, um ein Deployment des Projektes in Kubernetes durchzuführen.

In diesen Blog-Artikel werden die Neuerungen im Detail vorgestellt und weiterführende Links angeboten.

In vielen Weblayouts ist es notwendig, unterschiedliche Ausprägungen einer bestimmten kosmetischen “Stellschraube” zu realisieren. So können etwa einzelne Akzentfarben je nach Unterseite, Kategorie oder Jahreszeit abweichen. Dies sorgt oftmals für unschönen Boilerplate-Code, welcher jedoch mit SASS/SCSS einfach eingespart werden kann.

Erst einmal ausführlich

Angenommen, je nach body-Klasse sollen alle Artikel-Überschriften in der zweiten Ebene eine andere Farbe erhalten. Dies könnte mit reinem CSS zum Beispiel so aussehen:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

body.spring article h2 {
    color: green;
}
body.summer article h2 {
    color: yellow;
}
body.autumn article h2 {
    color: brown;
}
body.winter article h2 {
    color: blue;
}

Für diesen einen Fall fällt die Redundanz vielleicht nicht ins Gewicht, aber wenn sich solche Ausprägungen durch ein ganzes Layout ziehen, wird der Wunsch nach einer überschaubareren Alternative stärker.

Eine schöne interaktive Möglichkeit, einige Konzepte von Git näher kennen zu lernen, bietet die Seite Learn Git Branching. In diesem Spiel werden in unterschiedlichen Tutorials und Aufgaben die verschiedenen Varianten, Branches zu erstellen und ineinander zu überführen, vermittelt. Die wichtigsten Kommandos können in einem Sandkasten-Modus verwendet werden, wobei sich die entsprechenden Auswirkungen anhand einer Visualisierung direkt erschließen. Auch für fortgeschrittene Anwender von Git gibt es hier und da wahrscheinlich noch ein paar Aha-Effekte.

Der HTML5-Standard bietet einige Tags, mit denen sich interaktive Elemente abbilden lassen. Ein sehr nützliches Beispiel sind die Tags <details> und <summary>: sie erlauben die Erstellung von aufklappbaren Bereichen. Früher konnten solche Funktionen zum dynamischen Öffnen und Schließen von Teilbereichen nur mit Hilfe von JavaScript umgesetzt werden. Diese Einschränkung ist somit entfallen.

In diesem Beitrag wird kurz gezeigt, wie sich die zwei Tags einsetzen lassen. Außerdem wird die Verwendung anhand eines praktischen Anwendungsfalls demonstriert.

Das Buch “Symfony 5: The Fast Track” von Fabian Potencier zeigt anhand praktischer Beispiele einen großen Teil der Bandbreite der Symfony-Komponenten. Es eignet sich daher für einen schnellen Einstieg in das Ökosystem, bietet jedoch gleichzeitig auch fortgeschrittenen Nutzern neue Impulse. Schön ist aber insbesondere, dass das Buch in mehr als ein Dutzend Sprachen vorliegt.

Es ist möglich, das Buch online kostenlos anzuschauen. Unabhängig davon kann man auch eine PDF-Version erwerben und somit die weitere Symfony-Entwicklung unterstützen.

Die Cascading Style Sheets zum Gestalten von Internetseiten und Webanwendungen gibt es schon eine ganze Ewigkeit. Elementare Dinge ändern sich hier vergleichsweise selten.

Mit der Umstellung von Bootstrap 3 auf Bootstrap 4 kommt man jedoch nicht umhin, sich mit dem Flexbox-Konzept auseinander zu setzen. Hier kommt man mit den alten Floats nicht mehr weit. Am Anfang ist das ein ungewohntes Umdenken. Aber sobald man Flex einmal verstanden hat, möchte man auch nicht mehr ohne.

Der folgende Tipp hilft dabei, den Code-Umfang häufiger Abfragen in Twig-Templates zu reduzieren. Dies verbessert die Lesbarkeit enorm und hilft dabei, die Logik in den Templates intuitiver zu formulieren. Diese Abkürzung kommt komplett ohne zusätzliche Funktionen und Filter aus.

Oft möchte man prüfen, ob eine Variable im Template existiert und einen gültigen Wert enthält. In dem Fall soll etwas mit der Variable getan werden, typischerweise erfolgt eine Ausgabe des Wertes. Ganz explizit formuliert sieht so eine Abfrage in etwa wie folgt aus: