Das Open Source Projekt Vue Storefront erobert die Herzen der Entwickler im Sturm. Was sich dahinter verbirgt: Vue Storefront ist eine headless, plattformunabhängige eCommerce Progressive Web App (PWA), basierend auf Vue.js Framework. Alles klar? Das dachten wir uns. Daher erklären wir euch, was das im Einzelnen bedeutet und wie unsere Praxis-Erfahrungen aussehen.
Headless – Kopflos, aber auf die gute Art
Bei Vue-Storefront ist das Backend des Shops vom Frontend getrennt. Die beiden kommunizieren über eine API-Schnittstelle und tauschen darüber Informationen aus. Der Vorteil: Dadurch kann eine beliebige Anzahl unterschiedlicher Frontends angeschlossen werden. Das bedeutet Vue Storefront kann eine Frontend-PWA für verschiedene Shopsysteme wie Magento, Shopify, BigCommerce, WooCommerce usw. sein. So lässt sich das Backend jederzeit unabhängig vom Frontend ändern.
Plattformunabhängig
Das Datenformat der vue-storefront-api ist für alle Plattformen dieselbe. Das bedeutet, es ist ganz egal, welches Backend verwendet wird, das Frontend bleibt immer gleich. So kann bspw. von Magento 1 zu Magento 2 gewechselt werden, ohne das Frontend zu verändern.
Progressive Web App (PWA)
Eine Progressive Web App ist sozusagen die Verschmelzung einer responsiven Website und einer mobilen App, die ganz einfach über eine URL aufgerufen wird. Progressive Web Apps kommen mit Funktionen, die zuvor nur Native Apps drauf hatten: Push-Benachrichtigungen oder Offline-Verfügbarkeit. Das können Web Apps zwar auch, aber sie sind langsamer, haben weniger Funktionen und werden auch weniger genutzt als Mobile Apps. Progressive Web Apps sind auf Mobilgeräten deutlich schneller als Web Apps und sie können sowohl auf Desktop- als auch auf Mobil-Plattformen eingesetzt werden.
Vue.js Framework
Ein kleiner Hinweis darauf, dass Vue Storefront auf dem Vue.js Framework entwickelt wurde, versteckt sich bereits im Namen. Vue.js ist bekannt für eine gute Performance und eine sehr kompakte Größe. Für Entwickler mit HTML-/JS-/CSS-Kenntnissen ist der Einstieg ins Vue.js Framework einfach.
Wow! Welches Wunder entsteht, wenn man das alles in einen Topf wirft?
Wer sich ein wenig mit Suchmaschinenoptimierung beschäftigt, wird bei den Begriffen Schnelligkeit, Benutzerfreundlichkeit und Mobile First leuchtende Augen bekommen. Ein Riesenvorteil ist die Flexibilität und Unabhängigkeit vom Backend, da die Entwicklung der Anforderungen ans Frontend viel schneller voranschreitet als die Anforderungen ans Backend. Die Vorteile zusammengefasst:
- Schnelle Ladezeit
- Mobile First Ansatz
- Oflline Modus
Grenzenlose Möglichkeiten beim Theming und Anpassungen
Soweit die Theorie! Wie sieht es in der Praxis aus?
Es bedarf auch bei sehr erfahrenen Entwicklern einer etwas längere Einarbeitungszeit, da es sich um eine recht komplexe Lösung handelt. Es gibt zwar erste frontendseitige Module zur Anbindung von Zahlungsmethoden wie Klarna oder Paypal für Magento 1.9 von der Community, aber da dort die Zahlung im Frontend und nicht im Backend ausgelöst wird, waren sie für uns zu unsicher und daher nicht brauchbar. Über den Zeitraum in dem Vue Storefront bei uns im Einsatz ist, wurden viele neue Features entwickelt. Mit einer stetig wachsenden Community und der steigenden Anzahl an Shops, werden sich gemeinsame Probleme herausstellen und dafür Lösungen entwickelt werden. Leider ist die Dokumentation teilweise etwas dürftig, was die Anpassung schwierig gestaltet.
Du möchtest mehr erfahren oder brauchst Unterstützung bei deinem eCommerce Projekt? Unsere erfahrenen Entwickler sind immer heiß auf neue Shop-Projekte!
Geschrieben von: Julia
