Verwendung von Symfony UX-Komponenten mit Ibexa DXP

Symfony UX kündigte im vergangenen Dezember an, dass das Symfony-Projekt Frontend-Technologien näher an das Kernprodukt - das serverseitige Symfony-Framework - heranführen wird. Die Initiative zielt darauf ab, das Hinzufügen umfangreicher Frontend-Funktionen zu Symfony-Projekten zu vereinfachen, indem Funktionen in einfach zu verwendende und wiederverwendbare Komponenten verpackt werden.

Da Ibexa DXP auf dem Symfony-Framework aufbaut, ist es einfach, Symfony UX-Komponenten zu verwenden. In diesem Zusammenhang ist zu erwähnen, dass die Verwendung von Symfony UX völlig optional ist und Ibexa DXP selbst nicht darauf zurückgreift. Wir verwenden servergerenderte Ansichten als Basis und setzen React.js ein, um die Benutzeroberfläche gegebenenfalls zu verbessern.

Als Entwicklungsplattform wollen wir die Möglichkeiten jedoch nicht einschränken. Das Frontend ist vom Backend entkoppelt, so dass wir die Freiheit besitzen, die für den jeweiligen Bedarf am besten geeigneten Technologien auszuwählen. Dank des Potenzials für schnelle Entwicklungszeiten ist die Verwendung von Symfony UX-Komponenten eine interessante Option für Projekte, die auf Ibexa Commerce, Ibexa Experience und Ibexa Content aufbauen.

Laden von Bildern mit Symfony UX LazyImage

In den letzten Entwickler-Blogbeiträgen haben wir einen Einblick gegeben, wie die Ibexa-Website hinter den Kulissen funktioniert. Jetzt wollen wir mit dem Thema fortfahren und sehen, wie wir die Leistung und die Benutzerfreundlichkeit mit Lazy Loading optimieren können. Lazy Loading ist eine Technik, bei der Bilder nur dann geladen werden, wenn sie angezeigt werden. Dadurch kann das anfängliche Laden der Seite beschleunigt werden, da weniger Daten gesendet werden, um die erste Ansicht bereitzustellen.

Wie in dem Artikel über die Architektur der Ibexa-Website beschrieben, verwenden wir für die Frontend-Implementierung die standardmäßige serverseitige Rendering-Methode. Das bedeutet, dass wir die Twig-Templating-Engine nutzen, um Daten anzuzeigen, Links zu generieren und so weiter. Dies funktioniert gut mit der Symfony UX LazyImage-Komponente, die diese Arbeit für uns erledigt. Alles, was noch zu tun ist, ist die Einbindung in unsere Bildfeldvorlage. Schauen wir uns an, wie das gehen könnte:

Für die automatische Verwendung müssen wir Webpack Encore verwenden, um Frontend-Assets zu verwalten und das automatische Laden von JavaScript-Code zu ermöglichen. Um zu beginnen, muss die Stimulus Bridge, intervention/image und die LazyImage-Komponente installiert werden:

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

Nachdem wir die Installation und Konfiguration überprüft haben, können wir mit der Implementierung der LazyImage-Komponente in den Vorlagen fortfahren. Für unser Projekt haben wir eine erweiterte Fieldtype-Vorlage erstellt. Wir können die Standardvorlage nach Belieben ändern. Der Kürze halber beschränken wir uns auf die Zeile 450 der Standardvorlage für Inhaltsfelder:

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

Wie in der Dokumentation beschrieben, müssen wir das src-Attribut durch einen Platzhalter ersetzen und das data-hd-src-Attribut hinzufügen, um auf das nachgeladene Bild zu verweisen. Die oben geladene Intervention/Bildbibliothek ermöglicht es, einen weichgezeichneten Platzhalter aus dem Originalbild zu erzeugen.

Mit dem folgenden Twig-Snippet kann man dies von seinem Originalbild aus tun:

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

Dies können wir als Quelle für den Platzhalter und den Originalwert als den nachgeladenen Wert verwenden:

<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 %}
/>

Und das war's. Alle Repository-Bilder werden nun geladen, sobald sie in das Ansichtsfenster gelangen.

Fazit

Wie man sieht, kann man mit der Symfony UX-Technologie häufig verwendete Funktionen zu seinen Websites, Portalen und benutzerdefinierten Anwendungen hinzufügen. Die Initiative ist noch neu und entwickelt sich weiter, wobei weitere Funktionen wie Symfony UX Turbo hinzugefügt werden.

Es handelt sich jedoch weiterhin um eine optionale Technologie. Ibexa DXP kann weiterhin mit Ihren eigenen benutzerdefinierten Front-End-Workflows oder Webkomponenten verwendet werden. Ibexa DXP kann auch entkoppelt mit Frameworks wie Next.js über die REST- und GraphQL-APIs verwendet werden.

Das Symfony UX-Projekt ist definitiv etwas, das jeder Entwickler, der mit Symfony und Ibexa DXP arbeitet, im Auge behalten sollte.

Foto von Simone Impei auf Unsplash