Groep van zeven personen spelen aan een tafel in Holland Casino

Holland Casino

Holland Casino: All-in op headless

Holland Casino, een van de bekendste entertainmentbedrijven van Nederland, heeft zijn digitale platform vernieuwd in samenwerking met Touchtribe. Om in de dynamische casinobranche te blijven excelleren, was het noodzakelijk om het digitale platform te moderniseren en optimaliseren met wendbaarheid en digitale efficiëntie als uitgangspunt. Deze ingrijpende verandering betrof de vestigingen website, werkenbij-website en corporate website. In deze case study gaan we dieper in op de achtergrond van dit project, de implementatie en de uiteindelijke resultaten.

Mobiele schermafbeelding van het Holland Casino platform
Corporate Website Holland Casino Groep landingspagina

Kernuitdagingen: CMS modernisering en efficiënt platformbeheer

Content Management System (CMS) Modernisering
De systemen die voorheen werden gebruikt - Playtech voor de vestigingen websites en Drupal voor de Corporate en Werken-bij websites - sloten niet meer aan bij de gewenste manier van werken. Playtech, primair een online casino software, bood beperkte CMS-functionaliteit, terwijl de gebruikte Drupal end-of-life was, wat betekende dat het noodzakelijk was te upgraden of over te stappen op een nieuwe oplossing. Daarnaast was er een wens voor decentraal contentbeheer.

Minimaliseren van platformbeheer
Met een interne infrastructuur op basis van AWS, was het voor Holland Casino belangrijk een architectuur te ontwikkelen die minimaal hosting onderhoud en infrastructuurbeheer vereiste. Uitgangspunt voor ontwikkeling van het platform was dat het interne AWS team niet belast werd met extra verantwoordelijkheden.

preview-functionaliteit content management beheer

De keuze voor Storyblok CMS

Om hun content management uitdaging aan te pakken, koos Holland Casino voor de headless CMS oplossing van Storyblok. Dit CMS maakt het mogelijk om content centraal te beheren, terwijl het flexibel genoeg is om content naar verschillende platforms te distribueren, zoals een corporate website, werkenbij website, en diverse vestigingen websites. Storyblok werd onder andere gekozen vanwege de preview-functionaliteit, waarmee contentmanagers hun wijzigingen direct op de website kunnen zien.

Bewegend beeld van een croupier in een casino, met schermen van de holland casino website.

Gatsby Framework: Optimale snelheid en klantbeleving

Om een uitzonderlijke digitale klantervaring te garanderen, is snelheid cruciaal. Iedere Holland Casino vestiging heeft een eigen website waar speluitleg, evenementenkalenders en restaurant menu’s te vinden zijn. Daarnaast is het ook mogelijk om poker reserveringen toe te voegen en  reserveringsmogelijkheden. Om de websites en content zo snel mogelijk te kunnen serveren is voor static site generation gekozen. Het Gatsby framework, gebaseerd op React, kwam hiervoor als de ideale keuze naar voren. Gatsby genereert een statisch pakketje HTML-, CSS- en JavaScript-bestanden die zeer snel worden geladen. Alle content wordt vooraf gegenereerd, waardoor er niets meer gegenereerd hoeft te worden bij het opvragen van een webpagina.

Balans tussen statisch en dynamisch

Een dynamische website biedt flexibiliteit, maar het gebruik van statische content resulteert in snellere laadtijden. Met Gatsby's statische benadering moest er een oplossing worden gevonden voor previews van content. Hoewel er een kleine vertraging is bij het bekijken van draft content, werd dit als een aanvaardbaar compromis beschouwd.

Figma design elementen en symbolen van het Holland Casino design

Design-system voor consistentie

Om een consistente gebruikerservaring op iedere website van Holland Casino te waarborgen, is een design-system geïntroduceerd. Het design-system maakt efficiënt gebruik van het framework over alle websites heen. De controle en het beheer van het design ligt bij het designteam. Per website is een thema configuratie opgezet voor verschillende segmenten

Samen met Holland Casino denken wij altijd na over innovatie, ook binnen de codebase. Zo zijn wij nu bezig met het implementeren van een gegenereerd design system op basis van design tokens. Dit zorgt voor consistentie en een goede samenwerking met design.

Linda van Dijk, Frontend Developer bij Touchtribe
Holland Casino medewerkers op de werkvloer

Cloud-based infrastructuur en automatisering

Om het AWS-team van Holland Casino te ontlasten, werd gekozen voor een cloud-gebaseerde infrastructuur met Amazon Web Services (AWS) voor hosting. De content voor de verschillende websites wordt geplaatst op de S3 buckets van Holland Casino. Bij het gebruik van technologieën die gebruik maken van server-side rendering wordt de laatste versie van content bij het opvragen van de pagina gegenereerd. 

Omdat Holland Casino Gatsby inzet, wat zorgt voor static site generation, wordt de laatste content vanuit Storyblok niet opgehaald bij het opvragen van een pagina. Voor deze uitdaging wordt er gebruikgemaakt van Pipedream. Pipedream is een laagdrempelige oplossing die minimale programmering vereist om API's te koppelen. Storyblok heeft de mogelijkheid om een notificatie door middel van een webhook te krijgen op het moment dat er content gepubliceerd wordt. Deze notificatie komt binnen bij Pipedream, waardoor er vervolgens een rebuild en nieuwe deployment van de website gedaan wordt. Hierdoor is de website bijgewerkt met de laatste versie van de Storyblok content.

Decentraal beheer en Mono Repository

Om efficiëntie te verhogen, is het beheer van het CMS bij Holland Casino naar binnen gebracht, waardoor het team dit makkelijk kan overnemen. Touchtribe integreert compleet met de IT omgeving van Holland  Casino, zodat ontwikkeling soepel verloopt. Een uitdaging ontstond in het beheren van verschillende websites vanuit een enkele codebase. In eerste instantie werd gekeken naar een gedeelde Gatsby configuratie, maar het differentiëren tussen de drie websites (Corporate, Werken-bij, en vestiging) bleek lastig. Dit werd opgelost door het ontwerpen van vier losse packages in een Github mono repository.

De samenvoeging van meerdere codebases in een mono repository heeft de samenwerking en het beheer van code gestroomlijnd, wat op zijn beurt het onderhoud van de infrastructuur efficiënter maakt. Bovendien heeft deze aanpak bijgedragen aan een snellere uitrolsnelheid en publicatie van website-inhoud.

Toekomstige innovaties

Holland Casino blijft innoveren, met aandacht voor zowel technologie als klantbeleving. Er wordt gekeken naar de integratie van content via kiosken in het casino door middel van een webapp die gekoppeld is met Storyblok. Ook is er aandacht voor de voortdurende optimalisatie van de vestigingenwebsite, met de nadruk op functionaliteiten en klantbehoeften. met deze ontwikkelingen plaatst Holland Casino zich aan de voorhoede van technologische vernieuwing in de entertainmentsector.

Toe aan headless?

Wilt u ook gebruikmaken van alle voordelen die headless development te bieden heeft? Bel Gert op 06-55716180. Of laat een bericht achter via het formulier en we nemen binnen 1 werkdag contact met u op.