Klassenraum-Feeling für einen Tag — Vue Storefront Training bei Sitewards
Am 26.11. entstand im Sitewards Office kurzerhand ein Klassenzimmer. Der Grund dafür war ein Training zum beliebten Shop-Framework Vue Storefront. Das Training lohnte sich und ist sehr zu empfehlen. Vue Storefront ist ein tolles Framework mit spannenden Aussichten, darüber sind sich nun alle einig. Hier eine Übersicht.
Was ist Vue Storefront?
Es handelt sich hierbei um eine, auf vuejs basierende, PWA Storefront. Das Framework ermöglicht u.a. ein und dasselbe Shop-Frontend für beliebige Headless Shop-Systeme zu nutzen. Das Shop-System ist also nicht mehr direkt mit dem Frontend verbunden. Mehr darüber könnt ihr unter anderem auf der Vue Storefront Website erfahren.
Vorbereitung auf das Training
In Vorbereitung auf das Training haben wir uns einen Improvement Day lang Zeit genommen. Der Improvment Day findet jeden dritten Freitag im Monat statt, ein Tag an dem wir uns frei mit neuen Technologien und Verbesserungen beschäftigen und somit perfekt um das Training vorzubereiten. Durch Einreichung von Fragen und spezifischer Themen gab man uns die Möglichkeit die Agenda des Trainings aktiv zu beeinflussen. Schon vor dem besagten Improvement Day sammelten wir also Fragen und Themen, die uns besonders interessierten.
Am Improvement Day selbst galt unser besonderes Augenmerk dem Aufsetzen der Entwicklungsumgebung. Es sollten alle Teilnehmer auf dem selben Stand in das Training starten können. Ziel war es mit Hilfe von Docker und anderen Tools die Entwicklungsumgebung, mit nur wenigen Befehlen, aufzusetzen. Nach kurzer Wartezeit sollte sowohl die Vue Storefront als auch Magento 2, mit Beispieldaten, aufrufbar sind. Einfach war das sicherlich nicht, doch durch den Einsatz unserer Docker- und Magento-Spezialisten haben wir es geschafft. Wir haben eine Boilerplate geschaffen, die uns sowohl beim Training als auch bei späteren Projekten sehr nützlich sein wird.
Das Training
Wenn am Anfang eines Tainings erstmal der Wissenstand abgefragt wird, kann man sich fast sicher sein: das Training wird gut. Kacper Wierzbicki, unser Trainer, startete daraufhin mit einem Überblick über das Vue Storefront Framework. Hierbei ging es vornehmlich darum, was das Framework ist und was es nicht ist. Wir bekamen einen Ausblick darüber, wie es weiterentwickelt wird und eine Einblick auf welchen Grundlagen es basiert. Allein dies war schon sehr hilfreich, um manche Teile des Puzzles zusammen zu fügen.
Nachdem Kacper die Agenda vorgestellt hat, ging es gleich mit der Einarbeitung in das vuejs Framework, auf dem die Vue Storefront basiert, los. Es musste erst einmal Basiswissen über vuejs geschaffen werden. Kacper erklärte diverse Paradigmen des Frameworks, sowie die Erweiterung von vuejs mit Hilfe von vuex. Vuex wird zum Managen des Frontend-Status benötigt. Das Ganze wurde mithilfe der gut ausgearbeiteten Slides und etwas “live coding” wirklich gut erklärt. Zudem hatte Kacper einige wirklich hilfreiche Extensions empfohlen, um die Arbeit mit vuejs zu vereinfachen. Darunter die Chrome Erweiterung vue-devtools.
Trotz unserer Vorbereitung führte uns Kacper durch das System-Setup. Er erklärte uns insbesondere das Zusammenspiel der verschiedenen Komponenten und für was diese gut sind. Auch die Integration von Magento 2 sind wir nochmal durchgegangen und konnten neue Erkenntnisse erlangen. Leider konnten spezifische Fragen zu unseren Problemen diesbezüglich nicht geklärt werden. Kacper brachte uns aber nach dem Training noch mit Ansprechpartnern in Kontakt, mit denen wir diese Fragen erörtern können.
Der für mich spannendste Teil war das hinzufügen eines neuen Plugins in der Storefront und ein kleiner Exkurs in das Überschreiben und Erweitern von Systemkomponenten. Das Plugin fügte eine neue Seite mit einem Phrasengenerator hinzu. Es war toll zu sehen wie einfach Modifikationen im Frontend gemacht werden und Systemkomponenten angepasst werden können. Dazu integrierten wir auch ein CSS Framework und veränderten ein wenige das Styling der Startseite. Dieser Abschnitt war leider relativ schnell abgehandelt, ich hätte mir hier noch etwas mehr Inhalt gewünscht. Insbesondere die Anpassung von Shop-Komponenten wäre hier eine lohnende Ergänzung gewesen. Das Tolle an Vue Storefront ist allerdings auch, dass Änderungen größtenteils übernommen werden ohne dass man das System neu starten/compilieren muss. Das beschleunigt die Entwicklung mit dem Framework ungemein und macht es einfach ins kalte Wasser zu springen.
Wir haben in dem Training wirklich vieles angeschnitten und in einer guten Detailtiefe abgehandelt. Es war wirklich sehr umfassend. Zum Ende des Trainings wurden dann unsere vorbereiteten Fragen geklärt und wir bekamen die Chance unseren Trainer mit neuen Fragen zu löchern.
Zusammenfassung
Ein prima Trainer. Ein tolles, empfehlenswertes Training, welches an unsere Anforderungen und unseren Kenntnisstand angepasst war. Es vermittelte Basiswissen und einen Überblick, sowohl über das System selbst, als auch über die benutzen Technologien. Der Detaileinblick über das Hinzufügen und Verändern von Komponenten hätte etwas länger und spezifischer ausfallen können, war aber wirklich gut und sehr verständlich vorgetragen. Das Aufsetzen der Vue Storefront und des Magento-Systems, hätte im Vorfeld passieren können. Im Training selbst könnte somit die Detailtiefe, in diesem Bereich, verbessert werden. Das Training vermittelte, in einer sehr angenehmen Atmosphäre, geballtes Wissen.
Über Sitewards
Sitewards wurde mit dem Ziel gegründet, Unternehmen in ihrer digitalen Marktbearbeitung zu unterstützen und gemeinsam digitale Erfolgsgeschichten zu schreiben. Als leidenschaftlicher Antreiber des digitalen Wandels verfügt Sitewards über mehr als 20 Jahre Erfahrung aus über 300 Kundenprojekten. Das Portfolio umfasst die Bereiche Strategieberatung, User Experience Design sowie Softwareentwicklung und -betrieb. Sitewards ist offizieller Vue Storefront Partner
