De allereerste MUG076 in Breda was een succes!
Op donderdag 21 november werd de allereerste MUG076 Breda gehost in de nieuwe kantine bij Bluebird Day. Een Magento User Group (MUG) is een meetup gehouden voor en door liefhebbers of ontwikkelaars van Magento. Onze frontend developers Tim Janssen en Ezra Botter mochten deze avond hosten. De avond stond in het teken van Progressive Web Apps - of PWA’s - en wat zij voor e-commerce betekenen.
PWA’s zijn een relatief nieuwe technologie en voor veel mensen nog een vaag begrip. Tijdens deze MUG wilden Tim en Ezra daar verandering in brengen. De avond werd ingeluiden met bier en pizza en een welkomstwoord, waarna vervolgens de eerste spreker van start kon gaan.
Wat zijn PWA’s en wat betekenen ze voor Magento?
Door Mario Ruis
Onze eerste spreker was Mario Ruis, backend developer bij Bluebird Day. Afgelopen jaar heeft hij een round-table sessie gegeven op het evenement E-commerce Live! over Progressive Web Apps. Deze avond stond hij op het podium om te presenteren wat PWA's zijn en wat ze betekenen voor Magento. Want het biedt voordelen! Ze bieden het gemak van een native app via de browser met de look & feel van een echte app. Klanten kunnen ze installeren op hun mobiel met behoud van features zoals push notificaties. Daarnaast hebben PWA's een zeer goede performance en zijn ze ten opzichte van native apps wel zoekmachine vriendelijk doordat je ze via een url kunt benaderen. In zijn presentatie nam Mario de webshop van Flipkart als voorbeeld om te laten zien hoe je zo'n PWA als "app" kunt gebruiken op je telefoon.
Daarnaast liet hij zien wat er benodigd was voor een PWA. Je hebt een https-verbinding nodig met een geldig SSL-certificaat zodat de PWA volledig veilig is. Vervolgens heb je een web app manifest nodig. Dit zijn configuraties waarmee je bijvoorbeeld de iconen en de kleuren van je PWA kunt bepalen. Tenslotte heb je een service worker nodig. Dit is een script dat op de achtergrond draait waarmee je de functionaliteiten van het apparaat kunt gebruiken zoals push notificaties.
Naast het SEO-gebruiksvriendelijke karakter van een PWA, is een ander voordeel dat het goedkoper is dan een native app. Dit komt doordat je platform onafhankelijk bent met een PWA. Nadelen zijn echter wel dat het een nieuwe techniek is en dat de functionaliteiten van het apparaat afhankelijk zijn van het apparaat zelf en de browser. Op een Android in Google Chrome zijn er bijvoorbeeld meer features beschikbaar dan bijvoorbeeld op een iPhone in Safari.
“PWA’s zijn een geweldige toevoeging voor webwinkeliers”
PWA’s zijn naast een geweldige manier om kosten te besparen bij het ontwikkelen van een online platform in combinatie met een native app, ook een geweldige toevoeging voor webwinkeliers. Zo is een van de grote technische voordelen dat je onafhankelijk van de frontend laag je data kunt beheren. Zo kunnen webwinkeliers in de toekomst kiezen om Magento te gebruiken waar het goed voor is: catalogusbeheer, de checkout, promoties, enzovoorts. Webwinkeliers zouden zelfs een eigen Content Management Systeem kunnen uitkiezen voor het contentbeheer en deze aan de PWA koppelen.
Daarnaast hoeft een webwinkelier dit niet in de eerste fase van een project te kiezen. Externe koppelingen kunnen gaandeweg worden toegevoegd zonder dat het invloed heeft op de frontend laag. We verwachten dan ook dat Magento vaker ingezet gaat worden voor haar sterke e-commerce kanten. Onderdelen die niet de focus zijn van het Magento pakket kunnen worden geoutsourced naar third-party software naar de wens van de klant. Denk hierbij aan PIMCore of Contentful.
Case Study: Een PWA met Magento en VueJS from scratch.
Door Ezra Botter
De volgende talk was van Ezra Botter. Hij liet zien hoe hij met zijn team een PWA from scratch heeft gemaakt met Magento tijdens een innovatiesprint. Bij Bluebird Day krijg je als team een sprint van twee weken om te innoveren omtrent e-commerce.
Om een PWA te ontwikkelen hebben we VueJS gebruikt. Dit is een moderne javascript framework waarmee we met de minimale benodigdheden van een PWA starten. In tegenstelling tot Magento, want Magento is geen PWA out-of-the-box. VueJS is eenvoudig en heeft een snelle leercurve. Daarnaast heeft het goede documentatie en tooling. VueJS bevordert de snelheid t.o.v. Magento. Als je in Magento naar een pagina navigeert dan ververs je de browser. Met VueJS wordt de pagina direct ingeladen.
Je hebt ten eerste de laatste versie van Magento nodig. Hierop is GraphQL geïmplementeerd. Dit is een nieuwe techniek en een zoektaal waarmee je data uit Magento kunt halen of sturen. Dit doe je door middel van queries. Je kunt het vergelijken met een REST of SOAP API, maar dan voor frontend. Via de chrome plugin “GraphiQL” kun je deze queries testen.
De PWA staat op een aparte omgeving. Om de PWA met Magento te laten communiceren heb je een GraphQL client (bijv. ApolloJS) nodig. Hiermee kun je een verbinding maken met de GraphQL endpoint van Magento en kun je queries schrijven om data uit Magento te halen of te sturen. Verder hebben we een bestaand thema gebruikt om onze frontend vorm te geven voor mooie homepage, categorie, productdetail en winkelwagen pagina’s.
Met deze technieken hebben we een fictieve dranken webshop ontwikkeld, namelijk Vuegento. Alle data komt uit Magento. Denk hierbij aan CMS blokken & pagina’s, registreren & inloggen, navigatie, categorieën, producten en de winkelwagen. Indien je wil afrekenen verlaat je de pagina en wordt je gestuurd naar de standaard checkout van Magento. Dit noemen we een externe checkout.
“Een PWA is veel maatwerk maar bevordert de performance”
Om een PWA from scratch te ontwikkelen moet je de backlog goed inventariseren. Alle functionaliteiten van je webshop moeten namelijk from scratch ontwikkeld worden. Ondanks dat het veel maatwerk is, is de performance van een PWA aanzienlijk goed.
Werken bij Bluebird Day?
Vind je deze blogpost interessant? Wij zoeken nog developers, zowel ervaren als beginnend! Ga jij samen met ons het avontuur tegemoet?
Hoe maak je een Magento 2 module compatible met GraphQL?
Door Luuk Suijkerbuijk
Na de pauze demonstreerde Luuk Suijkerbuijk, backend developer bij Bluebird Day, hoe je een Magento 2 module compatible maakt met GraphQL. Hij liet aan de hand van een inhouse ontwikkelde Social Media module zien wat er benodigd is voor het compatible maken van Magento 2 modules met GraphQL. Allereerst werden de voordelen van GraphQL ten opzicht van een REST API toegelicht. Zo is het mogelijk om aan GraphQL op te vragen welke properties je wilt ontvangen van een object, en geeft REST altijd het volledige respons terug. Dit heeft aan de frontend een performance voordeel omdat de objecten die worden ontvangen kleiner zijn en minder werkgeheugen innemen.
Om aan de backend ook een performance voordeel te verkrijgen moet er rekening gehouden worden met welke data de frontend opvraagt. Dit kun je afvangen in de resolver en bijbehorende models.
Na de verschillen tussen REST en GraphQL betoogd te hebben, ligt Luuk verder toe hoe de flow van een GraphQL query in Magento 2 er uit ziet. Zo beland een GraphQL query bij een graphql endpoint aan, waarna het verzoek door een resolver class wordt gebruikt om middels een Helper Class de database te benaderen.
Door deze flow wordt het mogelijk om de helper class die je wellicht al beschikbaar hebt binnen je module simpel om te zetten tot een GraphQL endpoint. Daarmee zorg je er voor dat de data die je binnen de module beschikbaar stelt op dezelfde wijze wordt opgehaald zowel via een GraphQL Query als een interne functie call.
PWAterval - How to choose a headless strategy?
Door Jisse Reitsma
Als afsluiter werd het woord gegeven aan Jisse Reitsma. Jisse is bekend van Yireo waar hij trainingen voor Magento, VueStoreFront en React geeft. Daarnaast is hij spreker en organiseert hij evenementen zoals Reacticon en MageTestFest
Deze avond gaf hij een presentatie over hoe je een headless strategie kunt kiezen en gaf hierbij voorbeelden van verschillende manieren en technieken om een headless e-commerce met Magento te ontwikkelen.
| Vue | React |
| VueStoreFront | Magento PWA studio |
| Custom built | DEITY |
| Front Commerce | |
| Neo Storefront | |
| ScandiPWA | |
| Duka | |
| Custom field |
Om de keuze te bepalen moet je eerst bepalen wat je precies zoekt. Wil je sneller ontwikkelen, makkelijker onderhouden en lagere kosten? Of wil je een compleet aanpasbare oplossing dat specifiek bij al je behoeftes past? En wat voor soort oplossing zoek je? Een kant-en-klaar pakket of een maatwerk oplossing. Kant-en-klare oplossingen hebben een nadeel hoe meer flexibiliteit de oplossing biedt, hoe complexer het wordt. Daarnaast komen er waarschijnlijk extensies bij kijken voor bepaalde oplossingen die de kant-en-klare frameworks niet bieden. Terwijl maatwerkoplossingen (from scratch) alleen datgene zullen doen wat je wil en je geen extensies nodig zult hebben aan de frontend.
Uiteindelijk maakt het niets uit welke techniek je kiest, zolang de techniek maar bij je past.
Questions & Answers.
Aan het einde werd er een Q&A gehouden waarbij we de vier sprekers naar voren riepen. Tim Janssen was de moderator en bood stellingen waarmee hij een discussie tot stand bracht tussen de sprekers en het publiek, die het eens of oneens moesten worden met de stellingen.
1. De PWA beweging wordt meer gestuurd door de development community dan de wensen van een eindgebruiker.
De sprekers en het publiek waren het hier zeker mee eens. Dit komt doordat wij als developers beter weten wat een PWA is dan een eindgebruiker. Een eindgebruiker zal misschien nog niet helemaal weten wat een PWA is en kent de techniek erachter niet. Daarnaast zal hij niet uit zichzelf een website installeren als app op zijn mobiel. Hiervoor zullen de ontwikkelaars een manier moeten bedenken om de eindgebruikers een zo makkelijk mogelijke manier te bieden om een PWA te installeren op het mobiel.
2. PWA's zijn op hetzelfde punt als responsive web design 5 jaar geleden.
Hier waren de sprekers en het publiek het niet mee eens. Responsive Web Design was een duidelijke oplossing voor het probleem/de nood dat er meer mobiele apparaten op het internet kwamen. Deze apparaten moeten ondersteund worden en de vraag naar mobiele versies van dezelfde site nam toe. Bij PWA’s is geen vraag vanuit de eindgebruiker naar PWA’s. De vraag van de eindgebruiker is dan ook ‘Geef mij een snelle website welke ik even snel en gemakkelijk en compleet kan gebruiken als een native app’, en PWA’s zijn het antwoord daarop.
What’s next?
PWA’s bieden het gemak van een native app via de browser. We kunnen namelijk functionaliteiten van een apparaat bieden en we kunnen het installeren op onze mobiel. Daarnaast hebben PWA’s zeer goede performance. Dit komt o.a. doordat we de frontend van de backend met elkaar kunnen scheiden. De term die we hiervoor gebruiken heet “headless”. Hiermee kunnen we via API requests met de backend - van bijvoorbeeld Magento - communiceren.
De frontend is hierdoor platform onafhankelijk waardoor we sneller en beter kunnen ontwikkelen als developers. Daarnaast is het ook mogelijk om een tussenlaag te bouwen, waardoor het voor een frontend niet langer nodig meer is om te weten waar bepaalde content vandaan komt. Dit heeft als voordeel dat je niet langer meer gelimiteerd bent tot Magento’s manier van content creëren. Zo kun je ieder gewenste CMS aan je applicatie koppelen, denk bijvoorbeeld aan Wordpress of Contentful. Dit principe gaat voor nog veel meer op dan alleen Content Management Systemen.
Er zijn genoeg technieken om zo’n headless oplossing of PWA te ontwikkelen. We kunnen gaan voor maatwerk oplossingen waarbij we iets from scratch maken. Dit zouden we kunnen doen met moderne javascript frameworks zoals VueJS of React. We kunnen ook gaan voor bestaande PWA oplossingen die out-of-the-box een koppeling met Magento bieden zoals Magento PWA Studio, Deity of Vue Storefront. Tenslotte maakt het niets uit met welke technieken we dit realiseren zolang de techniek past bij ons als developers en bij de klant!
We kunnen met zekerheid zeggen dat het een geslaagde eerste MUG076 was! En zeker voor herhaling vatbaar. Er zijn plannen om meerdere malen per jaar een MUG076 te organiseren en te hosten (MUG kalender volgen). Mocht je graag onderwerpen terugzien, goede ideeën hebben of interesse hebben om zelf te spreken op een MUG076? Mail dan naar mug076@bluebirdday.nl.
De slides zijn hieronder te vinden
Progressive Web Apps (Mario Ruis)
Een PWA met Magento en VueJS from scratch (Ezra Botter)
Hoe maak je een Magento 2 module compatible met GraphQL? (Luuk Suijkerbuijk)
PWAterval - How to choose a headless strategy? (Jisse Reitsma)
Werken bij Bluebird Day?
Hi, ik ben Tim Janssen, frontend developer bij Bluebird Day. Ben je naar aanleiding van deze blog benieuwd geworden naar onze openstaande vacatures? Klik dan op de blauwe button. Of neem gerust contact met mij op!
