Building the Ibexa Website: Page Builder is a Framework for Creating Experiences
Page Builder, a feature in Ibexa DXP, enables non-technical users to create and manage landing pages easily. Out of the box it fulfils many common needs, but it really comes to life when developers embrace it as a technical framework.
As described in the first post of this series detailing a few aspects of the Ibexa website implementation, the aim was to enable our internal teams to take control of the site management. Instead of delegating tasks to technical staff, we wanted everyone to be enabled to build what they need themselves.
Page Builder is a technical feature that is built out of two core elements: blocks and layouts. Blocks are individual components that have specific functionalities (news listings, image galleries) while layouts are containers for blocks. A layout contains one or more zones where blocks can be placed into. Defining layouts, blocks and the design is a task done by developers during the initial phase and ongoing development.
Once the core elements are in place, editors can use Page Builder to create landing pages and other non-uniform content pages independently. One example is the landing page for the Ibexa Engage 2021 event. With a robust set of flexible blocks and layouts in place the site managers can assemble new pages without developer resources.
Over time, new needs will arise and new blocks and layouts can be created, or the existing ones modified. And, because the content is decoupled from the templates, design refreshes can be rolled out with ease over time.
Flexibility in the front end
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.
Integrating back-end services
Behind the scenes Page Builder is powered by our standard technology stack. This means that you can easily tap into the rendering flow to get data from our content repository, get up-to-date pricing data through eCommerce ERP integrations or get personalized recommendations from Ibexa Personalization based on your profile. Rendering of each element can be hooked into using the events built into the core.
In addition to connecting to the native services offered by Ibexa DXP, you can connect to external data systems. This can be done case-by-case using components from Symfony that support many standard integration protocols. But if you've got an existing application built using Symfony, you can look into bridging that into the page builder to enable a novel way to expose the application to your customers.
If you use SaaS services like marketing automation tools that offer APIs, you can also use the backend for simple integrations passing around variables, doing some light validation. Display can be done with the server side rendering pipeline or on the front end using front end technologies like React.js, Vue.js or web components. This is possible because the front end architecture is not tied to any specific library.
Conclusion
With Ibexa DXP and Page Builder we have succeeded in giving our staff more freedom to build what they need immediately rather than waiting for a lengthy development process to implement the needed changes. Once the initial development project was completed rapid experimentation could be done. And the real-time preview provides the confidence to click the publish button.
Learn more about Page Builder and other features in Ibexa Experience and Ibexa Commerce from our webinar: Introducing Ibexa DXP v3.3 The Unified DXP
