Onze eigen agency website bouwen met Prismic.io, GatsbyJS en React

Vier jaar geleden zijn we gaan werken met React, Vue.js en Laravel. Inmiddels hebben we met deze technologieën veel projecten voor klanten hebben uitgevoerd, en kunnen we wel zeggen dat we uitgegroeid zijn tot specialisten in deze technologieën. Waarom zouden we dan niet kijken of we deze interessante technologieën niet ook voor onze eigen website kunnen inzetten?

Floris Derksen | 22 aug 2019

Vorig jaar besloten we om onze website oneshoe.nl en oneshoe.com opnieuw te bouwen. Dit hadden we de afgelopen dertien jaar al drie keer gedaan en omdat we als bureau zo'n fan zijn van Drupal, komen we op de een of andere manier toch altijd weer uit bij Drupal als favoriete techniek. Onze laatste website was gebouwd met Drupal 7, dus een herbouw met Drupal 8 ligt dan voor de hand. Maar tijden veranderen en elke dag komen er nieuwe technologieën bij. Net als React, Vue.js en Laravel. Onze ervaring met het werken met deze technologieën de afgelopen jaren was heel goed. Daarom besloten we uiteindelijk om Gatsby.js in combinatie met Prismic.io te gebruiken voor het bouwen van onze nieuwe website.

Requirements

Elk project dat we bij One Shoe uitvoeren, begint met een zogenaamde Discovery, een verkenning. Dus ook dit project. Tijdens deze discovery kwamen we erachter dat de vereisten voor de website waren zoals die je bij een bureau kunt verwachten: een portfolio, de contactpagina, pagina’s zoals ‘over ons’ en dat de presentatie van de content op deze pagina's erg belangrijk is. Naast deze vereisten selecteerden we ook een aantal belangrijke niet-functionele vereisten zoals:

We wilden een snelle nieuwe website met een kant-en-klare beveiliging
De content moest kunnen worden beheerd door een gebruiksvriendelijk CMS
We wilden een soepel ontwikkelproces
En een design-driven UX-aanpak

Met dit alles in ons achterhoofd zijn we technische oplossingen gaan verkennen. Een aanpak die ons aansprak was de JAMstack-approach.

Website bouwen volgens de JAMstack-aanpak

In de wereld van front-end/javascript is er een nieuwe aanpak genaamd JAMstack. JAMstack is geen set van technologieën maar meer een visie op een nieuwe manier van websites en apps bouwen. De aanpak is gericht op betere resultaten, een betere beveiliging, minder kosten voor opschalen én een betere ervaring voor de ontwikkelaar. De visie van JAMstack draait om drie aspecten:

de technologie is gebaseerd op Javascript
de applicatie gebruikt API’s voor het opvragen van data of content
de opmaak wordt vooraf gebouwd tijdens implementatie, wat inhoudt dat we een static generated site genereren

De keuze voor het Gatsby.js framework

Gatsby.js is een van de frameworks die de filosofie van JAMstack implementeert. De hoofdfunctie ervan is het bouwen van een statische versie van een website op basis van de front-end-code en gegevensbronnen. We hebben om twee belangrijke redenen gekozen voor Gatsby.js: het gebruikt React.js als front-end-taal voor het bouwen van de UI en GraphQL voor het opvragen van content bij gegevensbronnen. De tweede reden én het grote voordeel ervan is dat Gatsby.js ook plug-ins ondersteunt. Gatsby.js heeft momenteel meer dan 760 plug-ins om de functies van het framework uit te breiden. Voorbeelden van plug-ins zijn CMS-integratie, ondersteuning van Google Analytics en beeldoptimalisatie.

CMS data source integratie met Prismic.io

Onder de plug-ins van Gatsby.js bevinden zich al veel plug-ins die integratie bieden met de populaire zelf gehoste CMS-systemen zoals Drupal, Wordpress en CraftCMS. Integratie met headless CMS-systemen die in de cloud draaien, zoals Contentful, Prismic.io en DatoCMS is ook al mogelijk. Bij dit project hebben we gekozen voor Prismic.io als CMS. Voor het opvragen van data bij de bron, in dit geval Prismic.io, gebruikt Gatsby.js de GraphQL-specificatie. GraphQL is een querytaal voor API’s die zelf komt met een beschrijving van de data. Dit houdt in dat ontwikkelaars clientapps kunnen maken die precies de data opvragen die ze nodig hebben. Een van de grote voordelen van deze aanpak is dat wanneer de API van een CMS of applicatie na verloop van tijd verandert, het makkelijker is om aanpassingen in de client te implementeren en dat het minder impact heeft.

