Van Magento naar supersnelle Laravel SSR e-commerce

Vanaf het begin werkten we nauw samen met het interne developmentteam van Fotocadeau. Samen met de teamlead bepaalden we vooraf de technische aanvliegroute, waarna developers van beide teams gezamenlijk aan de nieuwe frontend werkten.

Om in de eerste weken meters te kunnen maken stelden we ons kantoor, werkplekken en waar nodig apparatuur beschikbaar. Later werkten we ook op locatie bij Fotocadeau. Naast development dachten we mee over architectuur en brachten we onze ervaring met Laravel en het ecosysteem in. Zo hebben we bijv. verschillende tools geintroduceerd, welke Fotocadeau vervolgens ook voor andere interne projecten heeft kunnen inzetten.

De nieuwe frontend betekende niet dat Magento 2 in één keer moest verdwijnen. De sterk gemodificeerde checkout bleef in eerste instantie gewoon in Magento draaien, terwijl de voorkant van de webshop in Laravel werd opgebouwd.

Door sessies tussen beide applicaties te delen blijft dit voor de bezoeker één geheel. Een product dat vanuit Laravel in het winkelmandje wordt geplaatst, staat daardoor ook in het Magento-winkelmandje wanneer de bezoeker naar de checkout gaat. Waar nodig maakt de nieuwe applicatie daarnaast gebruik van de Magento API.

Zo konden we juist die onderdelen vernieuwen waar de meeste winst te behalen was, zonder alles wat al in Magento aanwezig was opnieuw te hoeven bouwen

Met tientallen miljoenen mogelijke productconfiguraties, en de wens voor nog veel meer, was schaalbaarheid een belangrijk uitgangspunt. Bij bijvoorbeeld een prijswijziging moesten voorheen grote aantallen combinaties opnieuw worden berekend, waardoor producten niet altijd even goed beschikbaar waren.

In Laravel introduceerden we een strategy pattern waarmee verschillende typen pagina’s afzonderlijk kunnen worden opgebouwd. Daarbij lag een sterke focus op caching én op het zo licht mogelijk genereren van een pagina wanneer bijvoorbeeld de edge cache opnieuw moet worden opgebouwd.

Het verschil is ook zichtbaar in de benodigde infrastructuur: de nieuwe frontend kan met ongeveer de helft van de serverresources toe.

Het design van OnlyWow hebben we samen met het interne team vertaald naar Vue-componenten binnen Inertia. Met Server-Side Rendering wordt de eerste pagina daarbij al volledig op de server opgebouwd.

Een bezoeker ziet daardoor sneller de eerste inhoud en hoeft niet eerst te wachten totdat Vue en JavaScript de pagina in de browser hebben opgebouwd. Vervolgens wordt de pagina gehydrateerd en neemt Vue het over voor components, state, events en navigatie.

Ook crawlers krijgen direct een volledig gerenderde pagina met headings, teksten, links en metadata. Daarmee combineren we de interactieve mogelijkheden van Vue met een frontend die ook zonder het uitvoeren van JavaScript direct bruikbare content levert.

In drie maanden naar productie
Binnen drie maanden ging de nieuwe frontend naar productie. Sneller en lichter, minder afhankelijk van zware verwerking in Magento en ontworpen om verder te kunnen schalen.

Tegelijkertijd bleef bestaande functionaliteit zoals de Magento checkout behouden en werd de nieuwe omgeving samen met het interne team gebouwd en overgedragen. Het volledige traject bleef daarbij ruim onder het vooraf gestelde budget.