Reacticon

PWA’s (Progressive Web Apps) zijn tegenwoordig erg hip en je hoort het steeds vaker. De PWA oplossing van Magento zal een deel van Magento 2.3 uitmaken met de komst van de Magento PWA studio waar Magento developers al heel lang op zitten te wachten. Een PWA zit tussen een responsive web app en een native mobiele app in. Het is en blijft een webapp maar je kunt het installeren op je mobiel en je kunt functionaliteiten gebruiken van het apparaat zoals offline gebruik en push meldingen. Bovendien heeft een PWA ook een erg snelle performance doordat content waaronder je catalogus instant geladen wordt. De Magento PWA studio is een toolkit voor developers ontwikkeld met React om een PWA storefront te ontwikkelen met Magento 2 als e-commerce.

Donderdag 4 oktober 2018 is niet alleen de dag van de dieren maar is ook de dag van Reacticon, een evenement over PWA’s met e-commerce. Zo komen er onderwerpen aan bod zoals JavaScript optimalisatie, end-to-end testing, GraphQL, Deity, Webpack, VueJS, Vue Storefront, PWA studio en nog veel meer.

Sprekers
• Andrew Levine – JS optimization
• Javier Villanueva – End-to-end testing
• Pierre Martin – GraphQL
• Jamie Marie Schouren – Deity
• Eric Erway – PWA Strategy
• Bram van de Sande – SOA
• Mārtiņš Saukums – VueJS components in M2
• Filip Rakowski – Vue Storefront
• Bartek Igielski – Storybook
• James Zetlen – PWA Studio

Andrew Levine – JS optimization

Andrew Levine is de front-end architect en eigenaar van de front-end van Magento 2 en heeft o.a. gewerkt aan de blank en Luma theme van Magento 2. In zijn presentatie heeft Andrew het over JavaScript bundling, waarom we zouden moeten bundelen en dat de huidige manier van JavaScript bundelen in Magento 2 voor een erg slechte gebruikerservaring zorgt en hoe dit verbeterd kon worden. Magento 2 bundelt standaard alle JavaScript bestanden en laadt deze asynchroon in op elke pagina. Dit betekent dat elke bundel achter elkaar wordt geladen en zorgt voor een vertraging op de webshop. Zo’n bundel kan ook nog eens oplopen tot zo’n 8mb. We de-activeren daarom ook het bundelen van JavaScript in Magento 2 doordat dit slechte performance oplevert voor de shop. Een ideale oplossing zou zijn om per pagina type JavaScript te kunnen bundelen en deze te lazyloaden zodat niet alles ingeladen wordt. Webpack zou hier een oplossing voor kunnen zijn. Dit is een module bundler voor JavaScript en kan moderne JavaScript compilen. Het ondersteunt gestandaardiseerde modules zoals AMD modules zoals alle RequireJS modules in Magento 2. RequireJS optimizer zou een alternatief voor Webpack kunnen zijn. Het bundelen van JavaScript in Magento 2 is inderdaad een ramp. Magento heeft heel veel JavaScript bestanden waardoor je shop heel veel requests moet doen. Het verbeteren van de Magento 2 bundler zal dus zeker een verbetering zijn.

Javier Villanueva – End-to-end testing

Javier, een front-end developer bij medialounge.co.uk sprak over geautomatiseerd end-to-end testing met cypress.io en liet ons een demo zien. Met end-to-end testing kun je testen of de flow van een applicatie goed verloopt van start tot eind. Geautomatiseerd testen zouden we als developer allemaal moeten doen. Het verhoogt de kwaliteit van de code, je kunt er vroegtijdig bugs mee vinden, het maakt het aanpassen van de code makkelijker en uiteindelijk verlaagt het de totale kosten. Het geautomatiseerde end-to-end testen kan geschreven worden in testing frameworks zoals cypress.io. Echter doet niet iedereen aan het schrijven van testen. Dit komt doordat het schrijven van testen erg tijdrovend kan zijn. Javier liet in een demo zien hoe we geautomatiseerde end-to-end tests konden schrijven met behulp van het javascript testing framework cypress.io. Zo demonstreerde hij een stuk code waarmee je het inloggen en het toevoegen van producten aan je winkelwagen in Magento 2 kan testen en automatiseren. Met geautomatiseerd testen kan je veel tijd besparen doordat je na elke nieuwe release of nieuwe feature een hoop scenario’s kunt testen.

