Continuous TYPO3 Upgrade & TYPO3 Website Facelift für die VGF

Alle fahren mit.

Die Verkehrsgesellschaft Frankfurt am Main (VGF) ist das Verkehrsunternehmen der Stadt und sorgt für die Mobilität in Frankfurt. Mit über 400 Schienenfahrzeugen betreibt sie neun U-Bahn- und zehn Straßenbahnlinien. Die VGF ist verantwortlich für die Infrastruktur, die Sicherheit, die Sauberkeit sowie den Service und einen verlässlichen Betrieb.

Herausforderung:

Das Projekt zur Aktualisierung von TYPO3 von Version 10 auf Version 12 stellte aufgrund seiner hohen Komplexität eine besondere Herausforderung dar. In der Vergangenheit wurden Upgrades meist in einem großen Schritt durchgeführt, was umfangreiche Testphasen und eine hohe Fehleranfälligkeit zur Folge hatte. Dieses Mal wurde ein anderer Weg gewählt: Die Komponenten des Systems – sowohl serverseitig als auch applikationsseitig – wurden zunächst analysiert und anschließend schrittweise aktualisiert.
Ein Upgrade in einem einzigen Schritt wäre aufgrund der Vielzahl an technischen Abhängigkeiten und Systemkomponenten zu komplex gewesen. Die serverseitige Infrastruktur, bestehend aus PHP, Datenbank, Varnish und Betriebssystem, musste ebenso erneuert werden wie die Applikationskomponenten im Backend und Frontend von TYPO3. Zusätzliche Herausforderungen stellten die Migration von veralteten Extensions wie t3quick und GridElements sowie das Upgrade von Bootstrap dar.

Lösung:

Das Upgrade wurde in klar abgegrenzte, kleinere Schritte unterteilt, die nacheinander umgesetzt und getestet wurden. Zunächst wurde das veraltete Paket t3quick entfernt und durch modernere Lösungen ersetzt. Anschließend erfolgte die Migration von GridElements zu Container und das Upgrade von Bootstrap von Version 4 auf 5.3. Durch den Einsatz von automatisierten Test-Tools wie BackstopJS und die parallele Nutzung alter und neuer Serverinfrastrukturen konnte das Upgrade ohne Ausfälle und mit hoher Qualität durchgeführt werden.

Ausgangslage

veraltetes t3quick
GridElements
serverseitige alte Versionen

Nerdiges

Upgrade Bootstrap von v4 auf v5.3
TYPO3 & Server Upgrade
Migration der GridElements

Let's start!

Continuous TYPO3 Upgrade von Version 10 zu 12

Aufgrund der hohen Komplexität des Projekts entschieden wir uns dafür, das Upgrade von TYPO3 auf Version 12 in mehrere klar definierte und voneinander abgegrenzte technische Schritte aufzuteilen. In der Vergangenheit führten wir solche Upgrades meist als einen einzigen großen Schritt durch, was zu einer hohen Komplexität, umfangreichen Testphasen und einem erhöhten Risiko führte. Fehler konnten so nur schwer identifiziert und behoben werden.

TYPO3-Upgrade-Service

Durchführung eines strukturierten Ansatzes für server- und applikationsseitige Modernisierung

Nach der Durchführung einer initialen Analyse, wurden zunächst alle relevanten Bausteine des Systems identifiziert. Diese lassen sich in zwei Hauptkategorien unterteilen: serverseitige und applikationsseitige Komponenten. Die serverseitigen Erneuerungen umfassten Updates der Versionen für PHP, der Datenbank, Varnish und dem Server-Betriebssystem. Während die applikationsseitigen Anpassungen in TYPO3 die Komponenten der Bereiche Backend und Frontend betrafen.

Backend:

Entfernung des nicht mehr weiterentwickelten TYPO3-Pakets t3quick
Migration von GridElements zu Container
Upgrade von TYPO3 Version 10 auf Version 12

Frontend:

Upgrade von Bootstrap von Version 4 auf Version 5.3

Anstatt alle Komponenten gleichzeitig zu aktualisieren, entschieden wir uns bewusst für eine schrittweise Umsetzung. Nach jedem abgeschlossenen Teil-Upgrade wurden die Änderungen sorgfältig getestet und anschließend live geschaltet. Dieser iterative Ansatz ermöglichte uns nicht nur eine bessere Kontrolle über den gesamten Prozess, sondern minimierte auch das Risiko von unerwarteten Problemen. So konnten wir sicherstellen, dass jede Komponente stabil und zuverlässig funktioniert, bevor der nächste Schritt angegangen wurde.

