MUG040: Lightning Talks

9 mei was er weer een MUG (Magento User Group), MUG040: Lightning Talks. Een bijeenkomst dat regelmatig gehouden wordt voor en door de Magento community. Dit keer werd het gehouden in Eindhoven en georganiseerd door ISAAC, een full service e-commerce bureau. Ze zitten toevallig om de hoek bij onze vestiging van Bluebird Day.

De MUG was dit keer anders ingericht. In plaats van de hele tijd luisteren naar een presentatie werden er lightning talks gegeven. Dit zijn korte presentaties van ca. 10-15 minuten waarna enkele minuten ruimte is voor discussie. Er kwamen 3 lightning talks aan bod en ook ik kreeg de eer om een lightning talk te geven over VueJS components in Magento. De setting was dit keer anders. Het was niet klassiek net zoals bij een event of zoals in een klaslokaal maar rondom een tafel zodat meer interactie en discussie met elkaar mogelijk was. We begonnen met het drinken van een biertje, het eten van pizza en een voorstelrondje zodat het ijs gebroken was. De lightning talks konden beginnen.

Lightning Talk #1: Redis Caching configuraties voor grote webshops – Bart Delvaux
Bart Delvaux, bekend van de Magento 2 Development Cookbook gaf in zijn talk informatie over de caching van Magento. Een belangrijk onderdeel van Magento om je webshop te optimaliseren en je webshop een performance boost te geven is caching. Caching is het tijdelijk opslaan van gegevens in het geheugen waardoor er niet opnieuw gegevens berekend of verstrekt moeten worden. Magento gebruikt cache geheugen om de webshop sneller aan gebruikers te laten zien. Soms zal de cache geheugen geleegd moeten worden om wijzigingen te zien.

Magento 2 heeft verschillende cache types. Configuration, Layout, Block HTML, DDL, Collections, Full Page Cache en nog veel meer. De configuration cache is de allerzwaarste cache. Dit zijn bijvoorbeeld de store config settings maar ook de xml bestanden in alle /etc folders. Tijdens de discussies kwam al snel naar voren dat je makkelijk met alleen de config cache enabled en de rest disabled kunt ontwikkelen.

Daarnaast kwam ook Full Page Caching ter sprake en dat je Redis of Varnish voor full page kon gebruiken. Hij legde het verschil uit tussen Redis en Varnish. Redis is een key-value database en kan gebruikt worden voor session storage en/of Full Page Cache. Varnish is een reverse proxy en wordt als Page Cache gebruikt. Varnish wordt vòòr de webserver geïnstalleerd. Wanneer er een pagina aangeroepen wordt, wordt deze door de originele server verwerkt en in de Varnish Cache opgeslagen. De volgende keer wanneer de pagina aangeroepen wordt wordt deze vanuit Varnish ingeladen. De configuratie van Varnish gaat via VCL. Tijdens de discussie kwam er aan bod dat Varnish niet altijd voor iedere pagina getoond hoeft te worden, dat je terug kan vallen op Redis en dat Redis ook erg snel is als Full Page Cache.

Lightning Talk #2: VueJS components in Magento – Ezra Botter
We zien steeds meer een verschuiving naar moderne JavaScript frameworks waaronder VueJS. VueJS is een vrij nieuwe techniek waarmee je front-end loskoppelt van de back-end. Via API-requests communiceer je met de back-end waardoor wij als front-end developers meer focus hebben op alleen de front-end en niet afhankelijk zijn van de back-end. Om al een beetje kennis te maken met deze technieken hebben we ervoor gekozen om dit als component te implementeren binnen Magento.

We hebben deze techniek toegepast voor een online tool voor een klant van ons. Het is een complexe en dynamische wizard waarbij de gebruiker een aantal stappen doorloopt voor als een onderdeel of product kapot is of verloren is geraakt. Aan de hand van de keuzes die de gebruiker maakt binnen de wizard wordt bepaald welk product of onderdeel benodigd is en of het onder garantie valt. Indien dit product onder garantie valt dan mag de gebruiker dit product gratis afrekenen. Zo niet, dan moet hij of zij daarvoor betalen.

Dit hebben we ontwikkeld met VueJS. Magento gebruikt requireJS om javascript te initializeren. Om VueJS in te laden in requireJS moeten we ze via webpack + babel compilen naar een AMD module. Hiervoor hebben we een Magento 2 module ontwikkeld die een vrij simpele VueJS component inlaadt in Magento 2 en als basis gebruikt kan worden. De module kun je hier vinden.

Lightning Talk #3: Magento Modules automatisch testen met Jenkins – Giel Berkens
Giel, de host van de MUG gaf zelf ook een lightning talk en deed dit in de vorm van een live demo en nam ons mee door de gitlab repository van het project waar hij mee bezig was, een Magento 2 betaalmodule die in de Magento marketplace beschikbaar is. Om in de Magento marketplace een module te plaatsen moet je aan veel eisen van Magento voldoen. Voordat je een module hierop kan plaatsen moet je je module valideren en verifiëren. Je moet voldoen aan de standaarden van Magento. Magento heeft een tool ontwikkeld om je Magento 2 package te valideren. De validate m2 package tool valideert je package bijvoorbeeld op basis van bestanden die aanwezig zijn. Daarnaast moet je aan de Magento EQP Coding Standard voldoen. EQP staat voor Extension Quality Program en bevat een set van regels voor de PHP_CodeSniffer tool. Het controleert automatisch je code bijv. raw sql queries, onnodig laden van collections, gevaarlijke functies, superglobals, code style issues etc.

Giel liet zien hoe het automatisch testen van deze module was opgezet. Hiervoor gebruikte hij Jenkins, Docksal en verschillende docker containers. Zodra je een module in de marketplace wil plaatsen moet je ook aangeven welke versies van Magento je ondersteunt. Indien je een versie van Magento ondersteunt, moet je ook de betreffende PHP versies ondersteunen. Je zult de module dus in verschillende omgevingen moeten testen. Met verschillende docker containers kun je dus deze verschillende omgevingen nabootsen en dus hierop automatisch laten testen.

Afsluiting
Na afloop van de lightning talks volgde nog een borrel. Je merkt dat in deze setting doordat iedereen elkaar al een keer gesproken heeft tijdens het voorstelrondje en tijdens de discussies dat de sfeer al wat losser was. Het was een leuke MUG waarbij je niet alleen maar hoefde te luisteren naar presentaties maar waar je ook zelf kon meedenken en discussie kon voeren. Dit werkt goed doordat je hierdoor kennis maakt met andere Magento developers en elkaars kennis kunt delen. Geslaagd dus!

Na afloop van de lightning talks volgde nog een borrel. Je merkt dat in deze setting doordat iedereen elkaar al een keer gesproken heeft tijdens het voorstelrondje en tijdens de discussies dat de sfeer al wat losser was. Het was een leuke MUG waarbij je niet alleen maar hoefde te luisteren naar presentaties maar waar je ook zelf kon meedenken en discussie kon voeren. Dit werkt goed doordat je hierdoor kennis maakt met andere Magento developers en elkaars kennis kunt delen. Geslaagd dus!