Using Symfony UX components with Ibexa DXP

Symfony UX announced last December that the Symfony project is bringing front end technologies closer to the core product - the Symfony server side framework. The initiative aims to make adding rich front end functionalities to Symfony projects easy by packaging functionalities into easy-to-use and reusable components.

Because Ibexa DXP is built on the Symfony framework it is straightforward to use Symfony UX components with it. At this point it is worth noting that using Symfony UX is completely optional, and Ibexa DXP itself does not use it. We use server-rendered views as a base and use React.js to enhance the user interface where applicable.

But as a development platform we do not want to limit possibilities. The front end is decoupled from the back office, giving freedom to choose the best technologies suited for the need. And due to the potential for rapid development times it can offer, using Symfony UX components is an interesting option for projects building on Ibexa Commerce, Ibexa Experience and Ibexa Content .

Lazy loading images with Symfony UX LazyImage

In recent developer blog posts we've given insights on how the Ibexa website functions behind the scenes. Let's continue with the theme and see how we can optimize performance and user experience with image lazy loading. Lazy loading is a technique where images are loaded only when they are displayed. This can speed up the initial page load by reducing the amount of data sent to get the first view ready.

As described in the Ibexa website architecture article, we use the standard server-side-rendered method for the front end implementation. This means using the Twig templating engine to display data, generate links and so forth. This works well with the Symfony UX LazyImage component that does the heavy lifting for us. All we need to do is integrate it to our image field template. Let's see how this could be done.

For automatic use we must use Webpack Encore to manage your front end assets to enable automatic loading of JavaScript code. To get started, install the Stimulus Bridge, intervention/image and the LazyImage component:

$ yarn add @symfony/stimulus-bridge
$ composer require intervention/image
$ composer require symfony/ux-lazy-image
$ yarn install --force
$ yarn encore dev

Once verifying the installation and configuration is okay, we can move forward with implementing the LazyImage component to our templates. For our project we've got an extended fieldtype template in place. We are free to modify the default template. For brevity, we'll just focus on line 450 of the default content field template:

<img
    src="{{ src }}"
    alt="{{ parameters.alternativeText|default(field.value.alternativeText) }}"
    {% for attrname, attrvalue in attrs %}
        {% if attrvalue %}{{ attrname }}="{{ attrvalue }}" {% endif %}
    {% endfor %}
/>

The source attribute is what we need to alter, as described in the documentation we need to replace the src attribute with a placeholder and add the data-hd-src to point to the lazy-loaded image. The intervention/ image library we loaded above allows generating a blurred placeholder from the original image.

You can get this done from your original image with the following Twig snippet:

{% set blur_src = data_uri_thumbnail(app.request.server.get('DOCUMENT_ROOT') ~ '/var/' ~ imageAlias.uri|split('/var/').1, attrs.width, attrs.height) %}

We can use it as the placeholder source and the original value as the lazy-loaded one:

<img
    src="{{ blur_src }}"
    data-hd-src="{{ src }}"
    alt="{{ parameters.alternativeText|default(field.value.alternativeText) }}"
    {% for attrname, attrvalue in attrs %}
        {% if attrvalue %}{{ attrname }}="{{ attrvalue }}" {% endif %}
    {% endfor %}
/>

And that's it. All repository images will now be loaded as they enter the viewport.

Conclusion

As you can see the Symfony UX technology can enable you to add commonly used features to your web sites, portals and custom applications. The initiative is still new and developing with more features such as Symfony UX Turbo being added.

But it continues to be an optional technology. And you can still continue to use Ibexa DXP with your own custom front-end workflows or web components. You can also use Ibexa DXP decoupled with frameworks like Next.js via the REST and GraphQL APIs.

The Symfony UX project is definitely something that every developer working with Symfony and Ibexa DXP should keep an eye on. It's still early days.

Photo by Simone Impei on Unsplash