Magento PWA mit Vue Storefront

PWA steht für Progressive Web App.

Dabei handelt es sich um eine Website, die ähnlich performant ist wie eine Native App auf einem mobilen Endgerät (Smartphone, Tablet etc.). Man könnte hier auch von einem Hybrid sprechen. Das heißt, dass ein Großteil der Daten, die eigentlich erst beim Seitenwechsel geladen werden, schon von vornherein geladen sind − im Regelfall alle Daten außer Images, Videos etc. Die Vorteile für den User liegen auf der Hand: Sehr geringe Ladezeiten und keine Installation, um das App-Feeling genießen zu können.
Wir setzen bei der PWA Lösung auf Vue Storefront in Kombination mit einem Headless Magento Shop. Neben Vue Storefront gibt es z. B. noch das Magento PWA Studio, Deity, Ionic oder auch Spryker.

Headless Magento mit Vue Storefront?

Was ist Vue Storefront?

Vue Storefront ist eine Open Source Progressive Web App für E-Commerce Shops und aktuell wohl das größte und umfangreichste PWA-Framework.
Vue Storefront ist eine auf JavaScript basierende Frontend Lösung, die aktuell sogar Google als Seo-freundlich einstuft. Wenn einmal die Architektur und der Core BEreich von VUe STorefront verstanden ist, können Vue Storefront Themes, Vue Storefront Extensions und Kundenwünsche als Vues Modul entwickelt werden.
Vue Storefront selbst wirbt damit, dass Einkäufe im Webshop mit dieser Lösung auch Offline-Betrieb möglich sind. der Kaufabschluss wird dann vollzogen, wenn das mobile Endgerät wieder mit dem Internet verbunden ist. Alternativ kann das Smartphone als Barcode Scanner verwendet werden, um so direkte Produkte dem Warenkorb hinzuzufügen - offline.
Voice-Commerce steckt noch in den Kinderschuhen, auch hier wird es danke des modernen Tech-Stack von Vue Storefront Lösungen geben, dieses Feature zu integrieren.

Was ist Headless Magento?

Dank neuer Technologien entfachen sich die Möglichkeiten im E-Commerce. Headless E-Commerce ist ein recht neuer Ansatz, der mit losgelösten Frontend-Frameworks so richtig ins Rollen kam. Die Trennung von Backend und Frontend macht eine getrennte Bearbeitung beider Bereiche möglich – so können im Backend Änderungen vorgenommen werden, ohne das Frontend anzupassen.
Gerade im Hinblick auf Magento ist das äußerst praktisch, weil Updates so „nur noch“ das Backend betreffen. Doch bevor jetzt der Eindruck entsteht, dass durch den Headless Ansatz rudimentäre Magento Skills ausreichen, um das gesamte System zu beherrschen – weit gefehlt! Zwar ist für gewisse Frameworks kein Detailwissen mehr erforderlich, aber das notwenige Know-how wird lediglich in andere Ebenen verlagert.
Wir konzentrieren uns bei unserer Arbeit auf die Magento Web-API und das Zusammenspiel mit Drittsystemen.

Starten Sie jetzt ganz einfach mit Vue Storefront.

  • Shop-Frontend des bestehenden Magento Shops ersetzen
  • Einfaches Designlayout in Kombination mit den Vue Storefront
  • Grundfunktionen bei Produktbild-Slidern, Anmelde-Prozess etc.
  • Simple Products mit Standardfunktionen eines Magento Shops
  • Vue Storefront Checkout mit vorhandenen Zahlarten
  • Responsives Verhalten gemäß Vue Storefront
  • Docker basierte Entwicklungsinfrastruktur

Ist Vue Storefront die richtige Lösung für Sie?

Prinzipiell ja, wenn Sie eine zukunftssichere E-Commerce-Lösung möchten. Denn der Anteil derer, die künftig über mobile Endgeräte einkaufen, wird tendenziell weiter steigen. Insofern kommen Shop-Betreiber nicht um eine PWA-Lösung herum. Ebenso Shop-Inhaber mit professionellem Tech-Support, die durch eine Performance-Steigerung spürbar höhere Umsätze erzielen möchten.
Vue Storefront ist keine eigene Shop-Instanz, die unabhängig funktioniert. Wie der Name schon erahnen lässt, handelt es sich dabei lediglich um ein Frontend (technisch gibt es natürlich auch ein Backend). Produkte, Kategorien und CMS-Content werden via API aus dem regulären Shop „im Hintergrund“ gezogen. Er dient quasi als eine Art Datenspeicher, aus dem sich Vue Storefront bedient. Das Frontend dieses Stores wird in diesem Fall also nicht von uns genutzt.

Die Kosten sind individuell. Entscheidend sind ...

Wir gestalten Ihre Vue Storefront Lösung exakt nach Ihren Wünschen. Deshalb sind die Gesamtkosten abhängig von
  • der Komplexität der Produkte
  • den Spezial-Effekten im Design
  • den Extras rund um den Shop
  • persönlichen Individualisierungen

Die Perspektive bringt Erkenntnis

Was verbessern wir mit VueStorefront?

Vorteile von Vue Storefront

