Pinsel voll bunter Farbe
Upgrade auf TYPO3 8.7

Alles neu macht der April

Upgrade auf TYPO3 8.7 LTS

Seit gestern läuft comuno.net auf TYPO3 8.7, der neuen Long-Term-Support-Version von TYPO3. Es blieb aber nicht beim reinen Core-Update, stattdessen wurden viele weitere Teile der Seite für das Upgrade überarbeitet.

Anfang März find ich damit an, diese Seite von TYPO3 7.6 LTS auf TYPO3 8.7 LTS upzugraden. Warum ich mir sowas antat, wo die 7.6er Seite doch erst ein halbes Jahr alt war? Die eigene Seite eignet sich ja immer hervorragend zum Testen von Neuem und so bot es sich an, zuerst mal hier zu testen, wie gut 8.7 bereits benutzt werden kann.

Eigentlich wollte ich mit dem Upgrade bis zum offiziellen Release von TYPO3 8.7 Anfang April 2017 fertig sein, aber im Verlauf der Umstellung war doch noch einiges mehr zu tun, es mussten einige Bugs gefixed und neue Features eingebaut werden, daher hat das Ganze jetzt doch ein paar Wochen länger gedauert als geplant.

Flux und Fluidcontent raus, Gridelements rein

Zwei Extensions (accordion und c1_fce_grid) haben noch Flux und Fluidcontent benutzt. Mittlerweile scheint mir jedoch gridelements die sinnvollere Alternative für verschachtelte Elemente, daher habe ich die zwei Extensions durch gridelements ersetzt. Gerade bei der Grid Extension (die u.a. Bootstrap Container/Spalten ermöglichte) war das mit recht viel Aufwand verbunden, da ich den Content grösstenteils von Hand in die neuen gridelements-Container migriert habe. Im Nachhinein hätte es sich doch gelohnt hierfür einen Converter zu schreiben und nicht nur in der Datenbank die colPos aller Elemente zu verändern und danach im Backend manuell neu anzuordnen.Gridelements hatte dann auch noch den ein oder anderen Bug im Zusammenspiel mit 8.7, u.a. mit Copy&Paste im Backend. Eine offizielle Version für TYPO3 8.7 von gridelements gibt es ohnehin noch nicht, die Entwicklerversion aus dem git funktioniert aber so weit, zumindest für meinen Anwendungsfall. Ausserdem hing an dem flux-Grid auch noch das relativ komplexe Rendern von responsive images mit c1_fluid_styled_responsive_images - hier musste eine ganz neue Lösung her. Doch dazu später.

Responsive und adaptive Bilder

Bilder machen gut 2/3 der zu übertragenden Datenmenge einer durchschnittlichen Webseite aus. Zudem müssen Geräte in verschiedensten Grössen unterstützt werden. Generell wird durch die immer weiter zunehmende Nutzung von Smartphones auch die zu übertragende Datenmenge beim Aufruf einer Seite ein wichtiger Faktor. Daher werden heute im Allgemeinen responsive bzw. adaptive Techniken für Bilder eingesetzt - jedes Gerät soll ein für die jeweilige Auflösung optimiertes Bild laden können.

Die Standardlösung sind hierfür die neuen Attribute srcset und sizes der img und media Tags. Diese werden mittlerweile gut von den Browsern unterstützt und es gibt ausreichend polyfills (z.B. picturefill oder respImg), haben jedoch ein Problem: mit sizes kann nur eine Breite relativ zum Viewport bei einem bestimmten Breakpoint angegeben werden. Das erfordert viel Wissen beim Entwickler über den Kontext des Bildes, also: wie gross wird es wirklich angezeigt? Oft weiss man das, in vielen Fällen aber nicht (etwa bei vom editor gepflegten Inhalten) und muss hier dann Kompromisse machen, meist auf Kosten der Dateigrösse des Bilds, man läd also tendenziell eher zu große Bilder. 

Ich hatte hier auf der vorherigen Seite mit c1_fluid_styled_responsive_images bereits eine funktionierende Lösung, welche die Bildbreite innerhalb eines Bootstrap Grids dynamisch aus der Spaltenbreite berechnen konnte, jedoch war der Code relativ komplex und an ein Grid auf flux-Basis gebunden. Mit dem Wechsel auf gridelements als Grid-Framework funktionierte das aber nicht mehr. Also entweder Umschreiben oder etwas ganz Neues bauen.

