FoBiG - Website mit TYPO3 CMS und Vue.js: Projekthauptbild / Keyvisual

FoBiG
Website mit TYPO3 CMS und Vue.js

Dieses Projekt hat begeistert und Lust auf neues gemacht. Auf Seiten des FoBiG wie auch auf unserer Seite. In einer sehr angenehmen Zusammenarbeit wurde so aus dem Gedanken eines Website-Facelifts eine komplette Neuentwicklung mit einer Transformation ins technologische Jahr 2022. So wurde aus einer mittlerweile über zehn Jahre alten Website eine moderne, klare, kundenorientierte und wissenschaftliche neue Website.

Zurück
FoBiG - Website mit TYPO3 CMS und Vue.js: Screenshot
FoBiG - Website mit TYPO3 CMS und Vue.js: Stilelement Notebook

Das Projekt und dessen
Zahlen, Daten, Fakten

Launch:
August 2022
Kunde:
FoBiG
Design:
Philipp Körner
Technologien:
PHP, JavaScript
Frameworks:
TYPO3, Vue.js
www.fobig.de

Die redaktionellen Möglichkeiten:
Das Backend

Mit dem Anspruch auf eine möglichst einfache redaktionelle Bedienbarkeit wurden wie in jedem unserer Projekte TYPO3-Inhaltselemente den Anforderungen entsprechend für den Kunden aufbereitet oder neu entwickelt. Für zentrale Herzstücke des Unternehmens wie z.B. die Publikationen und die Stofflisten wurden eigene Extensions entwickelt. Exakte Eingabemasken mit wenig Overhead sorgen so für ein schnelles redaktionelles Handling mit kurzen Einarbeitungszeiten.

Zum Einsatz kommt das die aktuellste TYPO3 Version 11 mit Long Term Support.
Speziell für FoBiG entwickelte Inhaltselemente und Plugins.
Das Video auf der Startseite ist über ein eigenes Inhaltselement pflegbar. Da der Wunsch nach einer langsameren Abspielgeschwindigkeit aufkam, wurde diese konfigurierbar gemacht.
Über eine eigenentwickelte Eingabemaske kann die Stoffliste schnell und selbsterklärend erweitert werden.
Zur Ausgabe von Stellenanzeigen wurde eine kleine Extension enwickelt. Offene Stellen können komfortabel ausgeschrieben werden.
Die neu entwickelte Eingabemaske zur redaktionellen Pflege der Publikationen.
Eingabemaske zur redaktionellen Pflege des Teams / der Mitarbeiter:innen.
Mitarbeiter:innen können an auserwählten Inhaltselementen verknüpft werden, um diese an verschiedenen Stellen im Frontend auszugeben, ohne diese redundant anzulegen.
Für die Ausgabe der Unternehmensnews wurde eine eigene News-Extension entwickelt.

Was beim Benutzer ankommt:
Das Frontend

Das Frontend wurde in Anmutung an ein wissenschaftliches Whitepaper recht clean gehalten. Auf eine gestalterische Überladung wurde bewusst verzichtet und Schwerpunkt auf Struktur, Inhalt und Benutzerführung gelegt. Zentrale Elemente wie die umfangreiche Liste der FoBiG-Publikationen und der Stoffliste wurden mit dem reaktiven JavaScript-Framework Vue.js umgesetzt. Dies sorgt neben einer unschlagbaren Performance auch für Mehrwerte für den Benutzer.

Die Ausgabe der Stoffliste, gruppiert nach Alphabet
Die Suche nach einem Stoff ist über eine Live-Suche realisiert.
Die Listung der Publikationen, gruppiert nach Jahr.
Über eigen entwickelte UI-Komponenten können die Publikationen nach Text und nach Jahr gefiltert werden.
Die Ausgabe des Teams
Die Ausgabe der Stellenanzeigen

Ein Blick unter die Haube:
Die Technik

Entwickelt wurde diese Website mit unserem erprobten Tech-Stack. Da wir reaktives JavaScript lieben, kommt hier an bestimmten Stellen Vue.js zum Einsatz. TYPO3 liefert an diesen die Daten via eigener Schnittstelle quasi headless, die Ausgabe samt Business-Logik erfolgt dann rein per Vue.js. Die Abhängigkeiten zu anderen Frameworks / Libraries wurde ansonsten wie immer recht gering gehalten, um keine Kostentreiber für spätere Upgrades zu verursachen. Die Entwicklungsumgebung basiert auf docker, das Build des Frontends wird per node.js / webpack generiert. Das Deployment wird per bitbucket pipelines automatisiert, erfordert dadurch keine Buildtools auf dem Zielserver, ermöglicht das schnelle Erstellen einer Staging-Umgebung und reduziert die Fehlerquote beim Release deutlich.

Frontend Development
Vue.js
TYPO3 Extension Development (PHP)