Am 07.02. und 08.02.2017 fand in der IT-Hochburg Karlsruhe bei Flagbit ein Workshop zu Lizards & Pumpkins statt. Das Ziel war es, Lizards & Pumpkins in unseren Angular Frontend Prototyp einzubauen. Das heißt, anstatt dass wir direkt mit der API von Magento 2 sprechen, holen wir uns die Daten über Lizards & Pumpkins.
Am ersten Tag des Workshops brachten wir alle Teilnehmer auf den gleichen Stand, bedeutet erstmal wurde die grundsätzliche Funktionsweise von Lizards & Pumpkins erklärt. Danach wurden die folgenden ToDo’s definiert:
- Frontend API-Requests auf Lizards & Pumpkins umstellen
- XML generieren für Category Export zu Lizards & Pumpkins
- Neuen API-Endpoint in Lizards & Pumpkins erstellen um Content-Blöcke abzurufen
Vorweg – wir haben nicht daran geglaubt, dass wir soweit kommen, aber es wurde noch besser: Integration von Lizards & Pumpkins in unser AWS-Setup für unseren Kunden. Richtig, wir haben alle 4 ToDo’s gemeistert! Jetzt aber zu den Details der einzelnen ToDo’s.
Viel Spaß beim Lesen.
Grundsätzliches zu Lizards & Pumpkins
Es gibt E-Commerce Projekte, welche aufgrund von zu vielem Traffic irgendwann an die Grenzen einer Software stoßen. In unserem Fall die OpenSource E-Commerce Software Magento. Lizards & Pumpkins kann hier helfen, weil es ein PHP-Framework ist, welches den Catalog, also die Kategorie-Seiten, Produkt-Seiten, Suche und Filter-Navigation ersetzt. Was Lizards & Pumpkins sehr geschickt macht, ist, dass es auf Einfachheit setzt. Anstelle von komplexen Beziehungen in Datenbanken gibt es nur einen Key und einen Value. Lizards & Pumpkins verwendet im „Datenpool“ eine Suche und einen Key/Value Storage. Dieser kann sogar einfach das File-System sein (schön zum entwickeln/debuggen). Wir Fragen also eine bestimmte URL bei Lizards & Pumpkins an, die Suchmaschine sucht dann für uns die notwendigen Key’s zusammen und der Key/Value Storage liefert uns diese in einem Rutsch zurück. Unsere Tests haben ergeben, dass die Magento 2 API bei einer Kategorie-Seite im Durchschnitt ca. 1,5 Sekunden braucht (in unserer Entwicklungsumgebung), während Lizards & Pumpkins ebenfalls für eine Kategorie-Seite im Durchschnitt 25 Millisekunden gebraucht hat (getetet in der DEV-Box von L&P, ohne Netzwerklatence).
Warum tun wir das Ganze?
Unser Ziel ist es, für unsere Kunden ein unabhängiges Frontend zu bauen. Bedeutet das Frontend fragt immer bei einer API nach den Daten. Die Daten sind vorgeneriert, sodass unser Frontend keine weitere Datentransformation vornehmen muss. Die Daten werden asynchron vom Backend importiert. Dadurch können wir auf ein Caching im Frontend verzichten. Es wird so eine strikte Trennung zwischen Frontend und Backend erreicht. Durch das unabhängige Frontend können wir für unsere Kunden möglichst viele Progressive Web App Features umsetzen/nutzen.
Frontend API-Requests auf Lizards & Pumpkins umstellen
Unser Angular Prototyp Frontend konnte schon eine Kategorie-Seite und Produkt-Seite darstellen. Allerdings hat unser Prototyp immer mit der Magento2 API telefoniert. Wir wollten also wissen, wie viel schneller unser Frontend wird, wenn wir nun anstelle der Magento2 API auf Lizards & Pumpkins setzen. Erstaunlicherweise konnten wir diese Änderung sehr schnell umsetzen. Es gab eigentlich nur zwei Keys, welche in der JSON-Struktur angepasst werden mussten, damit die Requests wie im Vorfeld auch funktionierten!
XML generieren für Category Export zu Lizards & Pumpkins
Leider gibt es von Magento 2 zu Lizards and Pumpkins noch keinen Connector. Allerdings haben wir bei anderen Magento 2 Projekten schon sehr viele Integrationen mit unserer Magento Integration Plattform umgesetzt. Also lag es für uns Nahe, dass wir unser MIP Magento 2 Modul verwenden, um das passende XML zu generieren. In der L&P Devbox gibt es zwei Beispiel XML-Datensätze, welche wir uns kurzerhand angeschaut haben und uns dann dafür entschieden haben, erstmal den Category Export nach L&P zu realisieren. Da MIP sich die Daten auch über die Magento 2 API intern holt und danach per XSL in das passende XML transformiert, musste ein Task und ein XSL-Template für den Export geschrieben werden. Diese Aufgabe konnten wir nach einem Tag abschließen und haben dabei noch wichtige neue Features für MIP identifiziert, wie zum Beispiel Tasks automatisch auszuführen, nachdem in Magento 2 ein bestimmtes Event geworfen wurde.
Neuen API-Endpoint in Lizards & Pumpkins erstellen um Content-Blöcke abzurufen
Für unsere Backend-Entwickler stellte der Workshop die ideale Gelegenheit da, um sich mit der funktionsweise von Lizards & Pumpkins vertraut zu machen. Als Zielsetzung für den Workshop galt es, einen neuen API-Endpoint umzusetzen, der den Zugriff auf Content-Blöcke mit beliebigem Inhalt über L&P ermöglicht. Dabei zeigte sich der Vorteil von L&P, nicht an ein bestimmtes Datenformat gebunden zu sein und dass die Blöcke nach Belieben mit HTML, JSON oder XML befüllt werden können. In der Praxis zeigten sich die Unterschiede zu der bekannten Arbeitsweise mit Magento, bei der für eine solche Aufgabe umfangreiche Konfiguration und vergleichsweise komplexe Strukturen erforderlich wären. L&P setzt auch im Backend alles daran, eine größtmögliche Effizienz zu garantieren und verzichtet dafür z.B. auch auf eine mächtige Dependency Injection, wie sie von Magento geboten wird, sondern setzt auf eine einfache DI via Factories. Worauf hingegen nicht verzichtet wird, sind umfassende Unit-Tests, mit denen Dank TDD stets garantiert werden kann, dass die eigene Anwendung fehlerfrei läuft. Der so umgesetzte API-Call kann genutzt werden, um verschiedenste statische Daten von Magento an das Angular Frontend weiter zu reichen und wird dank der vielfältigen Einsatzmöglichkeiten auch bald ein Teil der regulären API von Lizards & Pumpkins sein.
Integration von Lizards & Pumpkins in unser AWS-Setup
Die Integration in das bestehende AWS-Setup hat uns ca. einen weiteren halben Tag gekostet. Für die Suche von L&P haben wir ElasticSearch verwendet und für den Key/Value-Storage ElasticCache (Redis)
Vielen Dank an
Fabian Blechschmidt, Thomas Lohner und Tim Bežašvíli
für den tollen Workshop!
(Titelbild: Naturesauraphoto / Shutterstock)
0 Kommentare