Seminar Sulu Frontend mit Twig und Asset-Pipeline

Das Seminar behandelt die robuste Website-Ausgabe von Sulu-Inhalten mit Twig und einer modernen Asset-Pipeline. Komponenten, Navigation, Medien, Blöcke, Mehrsprachigkeit, Caching und Frontend-Qualität werden gemeinsam umgesetzt.

Inhaltsverzeichnis

• Zielgruppe
• Voraussetzungen
• Lernziele
• Lernfelder
• Praxisprojekt Schritt für Schritt
• Qualitätskontrollen
• Empfohlene Anschlussseminare

Zielgruppe

Frontend-, Full-Stack- und PHP-Entwickelnde, die Sulu-Websites und wiederverwendbare Darstellungskomponenten entwickeln.

Voraussetzungen

Grundkenntnisse in Twig, HTML, CSS und JavaScript sowie ein grundlegendes Verständnis von Sulu-Templates und Content-Feldern.

Lernziele

• Sulu-Content sicher in Twig auflösen und darstellen
• wiederverwendbare Komponenten für Felder und Blöcke entwickeln
• Navigation, Medien und Lokalisierung korrekt integrieren
• Assets reproduzierbar bauen und ausliefern
• Frontend-Ausgabe auf Performance, Barrierearmut und Fehlerfälle prüfen

Lernfelder

Lerneinheit 1: Rendering-Modell und Twig-Kontext

• Auswahl des Twig-Templates und verfügbare Variablen
• Trennung von Content-, View- und Extension-Daten
• Sichere Standardwerte und Verhalten bei fehlenden Feldern

Lerneinheit 2: Komponenten und Template-Struktur

• Layouts, Includes, Makros und Komponenten
• Namenskonventionen und klar definierte Eingaben
• Wiederverwendung ohne versteckte globale Abhängigkeiten

Lerneinheit 3: Navigation und Content-Auflösung

• Menüs, Breadcrumbs und aktive Zustände
• Gezieltes Laden von Seiten, Artikeln und Snippets
• Locale, Webspace und Publikationszustand berücksichtigen

Lerneinheit 4: Blöcke und redaktionelle Varianten

• Blocktypen auf Frontend-Komponenten abbilden
• Reihenfolge, optionale Felder und verschachtelte Inhalte
• Robuste Ausgabe bei alten oder unvollständigen Daten

Lerneinheit 5: Medien und Bildformate

• Bilder, Videos und Dokumente auflösen
• Responsive Varianten, Alt-Texte und Abmessungen
• Lazy Loading, Dateigröße und Fehlerersatz

Lerneinheit 6: Asset-Pipeline und Frontend-Qualität

• CSS- und JavaScript-Einstiegspunkte
• Build, Versionierung und Cache-Busting
• Performance, Barrierearmut, Fehlerseiten und automatisierte Prüfungen

Praxisprojekt Schritt für Schritt

Als durchgängige Übung entsteht ein komponentenbasiertes Frontend für eine mehrsprachige Sulu-Website mit Navigation, Inhaltsblöcken, Medien und optimierten Assets.

1. Schritt 1: Ausgangslage, Rollen, Systemgrenzen und Abnahmekriterien für ein komponentenbasiertes Frontend für eine mehrsprachige Sulu-Website mit Navigation, Inhaltsblöcken, Medien und optimierten Assets festhalten.
2. Schritt 2: Den Lernbereich „Rendering-Modell und Twig-Kontext“ konfigurieren und mit einem Positivfall prüfen.
3. Schritt 3: Den Lernbereich „Komponenten und Template-Struktur“ umsetzen und mit realistischen Testdaten verbinden.
4. Schritt 4: Den Lernbereich „Navigation und Content-Auflösung“ durch einen Negativfall und eine Korrektur absichern.
5. Schritt 5: Den Lernbereich „Blöcke und redaktionelle Varianten“ analysieren und die benötigten Artefakte festlegen.
6. Schritt 6: Den Lernbereich „Medien und Bildformate“ konfigurieren und mit einem Positivfall prüfen.
7. Schritt 7: Den Lernbereich „Asset-Pipeline und Frontend-Qualität“ umsetzen und mit realistischen Testdaten verbinden.
8. Schritt 8: Die Teilkonfigurationen zu einem durchgängigen Anwendungsszenario verbinden und Abhängigkeiten sichtbar dokumentieren.
9. Schritt 9: Berechtigungs-, Locale-, Publikations- und Fehlerfälle mit einer standardisierten Prüfliste ausführen.
10. Schritt 10: Den erreichten Stand als Konfigurationsübersicht, Betriebscheckliste und priorisierte nächste Ausbaustufe festhalten.

Qualitätskontrollen

• Fachliche Anforderungen, Systemgrenzen und Verantwortlichkeiten sind eindeutig dokumentiert.
• Konfigurationen und Implementierungen sind reproduzierbar, versionierbar, vollständig und eigenständig beschrieben.
• Positiv-, Negativ-, Berechtigungs-, Locale- und Fehlerfälle sind nachvollziehbar geprüft.
• Betriebs-, Sicherheits-, Performance- und Wartungsaspekte sind passend zum Thema berücksichtigt.
• Die nächsten Vertiefungsschritte sind nach Risiko und Nutzen priorisiert.

Empfohlene Anschlussseminare

• Sulu Content-Templates und Property Types
• Sulu Performance, Caching und Skalierung
• Sulu Routing, URLs und SEO-Technik