Onze ervaring met ontwikkelen via Gatsby.js

Over het geheel genomen vonden we het bouwen van een website met Gatsby.js heel fijn. Ontwikkelaars kunnen functionaliteiten bouwen in een zeer lichtgewicht stack. Dit is vooral het geval bij gebruik van een cloud-based CMS. Het lichtgewicht stack maakt dat het toevoegen van nieuwe ontwikkelaars aan het projectteam makkelijk en moeiteloos verloopt.

Een van de grote voordelen van het gebruik van React is dat we een design-driven aanpak konden volgen. Dit komt doordat Gatsby.js trouw blijft aan hoe React wordt gebruikt. Zo hadden we de volledige controle over hoe de gebruikerservaring kon worden gecreëerd. Ontwikkelaars konden zelfs gebruikmaken van open source componenten van React om de ontwikkeling nog sneller te laten verlopen. Het enige is dat de gebeurtenissen rondom de lifecycle van de component wat anders worden aangepakt. Dit komt doordat Gatsby.js een static website genereert en geen React-applicatie die je normaal gesproken zou implementeren. Dit heeft gevolgen voor hoe gebeurtenissen worden afgehandeld in bijvoorbeeld Google Tag Manager of Page-transities. Maar met plug-ins en documentatie kunnen deze verschillen worden verholpen.

Onze ervaring met contentbeheer via Prismic.io en Gatsby.js

Bij onze aanpak wordt het contentbeheer door Prismic.io. gedaan. Een CMS zoals Prismic.io is vrij rechttoe rechtaan. We kozen voor dit CMS-systeem vanwege de dynamische inrichting met stukken content. Hierdoor kunnen contentmanagers pagina’s bouwen die verschillende pagina-elementen bevatten. Dit kwam bij veel pagina’s van de website zeer goed van pas.

Tijdens de livegang van het project hadden we nog geen geavanceerde previewfunctie voor contentbeheerders. Een van de minpunten hiervan is dat de wijzigingen die contentbeheerders in Prismic.io maken niet direct in de website worden gepubliceerd. In plaats van dat de pagina zelf wordt gepubliceerd, wordt er een webhook geactiveerd die een nieuwe Gatsby.js bouwt op de server. Dit kost tijd. Een van de nadelen van deze aanpak is dat contentmanagers niet langer makkelijk vooraf hun wijzigingen kunnen bekijken. Maar geen zorgen, want de makers van Prismic.io werken al aan een Gatsby.js-plug-in waarmee de content wel vóór publicatie te bekijken is. Zodra de plug-in klaar is om in productie te worden gebruikt, gaan we van start met de implementatie van deze functie.

Hosting via Netlify

Om te zorgen dat de hosting van onze nieuwe Gatsby.js-website op rolletjes loopt, maken we gebruik van Netlify. Netlify is een cloud-based hosting platform dat in allerlei handige bouwtools voorziet die nodig zijn voor moderne webprojecten. Netlify kan heel gemakkelijk worden opgenomen in een implementatie workflow en voelt echt aan als een kant-en-klare oplossing. We hoefden alleen maar onze GIT repository te verbinden met de acceptatie- en productieomgevingen, de webhooks voor het activeren van het bouwproces in te stellen en klaar was ons project.

Onze conclusie?

Pluspunten

+ Uitstekende resultaten
+ Geen zorgen over beveiliging
+ GraphQL maakt het beheer en de afstemming met de API veel makkelijker
+ Gebruik van React waarborgt een design-driven aanpak
+ Vanwege het lichtgewicht stack is het makkelijk om nieuwe ontwikkelaars aan het projectteam toe te voegen

Verbeterpunten

- Benodigde tijd voor bouwen
- Preview functie bij contentmanagement voor beheerders

Meer weten?

Ben je geïnteresseerd in de aanpak van Gatsby.js en benieuwd naar wat Gatsby.js voor jou en je bedrijf kan doen? Bel of stuur een mail. Wij staan altijd klaar om je te helpen!