PWA met Magento: zo pak je het aan!

1. WWVD - PWA MET MAGENTO
ZO PAK JE HET AAN!

2. Remco Dekkers – CTO
Manager afdeling TECH / Product owner “Magento 2 Best Practice”
Verantwoordelijk voor de
afdeling techniek binnen
ISM waar de bouw, hosting
en onderhoud uitgevoerd
wordt voor Magento
websites. De passie van
Remco ligt bij het inzetten
van technologie ter
ondersteuning van de
business.
Remco Dekkers
CTO
r.dekkers@ism.nl

3. Wij zijn trots te werken voor

4. Digitale strategie &
klantreis
Webshop design
Webshop bouw
Online marketing
& optimalisatie

5. 25+
Jaren ervaring in e-commerce
500+
E-commercespecialisten
3
Locaties
100+
E-marketingklanten
100+
Designklanten
34
Magento 2 getrainde
specialisten

6. ISM
eCompany
217

10. Hoe pak je het aan…
1. Wat is PWA nu eigenlijk?
2. Met welke trend is PWA te vergelijken?
3. Moet ik nu investeren in PWA of wachten?
4. Of toch eerst een AMP oplossing?

11. Snellere laadtijd Makkelijker
navigeren
Altijd ingelogd
Waarom gebruiken consumenten native apps?

12. 8 Gebruik de app
7 Accepteer
voorwaarden
6 Open app
5 Installeer
4 Download en wacht
3 inloggen in app store
2 Zoek in app
store
1 Laad app store
Native app -
gebruikersreis

13. laag hoog
hooglaag
Bereik
Betrokkenheidvangebruiker
Mobiele
webshops
Native apps Progressive Web Apps

14. start zoekopdracht selecteert
product
niet meer op voorraad...

15. ...notificatie weer op voorraad blijft op de
hoogte...
verliest internet connectie

16. ... gaat verder met shoppen krijgt push notificatie voegt toe aan mandje

17. ... betaalt in 1 tap voeg toe aan
startscherm
openen als native app browsen op volledig
scherm

18. 2Gebruik de app
1Klik op URL
8 Gebruik de app
7 Accepteer voorwaarden
6 Open app
5 Installeer
4 Download en wacht
3 inloggen in app store
2 Zoek in app store
1 Laad app store
Native app - gebruikersreis Progressive Web App -
gebruikersreis

19. Hoe pak je het aan…
1. Wat is PWA nu eigenlijk?
2. Met welke trend is PWA te vergelijken?
3. Moet ik nu investeren in PWA of wachten?
4. Of toch eerst een AMP oplossing?

20. Vergelijkbare trends
Dynamic HTML (ajax,
jQuery)
Responsive web design
(RWD)

21. Hoe pak je het aan…
1. Wat is PWA nu eigenlijk?
2. Met welke trend is PWA te vergelijken?
3. Moet ik nu investeren in PWA of wachten?
4. Of toch eerst een AMP oplossing?

22. Investeren in…
Echt nodig? De apps van Bol, Amazon en Aliexpress kunnen het ook niet.
Bekijk per onderdeel. bijv wishlist
Eenvoudig toe te voegen. Integreer met (e-mail) marketing tool?
Nog niet beschikbaar op iOS
Eenvoudig toe te voegen
Werkt op iOS en Android
Wachten op ondersteuning iDeal en PSP’s
Afhankelijk van design en implementatie, maar nieuwe PWA oplossingen gaan
helpen
Standaard Magento 2 is niet supersnel, nieuwe PWA oplossingen gaan hierbij
helpen
Offline werken
Push berichten
Startscherm
Betaalgemak
App gevoel
Snelheid

23. Architectuur nieuwe PWA oplossingen
logic
data
presentation
UI
data
logic
presentation
data
logic
presentation
Server
Client HTML HTML JSON
Multi Page
Application
Single Page
Application

24. PWA oplossingen voor Magento
Sterkte punten Aandachtspunten
PWA Studio
• Ontwikkeld door Magento
• Ondersteuning Commerce functies*
• Marktplaats voor extensies*
• In ontwikkeling: phase 2 MVP
Vue Storefront
• Grote en actieve community
• “Volwassen” product: versie 1.7
• 12+ websites in productie
• Commercieel SaaS optie
• Ondersteund alleen Open source
• Vue technologie, alle anderen React
Deity Falcon
• Meerdere jaren ervaring met PWA
• Nederlands bedrijf
• Passie voor performance
• Performance as a Service oplossing
• Kleinere community
• In ontwikkeling: versie 0.3
Frontcommerce • Meerdere jaren ervaring met PWA
• Commercieel
• Gesloten ontwikkeling

25. Check voor Best practices
Sticky header (incl. navigatie)
Labels onder menu iconen
Menu rechtsboven voor mobiel
Uitgebreide (3 laags) navigatie
Directe toegang tot search
USP's prominent in beeld
Directe ingang naar populairste categorien

26. PWA oplossing
PWA oplossingen beschikbaar,
maar…
Beperkte ondersteuning Magento
Commerce
Veel nog in ontwikkeling
Geen marktplaats met extensies
Kans op vendor lock-in, want nog
weinig partners vergeleken met
“standaard” Magento
Alternatief…
Investeren in verbeteren snelheid
Verbeteren van de
gebruikerservaring d.m.v. A/B
testen

27. Hoe pak je het aan…
1. Wat is PWA nu eigenlijk?
2. Met welke trend is PWA te vergelijken?
3. Moet ik nu investeren in PWA of wachten?
4. Of toch eerst een AMP oplossing?

28. Een kopie wordt door Google
dichtbij bezoeker opgeslagen
Gebruikt een geoptimaliseerde
subset van HTML en javascript

29. Nu AMP
Redenen om nu met AMP aan de slag te gaan
01
02
het is eenvoudiger te
implementeren dan PWA
de AMP website kan bestaan
naast de reguliere website
Magento marktplaats bevat
extensies die AMP toevoegen
AMP biedt ook voordelen nadat
PWA oplossing in gebruik
genomen is, want laadt sneller
03
AMP kan stap voor stap
toegevoegd kan worden
Test resultaat met A/B testen
04
0
5
!

30. Magento en PWA, zo pak je het aan
PWA basis
Investeer nu in aanbieden van
push berichten en startscherm
installatie.
Integreer de push berichten met
e-mail marketing tools en
processen
PWA oplossing
Bepaal of oplossing voldoet aan al
je eisen en wacht anders op
volwassen worden van de PWA
oplossingen
Verbeteren
Ga door met het continue
verbeteren van snelheid en
gebruikerservaring.
Voeg nieuwe betaalmethode door
zodra deze beschikbaar is
AMP
Implementeer AMP stap voor stap
en meet de resultaten

31. ISM
eCompany
217
Bezoek de stand van ISM eCompany voor meer over Magento 2 Best
practices

32. Van Nelleweg 1, 3044 BC Rotterdam +31 (0)10 243 60 000 info@ism.nl