Aus dem Maschinenraum: Unser Tech Stack – was setzen wir ein und worauf setzen wir?

Im dritten Post aus unserer Blogreihe zum Relaunch unserer Corporate Site möchten wir euch einen ersten Blick hinter die Kulissen gewähren. Im letzten Beitrag hat Sebastian den Weg zur Gestaltung beschrieben und erklärt, wie wir unsere Ideen mit einem statischen Prototypen weiterentwickeln und ausprobieren konnten.

Wie Julia eingangs bereits beschrieben hat, haben wir uns bewusst dafür entschieden, komplett von vorn anzufangen. Der nächste Schritt war daher das Aufsetzen einer neuen TYPO3-Instanz. Schauen wir daher, aus welchen Bauteilen unser neues Schiff besteht …

Der erste Eindruck, nachdem wir das initiale Setup abgeschlossen hatten: TYPO3 11 ist … verdammt schnell. Da etwa die komplette Request-Abarbeitung im Frontend inzwischen modularisiert wurde (der gesamte Prozess besteht größtenteils aus PSR-15-Komponenten), laden Backend und Frontend sehr viel schneller im Vergleich zur bislang betriebenen Version 8. Die Arbeit mit dem System macht wesentlich mehr Spaß und fühlt sich deutlich flüssiger an. Die Performance-Messwerte – dazu später mehr – bestätigen diesen Eindruck.

In Verbindung mit PHP 8.0, das wir einsetzen und das nochmal einen deutlichen Schub in Sachen Geschwindigkeit drauflegt, kann TYPO3 11 seine Stärken voll ausspielen und liefert out-of-the-box bereits gute bis sehr gute Ladezeiten. Dazu sei gesagt, dass wir bislang (Stand April 2022) noch so gut wie keine größeren Maßnahmen in Sachen Performance-Optimierung betrieben haben. Da ist also unter Umständen sogar noch “Luft nach oben”.

Der ein oder andere mag sich jetzt gefragt haben: “Warum PHP 8.0, wo es doch schon 8.1 gibt?”. Nun, der Grund ist schlicht: Als wir im Herbst 2021 angefangen haben, war PHP 8.1 noch nicht stabil verfügbar. Wirkliche Blocker gibt es dabei aktuell nicht, alle eingesetzten Komponenten sollten auch mit PHP 8.1 kompatibel sein.

Issues in Sentry — Ups, da müssen wir noch einmal an unsere Content Security Policy dran.

Direkt zu Projektbeginn haben wir für uns entschieden, dass wir mit unserer Corporate Site direkt möglichst viel “richtig” machen wollen. Darunter verstehen wir beispielsweise, dass wir auf der einen Seite auftretende Fehler möglichst schnell mitbekommen wollen – idealerweise bevor ein Nutzer das Problem bemerkt. Außerdem wollten wir auch die Performance der Site überwachen und etwa die Entwicklung der Core Web Vitals beobachten.

Render-Graph in Sentry — Sentry ist in der Lage, Renderzeiten auf echten Clients zu messen und übersichtlich aufzusortieren.

Beides liefert Sentry, eine Analyseplattform für Fehler und Performance von Webapplikationen. Über Sentry alleine lässt sich länger erzählen (vielleicht später ;-)). Nur so viel: es erfüllt für uns viele wesentliche Funktionen.

Auftretende Fehler werden mit möglichst vielen Hintergrundinformationen angereichert (eingesetzte Browser-/OS-Kombination, was genau hat der Nutzer gemacht und was ist genau passiert).
Bei Fehlern im Backend werden Log-Messages aus TYPO3 sowie der vollständige Stack-Trace ergänzt. Bei JavaScript-Fehlern analog Fehlermeldung und Stack-Trace. Sofern Source-Maps vorhanden sind, kann Sentry auch minifizierten Code brauchbar aufsortieren.
Das eigentliche Killerfeature: Sentry kann wiederholt auftretende Probleme gruppieren bzw. zusammenfassen. So kann man sich auf die wichtigen Dinge konzentrieren und bekommt nicht ständig dieselben Fehler gemeldet. Dennoch bleibt jeder einzelne Case zugänglich. Die Funktion ermöglicht es aber, Häufungen zu finden, z.B. Issues, die nur auf Firefox unter Windows 8.1 im Bereich “Karriere” auftreten.
Fehler lassen sich nach Schwere klassifizieren und routen. Weniger Wichtiges läuft einfach in Sentry hinein und kann abgearbeitet werden. Dringende Fehler (Exception auf Start- und typischen Einstiegsseiten) können auf Wunsch direkt in Slack Alarm schlagen.
Eine Integration in Jira ermöglicht die Ticketerstellung “auf Knopfdruck” – direkt mit nützlichen Infos und Kontext zum Issue in Sentry. Daraus entstehen deutlich bessere Tickets, die endlich von vornherein alle zur Analyse benötigten Infos enthalten 😉 Spart gebetsmühlenartige Rückfragen in Tickets und entlastet alle Beteiligten.
Durch die Integration in Front- und Backend kann Sentry Renderzeiten messen und Render-Graphen darstellen. Da wir das Tool auf eigenen Systemen betreiben können, geht das datenschutzkonform und datensparsam, weil anonym.

OK gut, zugegeben, jetzt gingen mir die Star-Trek-Metaphern aus. Nichtsdestotrotz darf Solr als wesentliche Komponente unseres Schiffs … pardon, Software-Stacks natürlich nicht fehlen. Zum Glück noch rechtzeitig für den Launch unserer Site hat das Team um Olivier Dobberkau die Arbeiten an der Solr-Integration “EXT:solr” so weit vorangebracht, dass sie auch in der aktuellen LTS von TYPO3 und unter PHP 8 laufen und wir zumindest Indizierung und Suche benutzen können. Die Addons (EXT:solrfal und EXT:solrconsole) sind in wenige Tage alten Vorabversionen bereits verfügbar, ein Test steht hier noch aus.

In erster Linie bieten wir mittels Solr eine Volltextsuche im gesamten Content der Site an. Neu ist, dass diese auch eine Suche in den Beiträgen in unserem Blog umfasst. Außerdem lassen sich Projekte und Kunden aus unserem Bereich “Referenzen” durchsuchen.

Wie genau wir das angestellt haben, erklären wir in einem der kommenden Blog-Posts. Bis dahin: stay tuned und schaut doch gerne bei unseren bisherigen Projekten vorbei.