Langzaam maar zeker wordt PWA (Progressive Web Apps) steeds vaker met Magento in een zin genoemd. Magento heeft namelijk een tijdje geleden aangekondigd dat ze PWA gaan integreren in Magento 2.3 met Magento PWA Studio. Ook het concept headless wordt steeds vaker aangehaald, en benoemd als een techniek voor de toekomst. We vinden het belangrijk dat er ook een meer praktische blik wordt geworpen op wat dit betekent voor webshops die op Magento draaien en wat het kan opleveren. Lees snel verder!

 Magento PWA Studio Headless 
 

Wat is PWA, en wat betekent het voor een webshop?

PWA staat voor Progressive Web Apps, een techniek die zijn naam van Google heeft gekregen. Het concept van PWA is simpel: een website moet betrouwbaar, snel en gebruiksvriendelijk zijn, op welk apparaat je de website ook bezoekt. Steeds meer aankopen worden gedaan op de mobiele telefoon, dus is het belangrijk dat de website gebruiksvriendelijk en snel is om een zo hoog mogelijke conversie te hebben. Er zijn zelfs cases waarin de conversie met 80% is gestegen door gebruik te maken van PWA. (bron) Daarnaast kan het erg gunstig zijn voor SEO, omdat Google in de toekomst een website die gebruikt maakt van PWA hoger zou kunnen gaan ranken in haar zoekresultaten.

 
 Voorbeeld hoe een Progressive Web App zich kan gedragen op een mobiele telefoon ( Bron )

Voorbeeld hoe een Progressive Web App zich kan gedragen op een mobiele telefoon (Bron)

 

Het idee van PWA bij een (Magento) webshop is dat er veel in de browser van de eindgebruiker wordt gedaan, in plaats van dat er voor elke nieuwe pagina een volledige pagina van de server wordt geladen. Dit betekent dat er minder druk komt op de server, en dat tegelijkertijd de laadtijd van de pagina omlaag gaat. Een ander voordeel hierbij is dat de opmaak van de website zich als een app voor kan doen, waardoor het niet meer nodig is om een aparte app te ontwikkelen voor bijvoorbeeld iOS, Android of Windows Mobile. Een van de voordelen hiervan is dat het mogelijk is om push-notificaties te versturen naar de mobiele telefoon van de gebruiker, en dat de website offline beschikbaar is. Daarnaast kan de website gebookmarkt worden, waarbij het icoontje op het scherm van de gebruiker lijkt op een app.

 
 The Rake is a recent voorbeeld van een Magento shop met een PWA front end -  therake.com

The Rake is a recent voorbeeld van een Magento shop met een PWA front end - therake.com

 

Een aantal andere voorbeelden die met deze techniek zijn gebouwd zijn te vinden op pwa.rocks. Dit zijn niet alleen webwinkels, maar ook spellen, referentielijsten, sociale media, demos en tools. 

 

Wat is headless, en wat heeft het met PWA te maken?

Headless begint ook steeds meer een onderwerp van gesprek te worden, maar wat is het nou daadwerkelijk? De technische definitie van headless houdt in dat headless software een stuk software is dat zonder visuele interface draait. In de praktijk betekent dit dat je bijvoorbeeld geen front end, zoals een Magento storefront, nodig hebt om een systeem succesvol taken te laten uitvoeren. Het is hierbij mogelijk om zelf een front end en/of back end interface te ontwikkelen voor een headless systeem en dit via een API te koppelen. PWA is een hierbij de naam van de techniek die Google hiervoor gebruikt om een front end te ontwikkelen voor een (headless) systeem.

Voor dit artikel delen we headless op in “front end”, alles wat te maken heeft met het weergeven van de inhoud van een headless systeem voor een eindgebruiker (in Magento een storefront en een administrator-omgeving), en “back end”, wat zich bezighoudt met het koppelen van het systeem met andere systemen. Denk hierbij bijvoorbeeld aan het koppelen van een ERP, WMS of CRM aan Magento.

 
 Magento 2 Lumia front end voorbeeld zonder PWA

Magento 2 Lumia front end voorbeeld zonder PWA

 

