Micheal, Pimcore stellt schon seit einiger Zeit ein CMS zur Verfügung. Letztes Jahr wurde dann bei der Pimcore Inspire das neue Feature Headless Dokuments angekündigt. Was ist das und welche Vorteile hat dieses Feature?
Pimcore hat bisher ein eher klassisches Content Management System (Documents) zur Verfügung gestellt. Ähnlich wie bei WordPress oder Typo3 lässt sich damit der Content für eine Website über editierbare Elemente einpflegen. Dieses CMS ist aber in seinen Möglichkeiten limitiert, wenn es zum Beispiel darum geht, spezielle individuelle Anforderungen wie zum Beispiel eine SPA oder eine PWA umzusetzen. Headless Documents bietet jetzt ein deutlich größere Flexibilität, da die Verwaltung der Inhalte völlig unabhängig von der Darstellung in auf der Website ist.
Warum war es in diesem Projekt so wichtig, die Website als Headless-Lösung umzusetzen? Welche Vorteile entstehen dadurch?
Camina & Schmid ist auf qualitativ hochwertige Kaminanlagen und Kachelöfen spezialisiert. Das Unternehmen verfügt über ein großes, deutschlandweites Vertriebsnetz spezialisierter Fachhandelspartner. Mit dem Relaunch der Website soll der Webauftritt modernisiert werden, um die Sichtbarkeit der Marke zu erhöhen und durch ein erweitertes Serviceangebot den Vertrieb zu unterstützen. Das Unternehmen legt dabei großen Wert darauf, dass die Website sehr performant und nutzungsfreundlich ist. Deshalb soll Website als Single Page Application (SPA) umgesetzt werden. Bei dieser Lösung wird nur ein einziges HTML-Dokument geladen und clientseitig ausgeführt. Bei der Nutzung der Website muss dann nicht jeweils eine neue Seite geladen werden, sondern es wird nur der Content bzw. die Daten nachgeladen, die benötigt werden.
In unserem Fall wurde das Frontend – die Präsentationslogik – als Individualentwicklung auf Basis des Frameworks Vue.js umgesetzt. Die Daten, die auf der Website ausgespielt werden sollen, werden über eine Programmierschnittstelle (API) aus dem Pimcore-System übertragen.
Diese Lösung hat mehrere Vorteile: Zum einen sind die Ladezeiten der Webseite im Vergleich sehr schnell, da die Seite nur einmal geladen wird – sie baut sich nur einmal im Browser auf. Wenn Nutzer*innen mit der Seite interagieren, werden nur die Daten dynamisch nachgeladen, die in diesem Moment erforderlich sind. Dadurch bietet die Website eine herausragende User Experience, ähnlich einer Mobile App.
Zum anderen sind durch den Headless-Ansatz die Frontend-Applikation und das Pimcore-Backend voneinander getrennt und kommunizieren nur über die API. Dadurch können Frontend und Backend unabhängig voneinander entwickelt werden, ohne einander zu beeinflussen. Darüber hinaus unterstützt diese Architektur das Best-of-Breed-Prinzip und bietet Camina & Schmid so die Möglichkeit, das System flexibel zu erweitern oder beispielsweise zukünftig ein anderes Frontend anzubinden, ohne gleichzeitig das Backend überarbeiten zu müssen.
Michael Dick
Software Developer, basecom
Michael Dick arbeitet seit 2020 als Frontend Developer in der Business Unit Pimcore bei basecom. Seine Schwerpunkte liegen dabei in der Entwicklung und Anbindung innovativer Frontend-Lösungen. Bevor er zu basecom gekommen ist, war Michael als Mitbegründer an der Entwicklung einer Recruiting-Plattform beteiligt und als Freelance Web-Developer und Indie-Game-Developer tätig.
In seiner Freizeit führt Michael als Dungeon Master Abenteurer durch die Welt von Dungeons & Dragons.
Headless Documents ist ein neues Feature bei Pimcore, zu dem es bisher nur wenige Cases gibt. Welche Learnings ziehst du aus diesem Projekt und wie bewertest du deine Erfahrung mit dem neuen Feature?
Aus meiner Sicht ist Headless Documents eine wirklich gute Erweiterung der Pimcore Plattform, weil sie die Basis dafür schafft, moderne Frontend-Frameworks mit Pimcore zu verbinden. Die große Stärke von Pimcore ist das Data-Management: Produktdaten aus dem PIM, digitale Assets aus dem DAM und Documents (CMS) können dabei problemlos miteinander in Beziehung gesetzt werden, da sie ja in einer integrierten Plattform zusammengefasst sind. Um diese Daten in einer Frontend-Applikation ausspielen zu können, stellt Pimcore mit dem Datahub eine Schnittstelle zur Verfügung, die die Integration stark vereinfacht.
Hinzu kommt, dass Pimcore innerhalb des Datahubs als Schnittstellenoption GraphQL unterstützt, welches zudem erlaubt, gezielt die Daten abzufragen, die das Headless Frontend benötigt – ohne dabei zusätzlichen Entwicklungsaufwand auf Backend-Seite zu erzeugen.
Meiner Meinung nach hat Pimcore mit den neuen Headless Features die Grundlage geschaffen, spannende neue Websites und Anwendungen entwickeln zu können und dabei zugleich freie Wahl beim Frontend Techstack zu haben. In diesem Projekt habe ich das Frontend mit Vue.js umgesetzt. Perspektivisch finde ich auch eine Umsetzung in Nuxt 3 interessant. Bisher gibt es noch nicht viele Projekte, die auf Headless Documents aufbauen und wir mussten viele Lösungen selbst entwickeln und ausprobieren. Ich bin sehr gespannt darauf, welche Lösungsansätze in Zukunft in der Pimcore-Community entwickelt werden.
Wenn Sie mehr über die Pimcore Plattform, die innovativen CMS-Lösungen, das Data-Management oder das Digital Commerce Framework von Pimcore erfahren möchten, sprechen Sie uns an! Wir freuen uns, Sie kennenzulernen und beraten Sie gerne.
