Jamstack en headless commerce: een veelbelovende mix

 Jamstack en headless commerce: een veelbelovende mix

Met de snelle groei van e-commerce is een optimaal presterende webshop belangrijker dan ooit. En in een wereld waarin dinsdagavond in een persconferentie duidelijk wordt dat winkels op woensdag op bestelling producten mogen afgeven (Click & Collect), is ook flexibiliteit een absolute must. In deze blog vertelt front-end developer Gabriël Moawad je hoe headless en jamstack hierbij kunnen helpen. 

Origineel verschenen op Capgemini.nl door Gabriël Moawad

Oké, je hebt misschien al wel eens van jamstack gehoord, en misschien weet je ook al wel precies hoe dit werkt. Maar voor de zekerheid praat ik je even kort bij. Jamstack is een vorm van architectuur op basis van microservices. De naam is afgeleid van JavaScript, API’s en Markup – de drie bouwstenen van een jamstack. Deze (third-party headless) API’s serveren de data uit, die wij ophalen en in de markup (via templates) statisch genereren. Dit gebeurt allemaal build time, met een zogenoemde static site generator, en dus niet runtime, zoals dat nu vaak plaatsvindt.

Als front-end developer word ik erg enthousiast van jamstack. Waarom? Allereerst door de grote voordelen, zeker voor webshops. Komen ze:

  • Snellere website
    Er gaat niets boven pre-built files die worden geserved via een CDN. Dat levert een beter presterende site op voor de gebruiker. En die snelheid is bést belangrijk, zeker in de wereld van de e-commerce. Iets langere laadtijden (en dan hebben we het over milliseconden) leiden meteen tot verlies aan omzet. Een belangrijk argument om eens te denken over static site generation dus.
  • Probleemloos opschalen
    De server bestaat uit pre-built files en heeft daardoor geen directe runtime dependencies bij het uitserveren van de website. Hierdoor is opschalen geen issue meer. Dit is namelijk puur een kwestie van deze files op meerdere plekken uitserveren.
  • Volop vrijheid in de front-end
    Door middel van (third-party) API’s van headless CMS’en of e-commerce-platforms ben je aan de voorkant volledig vrij om de ideale (gebruikersgerichte) interface te bouwen.
  • Gerichter werken en debuggen
    Door te kiezen voor jamstack kies je indirect ook voor een microservice-architectuur. Hierdoor kunnen betrokken developers veel gerichter werken aan hun deel van de puzzel, in plaats van kennis te moeten hebben van het hele landschap.
  • Meer veiligheid
    Door de aanpak met microservices hebben hackers simpelweg minder oppervlakte om aan te vallen. Ook eventuele outages van deze microservices zijn makkelijker te pinpointen. En omdat de site geen consistente connectie nodig heeft met een achterliggende database, is de data ook beter afgeschermd.

Ik heb zelf een zwak voor e-commerce, omdat je daar de bezoeker echt moet verleiden om iets te bestellen. Het werk van de front-ender is daarbij heel bepalend – natuurlijk samen met UX-designers. Jamstack geeft de performance van deze websites niet alleen een boost, maar geeft meteen ook een glansrol aan de front-enders.

Heeft de jamstack eigenlijk ook nadelen?

Eerlijk is eerlijk: de kracht van de jamstack heeft een mogelijke keerzijde. Het grootste deel van de site wordt build time gegenereerd. Dat betekent dat als een webshop een product aanpast, de hele site standaard opnieuw gegenereerd zal gaan worden. Dat is extra vervelend als je een shop hebt met duizenden producten die doorlopend worden aangepast, want dan moet de site elke keer dus alles opnieuw builden. Hier zijn alternatieve strategieën voor te bedenken, zoals het bouwen van delta’s of regelmatig veranderende data toch runtime op te laten halen, maar dat voegt wel extra complexiteit toe

Deze complexiteit kan een reden zijn waarom statisch gegenereerde front-ends nog niet vaak gebruikt worden in de commerce-wereld. Maar je hoeft natuurlijk ook niet in één keer over te stappen. Probeer eens hoe het uitpakt als je een apart onderdeel headless opbouwt, eventueel met een jamstack-architectuur. Bijvoorbeeld de productpagina’s. Met een simpel proof of concept kun je algauw verschillen zien in de manier waarop dit ontwikkeld wordt en ook hoe snel de statisch gegeneerde pagina’s laden.

Verandering in front-end development

Toen ik zeven jaar geleden bij Capgemini aan de slag ging als front-end developer, zag het vak er heel anders uit. Het verschil tussen front-end en back-end was heel duidelijk. De laatste tijd is dat wat meer door elkaar heen gaan lopen. Jamstack werkt deze ontwikkeling in de hand, omdat je hierdoor als front-end developer met JavaScript ineens ook gewoon een deel van het ‘klassieke’ back-end gedeelte kan maken. Het vergroot het gebied waarin ik als front-end developer van toegevoegde waarde kan zijn – en dat kan ik alleen maar toejuichen!

Bekijk de Tech Talk van Gabriël over commercetools en de jamstack

Benieuwd hoe je een jamstack bouwt? In onze Tech Talk van 23 maart laat Gabriël je zien hoe je zonder veel moeite een webshop in elkaar zet. Ook leuk: hij gebruikt daarbij commercetools, een handig headless platform voor e-commerce. Meer daarover krijg je te horen van Ashish Monga, commerce solutions architect bij Capgemini.

Leave a Reply

Your email address will not be published. Required fields are marked *