Wat kan Magento met PWA Studio?

Een van de mogelijkheden die meekomt met PWA Studio van Magento in de 2.3 release is de optie om een zelfgemaakte front end in te voegen. Dit betekent dat je niet meer gebonden bent aan PHP, waarin de front end van Magento is geschreven, maar dat je via een koppeling een front end in bijvoorbeeld ReactJS of VueJS kunt (laten) ontwikkelen. Deze talen worden veel gebruikt bij de ontwikkeling van front ends, omdat ze de mogelijkheid geven om op het apparaat van de eindgebruiker de beleving en snelheid te optimaliseren.

Dat klinkt in theorie erg mooi, maar Klaas Sangers, een van onze ontwikkelaars, geeft ook aan dat er flink wat uitdagingen zijn met headless en PWA (Studio). De praktijk tot nu toe leert ons dat er nog steeds veel gebruik gemaakt wordt van de front end van Magento, omdat Magento zelf hier veel mogelijkheden voor biedt, waardoor het kostbaar kan zijn om dit allemaal te vervangen. Denk hierbij aan het volledig (laten) herontwikkelen van de front end, maar ook aan het integreren van extensies die moeten worden weergegeven, die (wanneer gebruikt buiten de Magento front end) allemaal koppelingen nodig hebben voor de nieuwe front end. De focus van Magento als het aankomt op headless en PWA is op dit moment de front end, en niet de back end.

 

Hoe zit het met de back end?

MediaCT heeft een oplossing voor de integratie en verbindingen voor de back end van Magento 2 ontwikkeld, Magement. Het idee van Magement is dat het het centrale punt voor data-uitwisseling tussen verschillende systemen is. Hierdoor is alle data op alle verschillende plaatsen altijd up to date, zonder dat Magento onnodig vaak wordt aangeroepen door alle verschillende systemen. Denk hierbij aan het verbinden en integreren van Magento met een PIM, ERP, WMS of CMS. De server waarop Magento draait heeft het een stuk minder zwaar, omdat deze niet meer verantwoordelijk is voor de uitwisseling en het up to date houden van de andere systemen.

 
 Magement Magento Integration Platform
 

En dan de hamvraag…

Moet ik wat met PWA en/of Magement doen in mijn Magento webshop?

Ja! Dat is natuurlijk makkelijk gezegd, maar kijkend naar de toekomst is het verstandig om het idee van PWA mee te nemen in de (door)ontwikkeling van je Magento webshop. Het is een trend die de komende maanden meer vorm en inhoud gaat krijgen, en zeker wanneer Magento met PWA Studio komt. Magement is een oplossing voor Magento 2, en kan nu al ingezet worden om de data-uitwisseling te optimaliseren. Of het nuttig is om Magement in te zetten hangt af van de complexiteit en het aantal systemen dat aan Magento is gekoppeld.

 Magento PWA Studio AMP

Wanneer moet ik met PWA/Headless in mijn Magento webshop beginnen?

Als het op PWA aankomt, kijk dan allereerst naar jullie eigen plannen - zijn er ideeën om een nieuwe webshop te laten bouwen? Kijk dan vooral uit naar de release van Magento 2.3 en de mogelijkheden die het met zich meebrengt. We verwachten dat in kwartaal 3 en 4 van 2018 de eerste webwinkels live gaan die Magento PWA Studio gaan gebruiken, dan is er te zien wat de praktische vertaling van het PWA concept gaat zijn. Tegen die tijd is het interessant om te kijken wat Magento aanbiedt, waar de ontwikkeling van Magento naar toe gaat, en om te kijken of het de investering waard is is om een nieuwe webshop te laten bouwen met een losse front end. 

Op het gebied van headless back end koppelingen is het mogelijk om nu al te kijken naar de koppeling met Magement. Om meer te weten te komen over Magement, is er een Nederlandse pagina, en nog meer informatie is te vinden op de Engelstalige website magement.com. Heb je na het lezen van deze pagina’s vragen, of ben je benieuwd wat Magement voor je Magento integraties kan betekenen? Neem dan contact met ons op. Een van onze specialisten helpt je dan verder.