Shopware PWA met Sander Mangel

ShopWorks heeft een groot netwerk, als Shopware Enterprise partner spreken onze ShopWorkers verschillende collega’s bij Shopware bijvoorbeeld bijna dagelijks. Maar ook met partners zoals Ergonode, Mollie en dealer4dealer bespreken we zeer regelmatig opdrachtgevers en gezamenlijke projecten. We weten precies bij welke contactpersonen we kunnen aankloppen voor diverse onderwerpen zoals externe koppelingen of betalingsservices. Ook kunnen we indien nodig hulp vragen aan bekenden binnen ons netwerk.

Voor deze blog interviewen we Sander Mangel, Freelance Ecommerce Solutions Architect. Onze directors hebben veel contact met Sander over zijn kennis over e-commerce, nearshoring en architectuur. Sander heeft als CTO bij Vue Storefont gewerkt en is nu actief in de nieuwe rol van ‘PWA advocat’e voor Shopware. We spreken met hem over PWA (progressive web apps) in combinatie met Shopware 6.

Kun je jezelf voostellen?

Ik ben Sander Mangel, Freelance Ecommerce Solutions Architect. Ik heb een achtergrond als developer voor Oscommerce en Magento, maar de laatste paar jaar richt ik me voornamelijk op architectuur van webshops en het opzetten van nearshore development teams voor merchants en agencies.

‍

Shopware 6 is ‘headless’, wat houdt dat in?

‍
De afgelopen jaren is de grens tussen app en web steeds meer aan het vervagen. Headless betekent dat de software, in dit geval Shopware 6, los staat van de frontend. Alle logica achter processen zoals bijvoorbeeld; producten in de catalogus, het toevoegen aan de winkelwagen en plaatsen van de order, komt via web APIs. Hierdoor kunnen we ook gemakkelijker de frontend vervangen voor bijvoorbeeld een PWA applicatie of een andere frontend. Een PWA werkt het beste op headless e-commerce systemen.

Kun je uitleggen wat PWA inhoudt en hoe het werkt?

‍
PWA, of Progressive Web App, is een collectie van technologieën met het doel om het gat tussen de traditionele responsive site en mobiele applicaties te dichten. Daarbij proberen we het beste van beide werelden te combineren. Steeds meer bedrijven zien hier ook de voordelen van in. Zoals vloeiende interactie en de snelheid van een native mobiele applicatie, met bijvoorbeeld de indexeerbaarheid van een normale website door Google, en het omzeilen van een app store voor installatie en updates.

Technisch gezien bouw je een applicatie in Javascript die de telefoon of laptop lokaal kan cachen en installeren, deze applicatie gebruikt de API endpoints van Shopware om data als producten binnen te halen. Dit gebeurd op slimme manieren, vaak in de achtergrond, waardoor de pagina laadtijd bijna niks is.

Wat zijn volgens jou de drie grootste voordelen van PWA?

‍
1. De voordelen van PWA verschillen per use case maar zonder twijfel staat stipt op 1 de performance. Door de geavanceerde caching mechanisms laden pagina’s in enkele milliseconden. Zelfs wanneer de gebruiker een slechte internet verbinding heeft.

2.Voor grotere projecten is er zeker ook een voordeel in de gescheiden frontend en backend. Dit betekent dat teams onafhankelijk van elkaar kunnen werken, en dat een frontend developer geen backend developer nodig heeft voor het maken van wijzigingen. Dit zorgt voor meer velocity in projecten.
3. En als laatste zou ik de user experience willen benoemen. PWA maakt het makkelijk om een intense ervaring neer te zetten, met vloeiende navigatie en veel interactiviteit. Dat komt conversie zeker ten goede.

Waarom zouden organisaties ShopwarePWA kunnen overwegen?

‍
Één van de absolute voordelen van ShopwarePWA voor Shopware 6 is hoe goed de integratie is. Shopware 6 is headless gebouwd, alle functionaliteiten zijn beschikbaar via API, en de frontend is specifiek voor deze APIs gebouwd door een team van developers met jaren PWA ervaring. En dit zie je terug in hoe volwassen de oplossing is.
Daarnaast investeert Shopware in documentatie en trainingen, waardoor het makkelijk wordt om nieuwe developers te onboarden.

‍