Pierre Martin – GraphQL

Pierre Martin van Front Commerce gaf een interessante presentatie en demo over GraphQL. GraphQL is een querytaal voor bij het gebruik van API’s. GraphQL zit standaard in de Magento 2 PWA studio en verzorgt gemakkelijker en flexibeler de data uitwisseling tussen de API en de front-end van een applicatie. Met GraphQL stuur je bijvoorbeeld een query door naar de API en je krijgt alleen datgene terug wat je nodig hebt. Daarnaast werkt het erg snel en veilig doordat GraphQL de controle heeft over de data wat je krijgt en niet de server. In zijn demo legde hij precies uit hoe GraphQL werkt en liet hij met GraphiQL (met een i ertussen) zien hoe je queries van GraphQL kan testen en wijzigen. GraphQL is erg handig want normaal gesproken bepaalt de API welke data je terugkrijgt. Met GraphQL kun je daarentegen in je front-end applicatie zelf bepalen welke data je ophaalt vanuit de API en voorkom je sneller fouten.

Jamie Marie Schouren & Mateusz Wozniak – Deity

Jamie, directrice bij Deity, makers van de headless PWA front-end framework en library introduceerde de open source library Deity Falcon. Vandaag was namelijk de dag dat Deity de source code op Github openbaar en open source heeft gemaakt. Deity Falcon is een set van tools en libraries die gebruikt kunnen worden als basis voor een PWA ecommerce. Zo bestaat Deity Falcon uit een aantal handige packages zoals packages voor de client, server, ui, theming, magento 2 api, wordpress api, vertalingen, blog en nog veel meer. De architectuur van Deity en een aantal packages werden door developer Mateusz verder toegelicht. De UI library die ze hebben ontwikkeld is op basis van components waarbij iedere component zijn eigen opmaak heeft op de plek van de component zelf. Op deze manier heb je de styling van de component ook bij de component en niet meer los ernaast. Je kunt hiermee de components dus overal gebruiken. Daarnaast presenteerde ze de supersnelle shops hartsofstur.com en webshop.nl ontwikkeld met Deity.

Eric Erway – PWA Strategy

De product manager van Magento van Adobe Eric Erway ging het hebben over de Magento 2 PWA Studio en waarom ze deze PWA oplossing aan het ontwikkelen zijn. Hij vertelde dat de huidige mobiele ervaring met e-commerce erg verbeterd kan worden en dat mobiele performance tegenwoordig een groot issue is. Op desktop wordt namelijk nog steeds het meest verkocht. De gemiddelde tijd om een volledige mobiele landingspagina te laden is 15 seconde en 53% van de bezoekers verlaten de site zodra de laadtijd van een pagina langer is dan 3 seconde. De PWA zou hiervoor een mogelijke oplossing zijn. De service workers zijn in elk geval beschikbaar in moderne browsers waardoor moderne browsers klaar zijn voor het gebruik van PWA. Service workers zijn scripts die op de achtergrond draaien waarmee functionaliteiten van het apparaat beschikbaar worden voor het web zoals bijvoorbeeld offline gebruik en push notificaties. De Magento community is in elk geval een leider op de markt m.b.t. PWA en e-commerce. Denk maar aan Divante (Vue Storefront), Deity, Space48, Front Commerce maar straks ook de Magento PWA studio. De Magento PWA studio zorgt voor de developer experience. Hierin zit het Venia theme dat voor de shopping experience zorgt en als basis aangeboden wordt voor ontwikkelaars om een PWA webshop te ontwikkelen. Verder toonde Eric de roadmap voor de komende fases in grote lijnen. Het valt op dat er nog heel veel werk aan de winkel is. Beheren van adressen en ondersteunen van betaalmogelijkheden zit bijvoorbeeld pas in fase 2 en ondersteuning voor multi stores zit bijvoorbeeld pas in fase 5.