FÜr Sie als Shopbetreiber oder Shopverantwortlicher lässt sich bares Geld sparen: Kein lästiges Nachjustieren mehr wegen eines Google-PageSpeed-Updates. So lassen sich Kapazitäten im technischen Bereich reduzieren.
Mehr Umsatz - ein Ziel eines jeden Online-Shops. Mit Vue Storefront lassen die Kopfschmerzen aufgrund von zu langen Ladezeiten nach, die Bounce-Rates werden weniger und Sie kommen Ihrem Ziel - mehr Umsatz näher. Zudem sind teure App-Entwicklungen nicht mehr notwendig, da die PWA Lösung wie eine APP fungiert.
Auch der User wird es Ihnen danken, eine positive User-Experience verringert ebenso die Bounce-Raters.
Ihre Kunden werden die kaum spürbaren Ladezeiten lieben - wer wartet schon gerne lange. Die fehlende flächenddeckende Netzabdeckung kann bei einer Vue Storefront PWA Lösung nicht mehr zu Kaufabbrüchen führen, da offline die Nutzung und der Einkauf möglich sind.
Zudem ist das responsive Verhalten auf sämtlichen moblie Devices in der Regel gut nutzbar. Anders als bei herkömmlichem responsive Design sind nahezu alle Smartphone Größen abgedeckt.
Und die Entwickler profitieren von der agilen Arbeitsweise der Core Entwickler sowie der schnellwachsenden weltweiten Community. Sobald der moderne Tech-Stack tiefgründig verstanden wurde, wird jeder klassische Fehltritt im Bereich Performance verziehen. Responsive Design von der ersten Codezeile an führt zu einem schnell vorzeigbarem Ergebnis.

Welche Herausforderungen gibt es mit Vue Storefront?

Die Gesamtkosten für die initiale Entwicklung einer Vue Storefront Applikation werden zunächst nicht kleiner als ein rudimentäre Magneto 2 Shop mit klassischen Frontend. Denn für zwei „Instanzen“ fallen Unterhaltungs- und Entwicklungskosten an. Ist für die Zukunft neben dem klassischen Online-Shop ein mobile App geplant, rechnet es sich höchstwahrscheinlich trotzdem. Zumal in der stetigen Pflege dann nur ein System zu warten ist und nicht Online-Shop und separate App.
Für den User gibt es keinerlei Nachteile – nur Vorteile.
Für den Entwickler ist der massive Tech-Stack anfangs sehr umfangreich und daher nichts für Anfänger. Unabhängig vom nackten Coding-Skill ist hier noch jede Menge Knowledge hinsichtlich des Unterbaus gefragt. Die genutzten Frameworks, Package-Manager und Software-Pakete sind untereinander nicht zwingend problemlos kompatibel.
webvisum layer Logo

Wir realisieren Ihren Magento Shop mit Vue Storefront !

Wir sind offizieller Vue Storefront Partner, haben 2 zertifizierte Vue Storefront sowie zahlreiche zertifizierte Magento Entwickler im Team, verfügen über Vue Storefront Projekt-Expertise und sind seit über 7 Jahren auf Magento spezialisiert.

Erste Erfahrungen mit Vue Storefront

2018 haben wir erstmalig mit

Vue Storefront 1.5 gearbeitet

Wobei das Wort „gearbeitet“ eigentlich nicht ausreicht, um unsere damaligen Erfahrungen auch nur annähernd zu beschreiben. Auch wenn das eigentliche Aufsetzen von 1.5 sehr schnell von der Hand ging, beinhaltete diese Version leider noch extrem viele Probleme – z. B. in den Bereichen CMS-Import und Routing. 1.6 sollte diese Probleme lösen.
Ob 1.6 tatsächlich diese Probleme gelöst hat, können wir abschließend gar nicht so genau sagen. Denn alleine das Update von 1.5 auf 1.6 hat uns soviel Nerven, Schweiß, Zeit und Fluch-Attacken gekostet, dass wir unseren Kunden Vue Storefront erst einmal nicht angeboten haben. Glücklicherweise konnten wir diese Erfahrungen bei einem internen Lern-Projekt machen.

2019: Wir geben Vue Storefront eine 2. Chance

Mit der Version Vue Storefront 1.8 haben wir das Frontend für einen Gastronomiegeräte-Shop programmiert. Das Framework überzeugt design- oder technikaffine Entscheider gleichermaßen. Dank der Trennung von Front- und Backend kann die Umstellung vom Magento 1 Backend auf Magento 2 ohne Änderungen am Frontend erfolgen.
Auch mit Vue Storefront 1.8 lief nicht alles so, wie wir uns das gewünscht hätten – aber von einem derart jungen Framework mit aufwendigem Tech-Stack darf man das auch nicht erwarten. Die Weiterentwicklung von 1.5 bzw. 1.6 auf 1.8 kommt einem Quantensprung gleich und wir können heute guten Gewissens unseren Kunden Vue Storefront empfehlen.
Weil wir von dem Produkt voll und ganz überzeugt sind, haben wir heute gleich zwei Vue Storefront Entwickler in unserem Team!

Technisches Hintergrundwissen

zu Vue Storefront

Welche Frameworks werden bei Vue Storefront genutzt? Divante, die Entwickler von Vue Storefront, haben sich nicht lumpen lassen und bei Ihrer Lösung jede Menge Technik, Tools und Frameworks eingebaut, die notwendig sind, um Vue Storefront am Laufen zu halten.
  • Elasticsearch
  • Bower
  • Webpack
  • Yarn
  • Browserify
  • Node
  • Vue
Zusätzlich sind je nach Infrastruktur und Frontend-Umsetzung weitreichende Kenntnisse von Docker und Imagick äußerst vorteilhaft. Besser noch ein ordentlicher Tech-Stack − was jedoch den Umgang mit Vue Storefront für Einsteiger recht schwierig macht.
  • Datenimport von Magento 1 und 2
  • Magento konfigurieren für Vue Storefront
  • ElasticSearch mit Magento und Vue Storefront
  • Indivudelle Anpassungen
  • Magento / Vue Storefront API

Sie möchten eine PWA Lösung umsetzen?

Vue Storefront Anfrage

Sie möchten Ihr Magento Frontend durch eine PWA Lösung ersetzen? Nutzen Sie die online-Anfrage und wir melden uns schnellstmöglich bei Ihnen.