Mask Twig für TYPO3

Warum Frontend-Entwickler Twig gegenüber Fluid bevorzugen und wie Mask das ermöglicht

TYPO3 setzt mit Fluid auf eine Template-Engine, die in der PHP-Welt einzigartig ist. Das ist gleichzeitig ihre Stärke und ihr grösstes Problem: Frontend-Entwickler, die aus dem Symfony-, Laravel- oder Node.js-Umfeld kommen, kennen Twig oder Nunjucks. Fluid kennen sie nicht. Der mask_twig_nunjucks_connector schliesst diese Lücke, indem er Mask Content Elements mit Twig- oder Nunjucks-Templates statt Fluid-Templates rendern lässt.

Für Agenturen, deren Frontend-Team mit Twig arbeitet und keine Lust hat, für jedes TYPO3-Projekt eine neue Template-Sprache zu lernen, ist der Connector die pragmatische Lösung. Bestehende Twig-Partials aus Symfony-Projekten oder Nunjucks-Komponenten aus Pattern Libraries lassen sich direkt wiederverwenden.

Typische Einsatzszenarien

Agenturen mit Symfony-Backend und TYPO3-Frontend. Eine Agentur entwickelt ihre Webanwendungen in Symfony und nutzt TYPO3 nur für Content-Management. Das Frontend-Team hat eine umfangreiche Twig-Component-Library aufgebaut. Statt alle Components für TYPO3 in Fluid neu zu schreiben, bindet der Connector die bestehenden Twig-Templates direkt in Mask Content Elements ein. Ein Header-Component, das in Symfony als header.html.twig existiert, funktioniert in TYPO3 ohne Änderung.

Pattern-Library-Integration mit Nunjucks. Ein Design-Team pflegt eine Pattern Library (z.B. auf Basis von Fractal oder Storybook), die Nunjucks als Template-Sprache nutzt. Der Connector erlaubt es, dieselben Nunjucks-Templates sowohl in der Pattern Library als auch in TYPO3 zu verwenden. Änderungen am Design werden einmal in der Pattern Library gemacht und sind automatisch auf der TYPO3-Website sichtbar.

Frontend-Entwickler-Onboarding in TYPO3-Projekten. Ein neuer Frontend-Entwickler startet in einem TYPO3-Projekt. Statt erst Fluid zu lernen (Syntax, Namespaces, ViewHelper-Konzept), schreibt er Twig-Templates, die er bereits beherrscht. Die Lernkurve für das Projekt reduziert sich von 2 bis 3 Tagen auf wenige Stunden.

Technische Architektur

Der mask_twig_nunjucks_connector funktioniert als Rendering-Bridge zwischen der Mask-Extension und einer alternativen Template-Engine. Mask definiert Custom Content Elements mit Backend-Feldern (Text, Bilder, Relationen). Standardmässig rendert Mask diese Elemente mit Fluid-Templates. Der Connector ersetzt diesen Rendering-Schritt.

Die technische Umsetzung:

• Twig-Integration: Der Connector nutzt die PHP-Library twig/twig (die gleiche, die Symfony verwendet). Twig-Templates werden im Dateisystem abgelegt, typischerweise unter Resources/Private/Twig/. Die Mask-Felder stehen als Template-Variablen zur Verfügung ({{ data.header }}, {{ data.bodytext }}).
• Nunjucks-Integration: Nunjucks ist die JavaScript-Pendant zu Twig (nahezu identische Syntax). Der Connector kann Nunjucks-Templates serverseitig über eine Node.js-Bridge rendern oder clientseitig als JavaScript-Templates ausliefern. Die serverseitige Variante erfordert Node.js auf dem Server.
• Variable-Mapping: Mask-Felder werden automatisch auf Template-Variablen gemappt. Einfache Felder (Text, Integer, Float) werden direkt übergeben. FAL-Referenzen (Bilder, Dateien) werden als Objekte mit URL, Titel und Alternativtext übergeben. Relationen werden als Arrays aufgelöst.