Nach einiger Recherche stiess ich auf lazysizes.js. Das ist eigentlich ein Lazy Loader Script, hat aber ein Feature, das einige Probleme im Zusammenhang mit adaptive Images löst: Da die Bilder erst geladen werden, wenn die Seite bereits gerendert und dadurch die Grösse des Bildes bekannt ist, kann das sizes-Attribut pixelgenau durch JavaScript gesetzt werden. Ich habe daher dann einen neuen Image-Renderer geschrieben für die neue Seite, der sich das zunutze macht. Bis die Lösung zufriedenstellend lief war einiges zu tun, aber insgesamt bin ich recht zufrieden mit der Lösung. Voraussichtlich gibts demnächst noch einen Blogbeitrag, welche Probleme hier auftauchten und welche Lösungen gefunden werden.

Die neue TYPO3 8.7 LTS unterstützt nun zudem Art Direction durch verschiedene CropVarianten im Backend und damit die Anzeige unterschiedlicher Bildzuschnitte bei unterschiedlichen Grössen. Das wird von der neuen Lösung nun ebenfalls unterstützt. Ich plane die Extension in nächster Zeit zumindest auf github zu veröffentlichen und dann gibt es evtl. auch Blog Posts dazu.

Wo schon dabei, habe ich auch gleich einen SVG-Image-Renderer (der ist schon veröffentlicht, siehe c1_fluid_styled_svg) geschrieben, der SVGs besser rendert (inline oder als object und dann per javascript nach inline geladen).

Ein weiterer wichtiger Baustein für die Bildoptimierung wurde schliesslich noch die TYPO3-Extension image_optimizer, die Bilder automatisch (u.a. mit jpegoptim und optipng) ohne wahrnehmbaren Qualitätsverlust verkleinern kann.

Geschwindigkeit

Die neue 8.7 Seite ist nun auch deutlich schneller. Das liegt einerseits an den oben beschriebenen Bildoptimierungen, zum anderen an PHP7 und am optimierten TYPO3 Core und vermutlich auch am jetzt entfernten Flux und c1_fluid_styled_responsive_images. Ein typischer gecachter Seitenaufruf dauert nun nur noch um die 120ms. 

Formulare

Das neue Framework für Formulare (EXT:form) wurde ja im Vorfeld extrem gehyped ("noch nie gesehene Features, alles mega!") - evtl. war daher meine Enttäuschung zunächst mal gross. Im Nachhinein muss ich aber sagen, dass meine Frustration mit dem Form Framework wohl hauptsächlich von der kaum vorhandenen und dazu noch veralteten Doku herrührte - mehr als ein Git-Respository mit einigen Code-Beispielen gab es nicht. Das hat sich mittlerweile extrem verbessert, die Doku zu EXT:form ist mittlerweile sehr angewachsen und hilfreich.

Bisher hatte ich formhandler für Formulare eingesetzt. nachdem dessen Weiterentwicklung aber abgekündigt wurde und es auch keinen (ernsthaften) Nachfolger zu geben scheint habe ich die neue Seite nun auf die neue form-Extension umgestellt. Zwar sehe ich noch einiges, das ich an den Formularen verbessern kann, aber grundlegend funktionieren die erstmal. Ein Punkt der mich noch sehr ärgert ist, dass auf Seiten mit Formularen anscheinend komplett das Frontend-caching deaktiviert wird, eine Lösung habe ich dafür noch nicht. Auch Ajax-Submit/Validierung wäre noch so ein offener Punkt. Done - siehe Blog Post: Formular mit typoscript-rendering per Ajax verschicken.

Fazit des Upgrades auf 8.7

Das hat sich definitiv gelohnt. Mit 8.7 bekamen wir ein noch schickeres Backend, ein schnelleres TYPO3 und mit dem neuen Image Wizard ein brauchbares Werkzeug, um besser adaptive Bilder einsetzen zu können. Das Update selbst war an sich relativ schmerzlos und ich habe hierbei eine Menge an Wissen gesammelt, das bei nachfolgenden upgrades von Kundenseiten sehr nützlich war.

Ich hatte schon Phasen, wo ich nicht sicher war, ob TYPO3 eine große Zukunft hat - um Version 6.1 herum war das wohl, als es sehr große Änderungen gab und damit viele Bugs - aber im Moment bin ich da sehr zuversichtlich und gespannt, was mit Version 9 alles kommt. TYPO3 ist jedenfalls auf einem guten Weg, imho.

Kommentare (0)

Bisher keine Kommentare vorhanden.

Neuen Kommentar schreiben