Van spaghetti-code naar een performante PWA: de digitale transformatie van Pizza Hut

Het webplatform van Pizza Hut had nood aan een grondige update waardoor ze terechtkwamen bij Tailr. Die optimalisatie was nodig: jarenlang was er telkens nieuwe code op oude codebases geschreven, wat leidde tot niet-duurzame legacy- en spaghetti-code. De spaghetti-code had een negatieve invloed op de snelheid en performance van de website. Daardoor was een grondige update van de backend noodzakelijk.

Wij spraken met Toon Verwerft, senior developer & architect bij Tailr voor de technische kant van het project en met Bart Van Dyck, e-commerce manager bij Top Brands, om de omkadering beter te begrijpen.

Toon gaat meteen van start: “We hadden het project overgenomen van een voorgaande softwarepartner van Top Brands. Aanvankelijk onderhielden we voornamelijk dit platform, maar na een tijdje ontstond de nood aan nieuwe features en designs. Toen merkten we dat het platform tegen zijn limieten aanliep. De opzet van de codebase maakte het moeilijk om nieuwe features uit te werken: telkens we iets aan de code wilden aanpassen, kon er elders onverwacht een fout opduiken. De code was niet goed geschreven, waardoor het een hele uitdaging - en niet wenselijk was - om daarop verder te werken.”

“Wanneer we een project starten of overnemen, beginnen we altijd met een audit. Je moet weten waaraan je start: wat is de huidige situatie van het webplatform en welke punten moeten we beter aanpakken?”, gaat Toon verder. “Het was een hele waslijst aan verbeterpunten,” vervolgt Bart, “Tailr presenteerde ons die op een erg overzichtelijke manier. Ze hadden netjes de pro’s en contra’s van het webplatform voor ons opgesomd. Die analyse heeft ons overtuigd om – naast een grondige update van het bestaande platform – ook voor een PWA te kiezen.”

Eerst was er dus de audit, daarna zijn ze gestart met het bouwen aan de nieuwe website. “We kozen ervoor om de backend (de business logica) van de front-end (de visualisatie van de website) te scheiden dankzij een API,” licht Toon toe. Dit betekent dat ze de logica en functionaliteit van de server hebben gestructureerd en geïmplementeerd als een aparte backend Application Programming Interface (API). De front-end kan daardoor alle data uit de API halen en die vervolgens visualiseren.

Die manier van werken maakt de codebase heel modulair. Zo is het eenvoudiger om de verscheidene delen van het systeem afzonderlijk te testen, ontwikkelen en onderhouden. Plus, een API is herbruikbaar door verschillende systemen en applicaties. Daardoor breid je die gemakkelijk uit naar een mobiele app en verloopt de integratie met andere systemen soepel. Dit versnelt het development en optimaliseert de consistentie.

“Als front-end framework kozen we voor NEXT.js: een open-source framework voor React. Daarmee bouwden we de gebruikersinterface. NEXT.js heeft tal van leuke features voor het design van websites. Het heeft ook grote voordelen voor de snelheid van jouw website,” vervolgt Toon. “Maar nog belangrijker: met een minimum aan effort zet je dit framework om naar een PWA ofwel een Progressive Web App.” En ook dit bleek uit de audit: dat Pizza Hut baat heeft bij zo’n PWA.

Dankzij de bijzondere bedrijfsstructuur van Pizza Hut drong de nood aan een PWA zich op. Je hebt ongelooflijk veel verschillende filialen die lokaal verankerd zijn. Vaak bestellen veel mensen ook hun lunch of avondeten op een gelijkaardig moment, waardoor je piekbelastingen van jouw systemen hebt. Plus: je kan zelf jouw pizza samenstellen. Er moeten dus veel losse extra’s en diverse configuraties pizza aangeboden worden die effectief ook zo uit de oven moeten komen.

