<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=19494&amp;fmt=gif">
Geschreven door Ruthger Idema op 30 maart 2018 14:34:29 CEST

Op 16 maart 2018 is het event Reacticon gegeven in de stad van het licht, Eindhoven! Een super goed georganiseerd evenement door Yireo, waarvoor dank. Meer dan 100 Magento enthousiastelingen uit heel Europa kwamen samen om presentaties te bekijken en de discussie op te zoeken.

Waar we eerder al schreven over de Magento 2 PWA studio ging dit event in op de technische details.

Er zijn diverse Progressive web apps die de strijd aan gaan om de oplossing te worden die Magento developers gaan omarmen.

  • PWA studio
  • Deity
  • FrontCommerce
  • VueStorefront

Dit leidt tot ‘competitie’, wat de techniek alleen maar verder brengt. Er is veel te kiezen en alle oplossingen kijken naar elkaar.

Magento

Op dit moment is Magento 2 gebaseerd op het oude web development principe: front- & backend in dezelfde applicatie. Loskoppelen is mogelijk maar effectief gezien hou je dezelfde architectuur in stand. Met de komst van PWA gaat dit compleet veranderen, de frontend zal worden losgekoppeld van de backend. Dit resulteert in het gegeven dat -in theorie- je bijvoorbeeld dezelfde frontend kan behouden, terwijl je de backend vervangt.

De belangrijkste verschuiving die hieruit naar voren komt is dat de frontend steeds belangrijker wordt. Waar je op dit moment de backend veel laat renderen (Phtml in Magento) gaat dit in de toekomst op de frontend gebeuren. Hiervoor is een shift nodig die er voor zorgt dat er grotere applicaties moeten worden gebouwd in Javascript. Waar het nu vaak losse files zijn gaan we ook bij Javascript gebruik maken van het MVC principe:

  • Model
  • View
  • Controller

Dit zorgt er voor dat je als frontend developer gigantisch veel extra kennis in huis moest hebben. Waar vroeger ‘HTML, CSS en basale JavaScript’ voldoende was om jezelf als frontend developer te kwalificeren, is dit in 2018 zeker niet meer voldoende. Ook bij Guapa merken wij dat er een verschuiving op gaat treden, vandaar dat wij al diverse malen hebben overlegd hoe wij de toekomst voor ons zien. Hier hebben wij onder andere een team-sessie aan gewijd, waarbij wij met het team besloten hebben dat wij in onze leertijd nog dieper ingaan op frontend werkzaamheden. Dat betekend tevens, voor ons als developer, dat wij, als veelal backend programmeur, ook de overstap moeten maken richting frontend. We zullen dus nog meer fullstack developers worden! Uiteraard blijft iedereen zijn expertise en passie behouden, maar dat Javascript met de dag belangrijker wordt is een feit.


PS: Volg jij ons al? Rechts van dit artikel staan onze social media links!

PWA’s zijn sneller dan traditionele sites, mits goed ontworpen natuurlijk. Doordat de backend vaak niet meer is dan een database on steroids, als je het vanuit de frontend bekijkt, is er veel te cachen.

Single page applications

Veelal zijn PWA’s ontworpen als Single Page Applications, dit houdt in dat een enkele pagina wordt opgebouwd uit de volgende zaken:

  • Header
  • Content
  • Footer

Hierin zal de content per pagina anders zijn. Doordat alleen deze content geladen moet worden kan de browser ook alleen dit gedeelte verversen. Dit zorgt er voor dat dit super snel gaat en de browser geen ingewikkelde berekeningen moet uitvoeren om de hele pagina opnieuw te tonen.

Vaak is alleen een stuk HTML vervangen voldoende. Zo eenvoudig als het klinkt, is dat het zeker niet. Het dient goed ontworpen te zijn en veel verschillende partijen zoeken naar de snelste en meest gebruikersvriendelijke implementatie.

Service workers

Service workers zijn scripts die op de achtergrond draaien in je webbrowser. Dit zorgt er voor dat deze gedraaid kunnen worden zonder dat een website open staat of er gebruikers interactie nodig is. Dit zorgt er voor dat zaken die bij native apps ook gebruikt kunnen worden door een PWA.
Dit kan bijvoorbeeld zijn offline mogelijkheden maar ook push notificaties.
Service workers vormen een tussenlaag tussen de browser en de website, ze kunnen bijvoorbeeld HTTP(S) aanvragen ophalen uit cache, local storage of traditioneel over het netwerk.Een service worker heeft geen directe toegang tot de DOM (Document Object Model) maar kan het wel aanspreken door gebruikte maken van de ‘cache storage API’.

PWA Studio

Wij hadden van Reacticon gehoopt veel te kunnen zien over het nieuwe PWA studio. Helaas hebben we slechts basale informatie gekregen vanuit Magento, wij verwachten dat we na Imagine 2018  meer informatie hierover kunnen geven!

Deity

De Eindhovense partij Deity is hard op weg om Magento 2 als PWA te kunnen inzetten, zelfs voordat Magento dat doet. Ze maken gebruik van hun eigen ontwikkelde platform welke naar verwachting -hopelijk dit jaar- open source gaat worden!

Tijdens de presentatie hebben wij een kijkje gekregen in de werking van dit platform, wat gebruik maakt van Redux en GraphQL.

Wij hebben tijdens Reacticon de mogelijkheid gekregen om een gestripte variant van dit platform te downloaden en hier mee te experimenteren. Het ziet er veelbelovend uit en is gigantisch snel.

Helaas is het nog niet mogelijk om dit direct te koppelen met Magento 2, omdat vanuit Magento de ondersteuning van GraphQL nog ontbreekt.

Een demo van Deity die gebruik maakt van Magento is te vinden op https://demo.deity.io/

Voor developers:

Wil je ook experimenteren met deze techniek? Dan kun je de repository van bitbucket.
Helemaal enthousiast en wil je graag PWA en Magento 2 combineren? Wij zoeken altijd developers die voorop willen lopen in techniek.

En nu?

De verwachting is dat Magento einde 2018 de eerste opzet van PWA studio live gaat zetten, dit zal dan een beta zijn. Tot die tijd moeten wij hard aan de slag om de ontwikkelingen bij te houden en klaar zijn voor het moment dat wij onze eerste klanten kunnen adviseren. Wij proberen de opgedane kennis zoveel mogelijk om te zetten in hedendaagse toepassingen.

Nu rest je ongetwijfeld de vraag: moet ik wachten met investeren in mijn webshop tot PWA de status ‘stable’ heeft gekregen? Zeker niet! Magento heeft toegezegd het huidige platform te blijven ondersteunen en veel tools worden beschikbaar gemaakt. Daarnaast weet Magento zelf op dit moment nog niet wanneer PWA de ‘prefered choice’ wordt.

Lijkt het je leuk om meer informatie te krijgen over PWA, maar bijvoorbeeld ook over blockchain technologie? Bezoek dan ‘E-commerce Insights - Blockchain & PWA’. Tickets zijn te verkrijgen op de website van E-commerce Insights

Onderwerp(-en): Nieuws, Magento, Events, E-commerce tips

Nieuwsbrief