Bram van de Sande – Service Oriented Architecture

Bram van de Sande, ook van Deity vertelde over Service Oriented Architecture (SOA) in e-commerce. Dat heeft voornamelijk te maken mer services. Denk maar aan time.google.com voor tijd, ShipperHQ voor de verzending, Algolia voor indexering en bijv. Adyen voor de betalingen. Service Oriented Architecture is een software architectuur dat met name gericht is op het ontwikkelen en beheren van diensten en services waarbij het gebruik en communicatie simpel, geïsoleerd, uitwisselbaar, herbruikbaar en onafhankelijk moet zijn. Het voordeel van Service Oriented Architecture is dat je data niet zelf hoeft te synchroniseren waardoor het minder complex wordt en dat alles onafhankelijk werkt.

Mārtiņš Saukums – VueJS components in M2

Mārtiņš is een front-end developer bij Bitbull en richt zich in zijn presentatie over componenten van frameworks zoals VueJS, React etc. in Magento 2. Een gehele shop omzetten naar zo’n framework is tijd slopend. Een nieuwe shop opzetten met een framework zoals VueJS kost ook ontzettend veel tijd doordat nog niet alles helemaal stabiel is en doordat je bijvoorbeeld nog steeds tegen zaken als payment providers in de checkout aanloopt doordat deze nog niet ondersteund worden. Mārtiņš wil ons voorbereiden door hier al wel mee te starten door VueJS of React componenten te maken die we kunnen gebruiken in onze Magento 2 webshops. Hij liet ons eerst de verschillen m.b.t. JavaScript zien van Magento 1 t.o.v. Magento 2. In Magento 1 was het namelijk heel makkelijk. Alles JavaScript direct in en je hoeft geen afhankelijkheden te definiëren. In Magento 2 werd RequireJS geïntroduceerd. RequireJS werkt met AMD modules. AMD staat voor asynchronous module definition en is een ontwikkelmethode waarbij je afhankelijkheden van een script definiëert zodat deze op volgorde asynchroon kunnen worden ingeladen. Vervolgens demonstreerde hij hoe hij van het nieuwsbrief blok in de footer een VueJS component maakte en met behulp van Babel in Magento 2 had geladen. Babel is een javascript library waarmee het mogelijk is om een VueJS of React component tot een AMD module te compilen om in Magento 2 te laden. De complete module hiervan heeft hij op Github gezet. Dit kan erg handig zijn voor een losstaand component bijvoorbeeld een wizard of een keuzehulp die je dan in VueJS of in React maakt en vervolgens in Magento 2 laadt.

Filip Rakowski – Vue Storefront

Filip Rakowski, co-founder en front-end developer van Vue Storefront hadden we een paar weken geleden al gezien tijdens een skype call tijdens de MUG in waalwijk over Vue Storefront. Hij legde ons uit dat Vue Storefront een framework en theme is voor een headless e-commerce PWA en dat het gekoppeld kan worden aan elk e-commerce. Dit wordt gedaan met behulp van een NoSQL database tussen de Vue Storefront API dat altijd hetzelfde blijft voor elk e-commerce en de API Adapter voor het framework voor bijvoorbeeld Magento 2. De API adapter kan wel veranderen. Zo kan er gecommuniceerd worden tussen de storefront en de backend van de e-commerce. Naast een recap van Vue Storefront had Filip ook een grote aankondiging, namelijk Vue Storefront 2.0 waarin een compleet nieuw thema geïntroduceerd wordt dat gebaseerd is op een aanpasbaar UI library en dat geheel backwards compatible is met Vue Storefront 1.0. Ook is het in 2.0 mogelijk om componenten van React of Angular te implementeren, zijn er vele performance, architectuur en development experience verbeteringen en wordt alles getest met unit testing en end-to-end testing. Tot nu toe lijkt Vue Storefront de meest stabiele PWA e-commerce. Het heeft daarnaast een groeiende community en er zijn steeds meer shops in productie te vinden die ontwikkeld zijn met Vue Storefront.

