Erstellung der Ibexa-Website: Page Builder als Framework für die Erstellung von Erlebnissen

Page Builder, eine Komponente von Ibexa DXP, ermöglicht es auch technisch nicht versierten Benutzern, Landingpages einfach zu erstellen und zu verwalten. Standardmäßig werden viele gängige Anforderungen erfüllt. Wirklich zum Leben erweckt wird die Funktion jedoch, wenn Entwickler sie als technisches Framework einsetzen.

Wie in einem früheren Beitrag zur Implementierung der Ibexa-Website beschrieben, bestand das Ziel darin, unsere internen Teams bei der Verwaltung der Website zu unterstützen. Anstatt Aufgaben an technische Mitarbeiter zu delegieren, sollte jeder in die Lage sein, das, was er braucht, selbst zu erstellen.

Page Builder ist eine technische Funktion, die sich aus zwei Kernelementen zusammensetzt: Blöcke und Layouts. Blöcke sind einzelne Komponenten mit spezifischen Funktionen (News-Listen, Bildergalerien), während Layouts Container für Blöcke sind. Ein Layout enthält eine oder mehrere Bereiche, in denen Blöcke platziert werden können. Die Festlegung von Layouts, Blöcken und des Designs ist eine Aufgabe, die von den Entwicklern in der Anfangsphase und während der laufenden Entwicklung erledigt wird.

Sobald die wichtigsten Elemente eingerichtet sind, können Redakteure den Page Builder verwenden, um Landingpages und andere unabhängige Seiten zu erstellen. Ein Beispiel ist die Landingpage für das Event Ibexa Engage 2021. Mit einem robusten Satz flexibler Blöcke und Layouts können Website-Manager neue Seiten ohne Entwicklerressourcen zusammenstellen.

Im Laufe der Zeit kommen neue Anforderungen hinzu. Dann können neue Blöcke und Layouts erstellt oder die vorhandenen geändert werden. Da die Inhalte von den Vorlagen entkoppelt sind, können Aktualisierungen des Designs im Laufe der Zeit problemlos durchgeführt werden.

Flexibilität im Frontend

For the front end, Page Builder does not pose any specific limitations for the technologies used. The system is designed to work with minimal markup in the template source code. Developers need to annotate their zones and blocks with standard HTML data attributes. Based on this data the page builder can pick up the pieces and allow drag and drop editing of blocks and layouts.

For display logic in the block templates developers can use the familiar Twig templating syntax. In addition to simple loops and simple conditionals the Twig helper functions in Ibexa DXP allow easy access to displaying content or components from Ibexa Commerce. This works as it does elsewhere, making working with page builder straightforward as the system is built on the standard Symfony framework.

If you have existing reusable components that you want to use, they can be used in Page Builder. One example is stand-alone web components built with LitHTML and Symfony Encore that use the GraphQL endpoint for a fluent end user experience. You can also embed third party widgets like the Gartner Peer Insights element.

Für das Frontend gibt es beim Page Builder keine spezifischen Einschränkungen für die verwendeten Technologien. Das System ist so konzipiert, dass es mit minimalem Markup im Quellcode der Vorlage arbeitet. Die Entwickler müssen ihre Zonen und Blöcke mit Standard-HTML-Datenattributen versehen. Auf der Grundlage dieser Daten kann der Page Builder die Teile aufgreifen und die Drag-and-Drop-Bearbeitung von Blöcken und Layouts ermöglichen.

Für die Anzeigelogik in den Blockvorlagen können Entwickler die vertraute Twig-Syntax für Vorlagen verwenden. Zusätzlich zu einfachen Schleifen und einfachen Bedingungen ermöglichen die Twig-Helper-Funktionen in Ibexa DXP einen einfachen Zugriff auf die Anzeige von Inhalten oder Komponenten aus Ibexa Commerce. Dies funktioniert genauso wie anderswo und macht die Arbeit mit dem Page Builder einfach, da das System auf dem Standard-Symfony-Framework aufgebaut ist.

Wenn bereits vorhandene wiederverwendbare Komponenten zum Einsatz kommen, können diese im Page Builder verwendet werden. Ein Beispiel sind eigenständige Webkomponenten, die mit LitHTML und Symfony Encore erstellt wurden und den GraphQL-Endpunkt für eine reibungslose Endbenutzererfahrung nutzen. Auch Widgets von Drittanbietern wie das Gartner Peer Insights-Element können eingebettet werden.

Integration von Backend-Diensten

Hinter den Kulissen wird der Page Builder von unserem Standard-Technologie-Stack unterstützt. Das bedeutet, dass das Rendering einfach genutzt werden kann, um Daten aus unserem Content Repository abzurufen, aktuelle Preisdaten über E-Commerce-ERP-Integrationen zu erhalten oder personalisierte Empfehlungen von Ibexa Personalization auf der Grundlage eines Profils zu erhalten. Das Rendering der einzelnen Elemente kann über die in den Kern integrierten Ereignisse gesteuert werden.

Neben der Anbindung an die nativen Dienste von Ibexa DXP können auch externe Datensysteme angebunden werden. Dies kann von Fall zu Fall mit Komponenten von Symfony geschehen, die viele Standard-Integrationsprotokolle unterstützen. Wenn jedoch eine bestehende Anwendung mit Symfony erstellt wurde, kann diese in den Page Builder integriert werden, um den Kunden eine neue Möglichkeit zur Nutzung der Anwendung zu bieten.

Wenn SaaS-Dienste wie Marketing-Automatisierungstools verwendet werden, die APIs anbieten, kann das Backend auch für einfache Integrationen verwendet werden, bei denen Variablen weitergegeben werden und eine leichte Validierung erfolgt. Die Anzeige kann mit der serverseitigen Rendering-Pipeline oder am Frontend mit Frontend-Technologien wie React.js, Vue.js oder Webkomponenten erfolgen. Dies ist möglich, weil die Frontend-Architektur nicht an eine bestimmte Bibliothek gebunden ist.

Fazit

Mit Ibexa DXP und Page Builder ist es uns gelungen, unseren Mitarbeitern mehr Freiraum zu geben, damit sie die benötigten Änderungen sofort umsetzen können, anstatt auf einen langwierigen Entwicklungsprozess zu warten. Sobald das anfängliche Entwicklungsprojekt abgeschlossen war, konnte schnell experimentiert werden. Die Echtzeit-Vorschau gibt die nötige Zuversicht, um auf die Schaltfläche "Veröffentlichen" zu klicken.

Mehr über den Page Builder und die weiteren Funktionen von Ibexa Experience und Ibexa Commerce in unserem Webinar: Introducing Ibexa DXP v3.3 The Unified DXP