Kürzlich fand unser erstes Shopware Meetup statt, zu dem wir Gäste aus verschiedenen Ecken Deutschlands in unserem Büro in Hannover begrüßen durften. Nachdem sich auch bei uns aufgrund der Pandemie lange Zeit vieles online abspielen musste, haben wir uns gefreut, dass auch vor Ort wieder etwas los war.
Spannender Austausch zum Thema Shopware Headless
Das Meetup fand im Rahmen des Themas “Shopware Headless” statt. Nach einer kurzen Begrüßung und dem ersten Austausch ging es auch schon mit unserem Vortrag los.
In diesem stellten unsere Entwickler Tim und Lukas die Entstehung unseres Produktes hubble PWA sowie Herausforderungen und Lösungen rund um das Thema Headless Commerce vor. Nachdem die letzten Fragen geklärt waren, gab es noch einen lockeren Austausch bei leckerem Essen.
Hier einige Impressionen des Abends:
Die kostenlosen Meetups werden “von der Community für die Community” zum gemeinsamen Austausch, Diskutieren und Netzwerken veranstaltet - egal ob Sie Shopbetreibende, Agentur oder sonstige Interessierte sind.
Wenn auch Sie ein Shopware Meetup organisieren oder daran teilnehmen möchten, finden Sie hier weitere Informationen:
https://www.shopware.com/de/meetups/
Headless Commerce mit hubble PWA
Mobile Commerce spielt im E-Commerce eine immer wichtigere Rolle. Doch damit steigen auch die Anforderungen der User:innen: Schnellere Ladezeiten, optimale Usability und ein einzigartiges Design - und das soll natürlich auch für die Entwickler:innen möglichst einfach und effektiv umsetzbar sein.
Die meisten Plattformen können diese Anforderungen nicht erfüllen. Deshalb haben wir mit unserer Progressive Web App hubble eine innovative Frontend-Lösung entwickelt, die unabhängig von Ihrem Shopsystem ein individuelles und leistungsfähiges Frontend bietet.
Entscheidend ist dabei der "headless approach". Die Entkopplung von Frontend und Backend ermöglicht eine deutlich höhere Flexibilität sowie die Integration und Kombination verschiedener technischer Komponenten, die über Schnittstellen (API's) angebunden werden können.
Dazu verwenden wir mit dem Vue-basierten Nuxt.js ein Open-Source-Framework, das speziell für den Bau von Schnittstellen entwickelt wurde.
Durch die Verwendung von wiederverwendbaren Code-Schnipseln in der Composition API, sogenannten Composables, können einzelne Code-Teile für unterschiedliche Projekte auf allen E-Commerce-Plattformen eingesetzt werden.
Das Data Mapping ermöglicht es, die einzelnen Codeteile von ihrem “Original” in eine einheitliche Datenstruktur zu übersetzen, die dann auf alle Shopsysteme anwendbar ist. Somit muss die PWA nicht für jede Plattform einzeln angepasst werden, sondern funktioniert universell.
Top Performance
Ein schnelles Frontend erfordert auch eine schnelle API. Hubble PWA verwendet die Shopware API, die nicht immer die gewünschte Geschwindigkeit bieten kann. Da die Performance eine entscheidende Rolle für die User Experience spielt, nutzt hubble PWA einige Methoden, um diese zu optimieren.
1. Varnish
Der Zugriff auf eine Website hat eine Vielzahl einzelner Anfragen an den jeweiligen Webserver zur Folge. Ein hoher Traffic führt dazu, dass die Webserver viel Zeit benötigen, um die Anfragen zu bearbeiten. Dies wirkt sich negativ auf die Performance der Website aus.
Hier kommt Varnish ins Spiel. Varnish ist ein Reverse Proxy, der sich quasi als Zwischenspeicher zwischen Webserver und Client schaltet. Hier werden Daten, z.B. statische Daten, die keine hohe Rechenleistung benötigen, zwischengespeichert, sodass sich der Webserver auf die Verarbeitung rechenintensiverer Daten konzentrieren kann. Varnish entlastet also den Webserver, sodass die Seite auch bei hohem Traffic schnell geladen wird.
2. Invalidierung
Invalidierung beschreibt das gezielte Löschen von gecachten Inhalten, in unserem Fall bei Varnish. Das ist dann relevant, wenn Änderungen z.B. am Preis vorgenommen werden.
Ohne die Invalidierung würde die Änderung im Frontend nicht angezeigt werden. Da nur das geänderte Produkt neu geladen werden soll, um die Ladezeit zu minimieren, ist eine gezielte Invalidierung nötig.
3. Cache Warmup
Unter Cache Warmup versteht man das Vorladen einer einzelnen Seite. Gerade bei größeren Webseiten mit vielen Produkten und Seiten kommt es vermehrt zu langsamen Ladezeiten der Webseite, wenn diese nicht vorher gecached werden. Wir verwenden hierfür den CacheWarmer, der bereits in Shopware integriert ist.
Mehr zu hubble PWA
Sie wollen mehr über die Möglichkeiten unserer Progressive Web App erfahren? Weitere Informationen zu hubble PWA finden Sie hier: https://www.hubblecommerce.io/de