Op dat vlak scoren PWA’s goed. Ze bieden een rijke gebruikerservaring met snelle laadtijden. Daarnaast presteren PWA’s goed op mobiele apparaten. Je kan ze installeren op het startscherm van jouw smartphone of tablet. Een ander groot voordeel is dat PWA’s volledig indexeerbare HTML-pagina’s bieden: dit draagt bij aan snelle laadtijden en biedt daarnaast ook SEO-voordelen.

“De grootste uitdaging aan dit project was dat de webshop de hele tijd online moest blijven. Plus, je verstuurt geen bestellingen vanaf één centraal punt, zoals dat bij e-commerce vaak het geval is. Elke vestiging verstuurt de bestellingen lokaal. Er waren dus een groot aantal kritieke verbindingen die in stand moesten blijven,” legt Bart uit.

“Het is als een grote puzzel waaraan je start,” illustreert Toon. “Je brengt eerst alle stukjes van de website in kaart, bijvoorbeeld het onderdeel adressen, het winkelmandje, de checkout … Vervolgens moet je nagaan wat de onderlinge afhankelijkheden daartussen zijn. Je ordent ze chronologisch zodat de stukken website met afhankelijkheden eerst in orde worden gezet.”

Dit huzarenstuk hebben ze slim aangepakt. “We zijn gestart met alle bestaande contentblokken in de bestaande website in React te maken. Vervolgens namen we die React-blokken mee en staken we die in Next.js, wat heel eenvoudig verloopt want Next.js is een React-framework.”

“Eerlijkheidshalve ben ik geen fan van grote reeksen software releases,” drukt Bart uit, “maar in dit project hadden we geen keuze. De shop moest online blijven, dus we vertrouwden erop dat de oude stukken spaghetti-code stelselmatig werden vervangen door de nieuwe front-end componenten die communiceerden met de nieuwe API. Het was spannend, maar het was duidelijk dat het harde werk loonde: de releases verliepen stuk voor stuk vlot!”

“Het was een goede denkoefening of we een native applicatie wilden of een PWA. Dankzij de audit was het snel duidelijk dat een PWA de ideale oplossing was voor Pizza Hut,” vertrouwt Bart ons toe.

“Al hebben we het uiteraard eerst wel op veilig gespeeld: we kozen voor beperkte functionaliteiten in het begin. Plus: we deden een soft launch zonder al te veel lawaai te maken. Je wil in het begin op zeker spelen dat alles goed werkt, dus we communiceerden er enkel over via onze eigen platformen.”

Op de vraag of de PWA een succes is, antwoordt Bart snel: “de PWA is populair in gebruik en we zien de adoptiecijfers stelselmatig groeien. Het is dus zeker een succes!”

Nu de PWA een succes blijkt te zijn, zullen er binnenkort extra functionaliteiten aan worden toegevoegd. Meer nog: bij Pizza Hut willen ze de mogelijkheden van geïntegreerde loyaliteitsprogramma’s verder onderzoeken. En de geprefereerde partner daarvoor? Tailr!

Wanneer we vragen wat de succesingrediënten zijn voor duurzame, lange partnerships, antwoordt Bart kordaat: “Goede communicatielijnen en de nodige flexibiliteit naar planning en timings! Het feit dat we al zo lang samenwerken, is eigenlijk al een goed rapport op zich. We zijn heel tevreden over het geleverde werk en merken een zeer positieve impact op onze sales. Het traject heeft een hele tijd geduurd, maar was het wachten waard.”

Bij Tailr zijn we trots op onze maatwerk softwareprojecten. Onze experten houden van software development dat niet binnen een standaard softwarepakket past, zoals Pizza Hut. Of zoals Toon het stelt: “Op zich is het eigenlijk een eenvoudige webshop, maar een aantal zaken maakten het een heel complex project. Zoals de pizza configurator, de online bestellingen naar de kassa van de winkel sturen, het syncen met de bereidingstijd van de pizza, de bezorger volgen … Dan moet je out-of-the-box oplossingen bedenken!”

Heeft jouw website nood aan een audit? Heb je nood aan nieuwe functionaliteiten? Of ben je benieuwd om de mogelijkheden van een PWA voor jouw business te onderzoeken? Aarzel niet om onze experten te contacteren.