Ausbau des Packages t3quick

Die bisherige Website der VGF basierte auf dem von der dkd entwickelten TYPO3-Paket t3quick, das wiederum auf t3kit aufbaute.
Da die Weiterentwicklung von t3quick eingestellt wurde, war es notwendig, diese Abhängigkeit vollständig aus dem Projekt zu entfernen.
Das Hauptziel dieses Schritts war daher der saubere Abbau von t3quick, ohne sichtbare Veränderungen im Frontend zu verursachen. Weiterhin wurden im Backend im Rahmen dieser Umsetzung noch unter der TYPO3-Version 10.4 einzelne Content-Elemente migriert.

Migration GridElements zu Container

Im Rahmen des Projekts wurde die Extension GridElements durch die Lösung EXT:Container ersetzt, um eine zukunftssichere Basis für Struktur-Elemente zu schaffen. Diese Migration war notwendig, um die Wartbarkeit und Flexibilität des Systems zu verbessern und die Integration in moderne TYPO3-Standards zu gewährleisten. Ein technisches Highlight war der Einsatz von automatisiertem Regressions-Visual-Testing mit BackstopJS, bei dem jedes Struktur-Element auf der Live-Seite angelegt wurde. Desweiteren gab es geringe UI-Änderungen bei den Content-Elementen und eine Vielzahl von Elementen konnte automatisiert migriert werden.

Regelmäßige TYPO3-Upgrades reduzieren die Kosten für den laufenden Betrieb.  Unser automatisiertes Update-Management System Renovate erledigt alle Arbeiten für uns. Major Versoions-Sprünge in TYPO3 sollten nicht länger als 2 LTS Versionen dauert.  Warum? TYPO3 unterstützt Core-Migrationen nur über 2 LTS Versionen. Somit sind nicht vorhanden Migrationen zusätzlich zu integrieren bzw. zu erstellen.

Ivaylo Ivanov-Kolbinger

Regelmäßige Upgrades des Frontend-Frameworks

Ein Upgrade des Frontend-Frameworks bietet nicht nur technische Vorteile, sondern auch einen entscheidenden, wenn auch oft unsichtbaren Mehrwert: Die Unterstützung neuer mobiler und Desktop-Geräte auf dem Markt wird gewährleistet. Gerätehersteller wie Apple oder Samsung bringen jährlich neue Modelle mit geänderten Auflösungen, Displaygrößen und Eigenschaften auf den Markt. Diese Neuerungen erfordern Anpassungen, wie etwa zusätzliche Breakpoints oder eine höhere Pixeldichte für schärfere Darstellungen.

Ohne regelmäßige Updates des Frameworks können diese Entwicklungen nicht berücksichtigt werden, was zu Darstellungsproblemen führen kann. Nur durch aktuelle Framework-Versionen lässt sich eine saubere, moderne und plattformübergreifende Darstellung sicherstellen.

Mit Renovate im Einsatz

Grafik mit Mann und Frau auf Stühlen in grün-schwarz

Dank der Vorarbeit mit Renovate waren 95% aller Extensions bereits mit TYPO3-Version 12 kompatibel. Neben dem Upgrade des TYPO3-Cores, wurden zudem neue Core-Migrationen in den Deployment-Prozess aufgenommen. Weiterhin wurde unser Standard-Paket aktualisiert und Updates für diverse Software-Komponenten durchgeführt, wie zum Beispiel die lokale Entwicklungsumgebung.
Mit der neuen TYPO3-Version kamen neue UI-Elemente im Backend hinzu, die zahlreiche neue Funktionen für die Redakteure bieten. Das Frontend allerdings ist hier unverändert geblieben.

Zusammengefasst führten kleinere Schritte zu regelmäßigen Deployments, die viele Vorteile mit sich brachten. Zum Beispiel konnten so einzelne Komponenten explizit getestet und deployed werden. Nach dem Live-Gang stellten wir eine deutlich kürzere Bugfixing-Phase fest und der Live-Gang verlief für den Kunden unbemerkt.