In e-commerce land is een verschuiving gaande naar een nieuwe manier van webshops bouwen: PWA.
Maar wat is een PWA eigenlijk en waarom is deze techniek zo veelbelovend?
Laten we voordat we PWA uit de doeken doen eerst een korte blik werpen op de gangbare manier waarop webshops zijn opgezet.
Bij een traditionele webshop komt het verzoek van de browser bij Magento terecht.
Magento zoekt alle relevante gegevens bij elkaar en bouwt aan de hand hiervan een HTML-pagina op. Deze pagina gaat retour naar de browser, die deze vervolgens weergeeft. Dit proces herhaalt zich voor elke pagina die de gebruiker bekijkt.
Dit heeft altijd gewerkt en zal ook blijven werken. Maar de online wereld is wel flink veranderd door de jaren heen. Ruim meer dan de helft van de bezoeken is op mobiel en lang niet altijd op wifi maar vooral ook veel onderweg op mobiele netwerken. Daarnaast verwacht men een steeds rijkere gebruikerservaring met meer dynamische elementen op een webpagina (het ‘app-gevoel’). Dat betekent automatisch ook een andere frontendtechnologie-stack die dat mogelijk maakt.
Hier komt PWA om de hoek kijken.
Met een PWA - kort voor Progressive Web App - wordt de frontend losgekoppeld van de backend. De PWA haalt zelf de gegevens op die het nodig heeft en verzorgt de weergave ervan.
De PWA-flow loopt zo: de browser vraagt een pagina van de webshop op en er wordt meteen een statische HTML pagina uitgeserveerd door een webserver (dit gaat zéér snel). In de browser wordt middels Javascript dynamische data opgevraagd bij de Magento API. Magento stuurt de data terug, en die wordt gerenderd in de frontend.
In plaats van iedere pagina helemaal bij Magento op te halen, wordt eigenlijk eenmalig het ‘raamwerk’ van de shop, dus de header, footer, menu, etc opgehaald. En vanaf dat moment, als je klikt naar een andere pagina, blijft dat raamwerk in de browser geladen, en wordt via de API nieuwe data opgevraagd, en dat raamwerk geüpdatet met nieuwe informatie. Dit kan zeer snel gebeuren.
Doordat de perceived performance (de door de gebruiker waargenomen snelheid) zo goed is, draagt dit enorm bij aan de gebruikerservaring en conversie van je shop.
Hoe snel is dat dan? Nou zo snel.
Omdat Magento zelf geen HTML-pagina's meer opbouwt en feitelijk niets 'zichtbaars' meer doet, wordt dit een headless backend genoemd.
Magento genereert dus niet meer de pagina's die gebruikers zien, maar stelt eigenlijk alleen data beschikbaar via de API. Niet alleen gegevens uitlezen, maar ook data in Magento aanpassen kan via de API. Zoals het aanmaken van een winkelmandje en het toevoegen van een adres aan een klantaccount.
Bold zou niet Bold zijn als we aan Magento PWA niet een eigen draai aan zouden hebben gegeven. Dat doen we bijvoorbeeld door de architectuur om te gooien en technologiestack uit te breiden met onder meer het NUXT framework en ElasticSearch als databackend van de catalogus.
Magento frontend development staat bekend als complex door overengineering en heeft daarmee een steile leercurve.
Op het eerste gezicht kleine aanpassingen kosten soms heel veel tijd. Dit is verleden tijd met PWA. Door gangbare, veel gebruikte technologieën te gebruiken kan iedere frontend developer direct aan de slag. En ook niet onbelangrijk, het plezier is hiermee weer terug in het ontwikkelen van een webshop frontend.
Tot slot: waar voorheen de frontend nog wel een last kan hebben van een cache flush, of langlopende indexers, is dat bij een PWA niet het geval. De PWA draait los van Magento en zal dus altijd snel en stabiel blijven ook al heeft Magento het even zwaar.
Kom zelf ervaren hoe wij invulling geven aan PWA's op Magento.
Toets 020 - 303 50 76 in op je telefoon en druk op 'Bellen' of mail naar [email protected]. Langskomen mag ook: ga naar de Teleportboulevard in Amsterdam en bel aan bij nummer 128.