Abhängigkeiten: TYPO3 Core, Mask Extension, Composer-Paket twig/twig (für Twig) oder Node.js (für serverseitiges Nunjucks). Die Extension ist nicht im offiziellen TER verfügbar, sondern wird über GitHub/Packagist installiert. Die Twig-Integration ist dabei deutlich ausgereifter als die Nunjucks-Variante, weil Twig nativ in PHP läuft und keinen externen Prozess benötigt. In der Praxis nutzen über 90% der Connector-Installationen Twig, nicht Nunjucks.

Häufige Probleme und Lösungen

Problem: Twig-Template hat keinen Zugriff auf TYPO3-spezifische Daten. Fluid-ViewHelper wie f:uri.page, f:translate oder f:cObject existieren in Twig nicht. Ein Twig-Template kann nicht direkt auf den TYPO3-Seitenbaum, Übersetzungen oder andere Content-Elemente zugreifen. Die Lösung: Alle benötigten Daten müssen über das Variable-Mapping bereitgestellt werden. Der Connector kann über eine Konfiguration zusätzliche Daten (aktuelle Sprache, Seiten-URL, globale Settings) in den Template-Kontext injizieren. Für komplexe TYPO3-Funktionalität muss ein eigener Twig-Extension-Point geschrieben werden.

Problem: Nunjucks-Rendering ist langsam. Die Node.js-Bridge für serverseitiges Nunjucks-Rendering startet für jeden Request einen Node-Prozess. Das ist bei einzelnen Content-Elementen nicht spürbar, aber bei Seiten mit 10+ Mask-Elementen addieren sich die Rendering-Zeiten. Die Lösung: Einen persistenten Node.js-Worker-Prozess nutzen (statt pro Request einen neuen zu starten) oder auf Twig umsteigen, das nativ in PHP rendert und keinen externen Prozess benötigt.

Problem: Mask-Update bricht die Template-Variable-Names. Wenn Mask ein Feld umbenennt oder ein Feld-Typ geändert wird, ändern sich die Template-Variablen. Fluid-Templates zeigen dann leere Stellen, Twig-Templates werfen einen Fehler. Die Lösung: Twig im Strict-Mode betreiben (strict_variables: true) und nach jedem Mask-Update die Templates gegen die aktualisierten Variablen testen.

Migration und Versions-Kompatibilität

Der mask_twig_nunjucks_connector ist ein Community-Projekt mit begrenzter Verbreitung. Die Kompatibilität hängt von der Mask-Extension ab: Mask selbst wird aktiv gepflegt und unterstützt TYPO3 v11 und v12. Der Connector muss bei jedem Mask-Update auf Kompatibilität geprüft werden, da er sich in interne Rendering-Prozesse einklinkt.

Für TYPO3 v13 ist die langfristige Perspektive unklar. Die TYPO3-Community investiert stark in die Weiterentwicklung von Fluid (Fluid 4.0, Standalone Fluid). Gleichzeitig wächst der Druck von Frontend-Entwicklern, die Twig als Template-Standard bevorzugen.

Gosign empfiehlt den Connector für Projekte, in denen das Frontend-Team ausschliesslich mit Twig arbeitet und eine bestehende Component Library mitbringt. Für reine TYPO3-Projekte ohne externe Template-Anforderung bleibt Fluid die bessere Wahl, weil es nativ unterstützt wird, keine zusätzlichen Abhängigkeiten hat und die gesamte TYPO3-ViewHelper-Bibliothek nutzen kann. Der Produktivitätsgewinn durch Twig-Wiederverwendung muss den Wartungsaufwand des Connectors übersteigen - eine Abwägung, die bei jedem Projektstart konkret beziffert werden sollte. Bei weniger als 10 Mask-Elementen lohnt sich der Connector selten; bei 30+ Elementen mit bestehender Twig-Library dagegen fast immer.