Op 4 oktober was het zover, Reaction v2! Het evenement werd gehouden in Eindhoven, een stukje rijden voor developers uit het hoge noorden maar het was zeker de moeite waard, vonden Rense en Arnoud. Een interessante conferentie met als thema ‘your future is headless’.

reacticon1.jpg

Wat men bedoelt met headless kun je teruglezen in een eerder geschreven blog van Martijn. Tijdens Reacticon gingen de verschillende sprekers in op technieken om headless toe te passen. Hieronder zullen we een aantal van deze technieken toelichten. Grote kans dat één van deze technieken in de toekomst toegepast gaat worden in jouw webshop.

Headless en JavaScript frameworks
Headless software is software dat zonder een visuele interface draaien kan. Headless Magento betekent een Magento platform zonder de front-end code dat er normaal gesproken bij inbegrepen zit. Geen standaard RWD of Luma thema met kleuren en interacties. Je zou kunnen zeggen dat Magento in dit geval de toplaag mist. We hebben dus te maken met een ontbrekende toplaag of hoofd, wat de term headless verklaart.

Bij headless is er een losse frontend die via een API-techniek kan ‘praten’ met Magento. API (Application Programming Interface) is een techniek die je kunt zien als een virtuele stekkerdoos. Op deze stekkerdoos passen verschillende stekkers. De stekker is in dit geval de losse frontend die op de Magento stekkerdoos past. Ze passen op elkaar en kunnen daardoor met elkaar communiceren.

De moderne browsers van tegenwoordig zorgen ervoor dat steeds meer logica op de frontend uitgevoerd kan worden en niet alles op de backend plaats hoeft te vinden. Een voordeel is onder meer dat de server (backend) minder belast wordt. Daarnaast zijn er nog veel meer voordelen. Om de complexe intelligentie aan de voorkant mogelijk te maken ontstaan de vraag naar nieuwe JavaScript frameworks. Een goed framework zorgt voor structuur, beter te onderhouden code en uiteindelijk in een snellere ontwikkeling van webapplicaties. Er bestaan inmiddels een aantal frameworks. Twee daarvan kwamen tijdens Reacticon regelmatig naar voren: ReactJs en VueJs. Zowel Magento als andere partijen zijn aan de slag gegaan met het toepassen van deze en andere frameworks in hun headless oplossingen.  

PWA Studio en Venia thema
Tijdens het publiceren van ons vorige blog over PWA, was de verwachting dat PWA Studio van Magento in kwartaal 3 of 4 van 2018 uit zou komen met Magento 2.3. De verwachting is nu dat Magento 2.3 begin 2019 gelanceerd wordt. Inmiddels is de ontwikkeling al bij versie 2.0. Gezien dit pakket meegeleverd gaat worden met Magento zelf, zal dit voor de meeste webwinkels en developers de meest voor de hand liggende keuze gaan worden om met PWA aan de slag te gaan.

Voor PWA Studio was in de eerste opzet een soort van thema, net als je nu ‘Blank’ en ‘Luma’ hebt in een standaard installatie van Magento. Op dit moment is PWA Studio al meer dan een thema. Wel is er een concept “Blank” thema in ontwikkeling voor PWA Studio genaamd “Venia”.

reacticon2.jpg

Vue Storefront
Vue Storefront is zoals de naam al aangeeft een voorkant voor je webwinkel. Het is een open source pakket wat als doel heeft om je webwinkel een snelle beleving voor de eindgebruiker te maken. Denk hierbij aan een mobile-first opzet en mogelijkheden voor een (gedeeltelijke) offline ervaring. Out-of-the-box is het pakket geschikt voor Magento 1, Magento 2 en Pimcore. In de toekomst zal het ook betere integratie krijgen met andere pakketten zoals Shopify. In tegenstelling tot de PWA Studio van Magento gebruikt Vue Storefront geen React, maar Vue als Javascript framework.

DEITY Falcon
DEITY kwam met hun PWA-oplossing voor een headless frontend voor Magento 2, met het grote nieuws dat hun pakket open source beschikbaar is. DEITY Falcon is een tool en een library voor het bouwen van PWA’s. Het vormt een extra laag bovenop het platform. Een platform zoals Magento 2 maar ook andere platformen zijn mogelijk zoals bijvoorbeeld Wordpress. De Falcon laag bestaat uit een server- en clientgedeelte. Het servergedeelte communiceert met de API van Magento 2 om data op te vragen, bijvoorbeeld om te checken of een product nog op voorraad is. De Falcon server geeft deze informatie weer door aan het Falcon clientgedeelte, dat ervoor zorgt dat de klant kan zien dat een product voorradig is.

Storybook
Snowdog gaf een presentatie over Storybook dat ook in PWA Studio wordt toegepast. Storybook is een ontwikkelomgeving gebaseerd op user interface componenten (UI components). Binnen Storybook bouw je eerst de componenten. Bijvoorbeeld een button of een zoekveld. Storybook staat los van de applicatie of platform zoals Magento. Iedere component heeft zijn eigen story/verhaal, wat het is en hoe het werkt. Het voordeel is dat Storybook niet afhankelijk is van het platform waarin het gebruikt gaat worden. Hierdoor kun je een catalogus opbouwen vol met verschillende componenten die je kan hergebruiken.

Een frontend met voordelen als minder server load, een snellere laadtijd van pagina’s, pushnotificaties op mobiele telefoons, en meer. Logisch dat het idee van een headless Magento erg erg aantrekkelijk klinkt. Er was altijd één groot nadeel: er moest een volledige nieuwe frontend ontwikkeld worden, wat heel kostbaar is. Wat we tijdens Reacticon hebben gezien is dat er nu oplossingen beschikbaar zijn en dat er hard aan gewerkt wordt. Niet alleen door Magento zelf maar ook door andere partijen. Dat belooft wat!

Your future will probably be headless, maar houd je hoofd erbij!