Bartek Igielski – Storybook

Bartek is lead front-end developer bij SNOW.DOG. SNOW.DOG staat bekend voor Magento 2 Frontools, een set front-end tools voor Magento 2 gebaseerd op Gulp.js voor bijvoorbeeld het compilen en linten van Sass i.p.v. het standaard in Magento 2 gebruikte CSS preprocessor Less. Daarnaast worden deze tools ook gebruikt voor het linten van JavaScript, voor het creëren van sprites, browserSync en nog veel meer. Linten wordt o.a. gebruikt voor het ontdekken en verwijderen van errors en voor het schoonhouden van de code. Een CSS preprocessor wordt gebruikt voor het compilen van Less of Sass naar CSS. Met Less of Sass kun je bijvoorbeeld CSS nesten, variabelen gebruiken en je CSS “extenden” met het gebruiken van functies en mixins. Hiermee verklein je het schrijven van code en kun je de code vaker hergebruiken. Daarnaast heeft SNOW.DOGS de Magento 2 blank theme overgezet naar Sass zodat front-end ontwikkelaars die liever Sass dan Less gebruiken dit als basis kunnen gebruiken voor hun theme. De Sass blank theme wordt telkens geupdate zodra de blank theme in de core ook een update heeft. Verder introduceerde Bartek hun nieuwe Alpaca theme, een thema voor Magento 2 geheel op basis van componenten met handlebars waarbij html, javascript en styling van een component bij elkaar in een folder staan. Deze methode van ontwikkelen heet ook wel component-driven development en zorgt ervoor dat alle componenten los van elkaar gebruikt kunnen worden. De componenten worden bij deze methode eerst ontwikkeld en eindigt op het niveau van pagina’s of schermen. Verder heeft Bartek het gehad over Storybook, een JavaScript framework voor het maken van een UI development omgeving, een soort documentatie met een overzicht van al je componenten die je gebruikt met de daarbij behorende acties. Zo heb je bijvoorbeeld in een overzicht al je buttons bij elkaar, wat ze doen en hoe je ze moet implementeren. In oktober zal de eerste release van de Alpaca theme zijn.

James Zetlen – PWA Studio

James Zetlen is front-end Architect bij Magento en werkt voornamelijk aan de PWA studio. Hij kon er helaas niet bij zijn maar via een videogesprek op skype presenteerde hij een deel over de PWA studio en waar hij momenteel mee bezig was. Momenteel is de PWA studio in alpha versie en zijn ze volop aan het ontwikkelen van features zoals de volledige checkout ervaring met betaalmogelijkheden, cms content via React componenten, formulier afhandeling en nog veel meer. De PWA studio is overigens geen thema maar een set van tools die gebruikt kunnen worden bij het ontwikkelen van de PWA. De Venia theme is een thema dat gebruikt kan worden als basis voor ontwikkelaars. Op dit moment is James voornamelijk bezig met het implementeren van upward (Unified Progressive Web App Response Definitions) in de PWA studio. Dit zijn YAML bestanden die het gedrag van een server beschrijven bijvoorbeeld voor caching en HTTP endpoints.

E-commerce is PWA ready!

We zien dat e-commerce momenteel klaar voor PWA is en dat de technologie zich heel snel ontwikkeld. Het is leuk om te zien dat er zoveel verschillende partijen ermee bezig zijn en dat er verschillende manieren worden ontwikkeld voor het ontwikkelen van een PWA e-commerce. Zo heb je Vue Storefront, Deity en Magento met de Magento 2 PWA studio die allemaal oplossingen bieden voor de PWA e-commerce. Daarnaast is er een groot groeiende community die ook mee ontwikkeld en mede dankbaar is voor deze groei. Kortom, het was een lange maar zeer leerzame dag met een hoop stof over progressive web apps i.c.m. e-commerce en over de verschillende technieken die daarbij komen kijken.