Kopflos im Spa? F7-Workshop zu neuen Tech­no­lo­gien

Was vor der Pandemie Normalität war, ist Ende 2022 eine kleine Sensation: die Büroräume von F7 waren fast voll besetzt mit der Entwicklungs-Crew! Diese hatte sich zu einem 3-tägigen Workshop eingeschlossen, um erste Erfahrungen und Ansätze zu entwickeln TYPO3 “headless” zu betreiben, Backend- und Frontendentwicklung zu trennen und somit den Weg für elegante “Single Page Applications” zu ebnen.

Headless und Spa

Das Web entwickelt sich rasant weiter. Seit einiger Zeit kommen  vermehrt Begriffe wie "Headless CMS" und "Single Page Application" in die Diskussion, wenn es um Web-Technologien geht.

Headless-CMS bedeutet die radikale Trennung von Backend und Frontend. Bislang war das TYPO3-System für das Rendern der Templates zuständig (server side rendering), die als Frontend ausgespielt werden. Doch Computer sind mittlerweile so leistungsstark, dass das Rendering von den Browsern selbst übernommen werden kann (client side rendering). Es haben sich Javascript-Frameworks entwickelt, welche dies ermöglichen. Außerdem hat sich die Art der Endgeräte verändert - was früher nur der Desktop-Computer war, der die Website anzeigt, können heutzutage sehr unterschiedliche Medien sein, um Inhalte auszuspielen (wie zum Beispiel eine App für das Smartphone).

Als Konsequenz daraus ergibt sich, dass Content-Management-Systeme (CMS) wie TYPO3 nur als Backend zur Erstellung und Verwaltung von Inhalten genutzt werden können und mit dem Rendering des Frontends nichts mehr zu tun haben. Wenn man Frontend als “Kopf” einer Website bezeichnet, wird das CMS somit “headless”.

Die Nutzung der Javascript-Frameworks zum Rendering machen das Frontend nun deutlich flexibler. Wurde früher prinzipiell ein relativ statisches HTML gerendert und anschließend gestylt und animiert, sind heutzutage etwa sogenannte “Single Page Applications” (SPA) möglich. Hier besteht die Website aus einem einzigen HTML-Dokument, die eigentlichen Inhalte werden dynamisch nachgeladen. Die User erleben das Browsen damit erheblich flüssiger.

Backend meets Frontend

Was passierte nun im Workshop? Nach einem gemeinsamen Auftakt wurden die Arbeitsgruppen Backend und Frontend auf die Reise geschickt, um sich der Fragestellung “wie nutzen wir TYPO3 als Basis für ein Javascript-Frontend-Framework” anzunähern.

Die Backend-Crew war damit beschäftigt, das TYPO3-System so zu konfigurieren, dass sämtliche Daten in einem auslesbaren JSON-Format ausgespielt werden. Hier wurden existierende Headless-Extensions evaluiert, um daraus zu lernen und auf Praxistauglichkeit zu prüfen. Also bündelten wir unsere Expertise und entwickelten einen Prototypen, welcher bislang sehr präzise und mit wenig Code zum Ziel kommt: dem Frontend eine Datenstruktur zu liefern, mit der sie spielen können. Eine weitere Herausforderung für das Backend war, alles zusammenzuführen und die Serverkonfiguration so einzurichten, dass der API-Server (TYPO3) mit dem Node-Server des Frontends kommunizieren kann.

Ganz anders die Aufgabenstellung beim Frontend: Hier galt es, aus den zahlreichen JavaScript-Frameworks das für unsere Zwecke geeignetste auszuwählen. Die Entscheidung fiel auf Next.js, welches auf React basiert. Dann konnte es losgehen: zunächst mit Dummy-Daten, später (als das Backend liefern konnte) mit den Daten vom API-Server wurde die Version 0.1 eines neuen Frontends gebaut.

Die Atmosphäre während des gesamten Workshops war toll. Der Wechsel vom Tüfteln in den jeweiligen Arbeitsgruppen und den koordinierenden Meetings von Backend und Frontend hat sehr viel Spaß gemacht, stets war es spannend, was die andere Seite in der Zwischenzeit erarbeitet hat. Dass wir als Agentur uns abseits des Tagesgeschäfts Raum für Innovation nehmen können, empfinden wir als große Bereicherung.

Wie geht es weiter?

Das Ergebnis kann sich für ein Proof of Concept sehen lassen: die wichtigsten Content-Elemente im TYPO3 wurden so gebaut, dass sie als JSON-Struktur ausgegeben werden. Das Frontend kann darauf zugreifen und eine einfache Website rendern.

Dies ist natürlich erst der Anfang und es müssen weitere Hürden genommen werden, um ein nachhaltiges Produkt zu erzeugen. Doch der Anfang ist gemacht und durch die gewonnene Erfahrung ist ein Fahrplan entstanden, um in naher Zukunft unseren Kunden elegante und effiziente Headless / SPA-Lösungen anbieten zu können.

Als geeignetes Versuchsobjekt werden wir zunächst unsere eigene Website mit der neuen Technologie ausstatten. Dies wird unsere Raumstation, um kopflos - aber nicht ohne Verstand - durch die neuen Welten der Technologie zu navigieren.