Onder de motorkap bij BUS
Development
Wim Ulkeman
24 / 10 / 2025
8 minuten
Het is toch maar een website? Hoe moeilijk kan het zijn! Projecten beginnen vaak in deze fase, totdat de lijnen worden uitgezet met wat met elkaar gekoppeld moet zijn… Voor BUS - Industrial Tools resulteerde de initiële wens uiteindelijk in een uitgebreid landschap waar we als Friday trots op zijn.
Het BUS - Industrial Tools landschap bestaat uit verschillende lagen en applicaties om data snel en betrouwbaar uit te wisselen tussen de verschillende systemen en de eindgebruikers. Maar waar zitten daarbij de uitdagingen, en hoe hebben we die ondervangen? Laten we dat per onderdeel bekijken.
BUS webshop
We beginnen met de webshop. Dit is het voornaamste contactpunt dat klanten online hebben met BUS - Industrial Tools. Een webshop zoals in dit geval heeft een aantal onderdelen welke van belang zijn:
- De gebruiker moet producten kunnen zien. Zonder producten, geen webshop.
- Een gebruiker moet zijn acties en gegevens in kunnen zien. We hebben een extranet omgeving nodig om historische en relevante data inzichtelijk te maken.
- De producten moeten besteld kunnen worden. Dat betekent dat we prijzen en voorraad inzichtelijk moeten kunnen maken.
- We moeten weten wie er uiteindelijk besteld heeft en of de gebruiker bevoegd is om te bestellen.
De eerste voelt als een no-brainer, maar het tweede en derde punt zijn onderdelen waar bij een B2B webshop zoals van BUS - Industrial Tools de complexiteit in zit. Prijzen zijn in dergelijke shops vaak klant afhankelijk, en binnen de klantorganisaties kunnen restricties van toepassing zijn die bepalen wie wat wel en niet mag binnen het platform.
De pijlers achter een snel en stabiel platform
Naast de functionele wensen voor dit onderdeel zijn er een aantal speerpunten van belang in de ontwikkeling ervan:
- Snelheid: De onderdelen moeten snel laden. Lang moeten wachten, bezorgt de gebruiker een negatieve ervaring. Dit is in het geval van klantspecifieke data een uitdaging omdat data (near) realtime bijgewerkt kan worden. Dat vereist onder andere een gerichte caching methodiek
- Voeding: Gegevens die de gebruiker ziet moet accuraat zijn. De prijzen en voorraad moeten kloppen, maar ook de rechten welke interacties op het platform toelaten, en de gegevens die de klant te zien krijgt.
- Stabiliteit: De processen die we uitvoeren op het platform moeten betrouwbaar zijn. Onderbrekingen in verbindingen zijn nooit volledig uit te sluiten, maar de inrichting kan daar wel op voorbereid zijn zodat we op dergelijke momenten niet de actie zelf verliezen, maar hooguit uitstellen.
Van visie naar uitvoering: de drie pijlers in actie
Voeding
Om de data in de frontend beschikbaar te maken, maken we gebruik van een headless oplossing. De voorkant van de website is de Nuxt applicatie, maar het beheer ervan gebeurt in een Shopware applicatie die met elkaar verbonden zijn.
Shopware biedt een goede start voor webshops met standaard functionaliteiten voor onderdelen als aparte verkoopkanalen, product- en categoriebeheer en extranet mogelijkheden.
Naast de standaard functionaliteit van Shopware waren we voor het platform verdere uitbreidingen nodig. Er is daarop actief gebruikgemaakt van plugins die binnen het Shopware ecosysteem worden aangeboden om functionaliteiten zoals uitgebreide rollen en rechten beheer aan te kunnen bieden.
De Shopware applicatie helpt ons daarmee op verschillende vlakken. Het helpt met de content en webshop voeding van de website, en geeft BUS - Industrial Tools de mogelijkheid om op klantniveau specifieke rollen, rechten en uitzonderingen te configureren.
Stabiliteit
Binnen een webshop zoals van BUS - Industrial Tools worden vele cruciale acties uitgevoerd. Van het bestellen van producten, tot het bijwerken van klantgegevens. Informatie binnen deze acties, of gehele acties zelf verliezen, is daarbij onacceptabel. Dat betekent dat het systeem robuust moet zijn en rekening moet houden met een verstoring in de volgende laag.
Om dit in het landschap van BUS - Industrial Tools op te vangen maken we gebruik van wachtrijen (queues). Door het toepassen van wachtrijen zorgen we ervoor dat we mogelijke verstoringen in andere lagen opvangen (in dat geval blijft het item open voor verwerking totdat de verstoring is verholpen), maar zorgen we er ook voor dat we belastingen van systemen beter kunnen reguleren.
In het landschap van BUS - Industrial Tools maken we gebruik van RabbitMQ voor het realiseren van deze wachtrij techniek.
Snelheid
Om de website goed te laten presteren hebben we aan de voorkant van de website (frontend) gebruikgemaakt van Nuxt.
Nuxt is Vue, maar met net dat beetje extra. Eigenlijk Vue+. Nuxt biedt een NodeJS server oplossing welke gebruikt kan worden om een Vue applicatie aan te bieden. Doordat Nuxt een eigen serverlaag faciliteert, verbetert het de website prestaties doordat het een gedeelte van het opbouwen van de website op zich neemt voordat de website daadwerkelijk door de gebruiker ingeladen wordt. Dit stelt ons onder andere in staat om effectiever gerichte caching toe te passen binnen de website.
Het gebruik van Vue heeft ons in staat gesteld om binnen frontend technieken modulair te werken en actief gebruik te maken van de laatste ontwikkelingen op het gebied van website optimalisaties. Een duidelijk merkbaar voordeel van de beschikbaarheid van Vue binnen Nuxt is het gebruik van het Single Page Application principe. Daarbij verversen we bij het navigeren tussen pagina’s alleen de wijzigende onderdelen. Dit zorgt voor een snelle en naadloze overgangservaring tussen pagina’s voor gebruikers van de BUS - Industrial Tools website.
Werken bij BUS
Voor BUS - Industrial Tools mochten we, naast de webshop, ook de vacaturewebsite Werken bij BUS realiseren. Daarbij speelden verschillende functionele vereisten een belangrijke rol:
- Gebruikers moeten de relevante openstaande vacatures kunnen zien. Deze vacatures moeten makkelijk en actueel gedeeld kunnen worden op verschillende kanalen.
- Gebruikers moeten kunnen reageren op vacatures. Daarbij moet extra informatie meegegeven kunnen worden.
De essentie van een sterke vacaturewebsite
Bij de ontwikkeling van de werken-bij website zijn, net als bij de webshop, ook een aantal belangrijke speerpunten vastgesteld:
- Snelheid: De pagina’s moeten snel laden om de gebruiker een prettige ervaring te geven wanneer deze over de website heen navigeert.
- Voeding: De getoonde vacatures moeten accuraat zijn, en een sollicitatie van een gebruiker moet correct doorkomen bij BUS - Industrial Tools.
Voeding
Voor het beschikbaar maken van de vacatures en algemene informatieve content, en het afhandelen van de sollicitaties, maken we gebruik van Shopware. Shopware geeft ons de mogelijkheid verschillende soorten landing en contentpagina’s aan te maken, waardoor we goed met 1 Shopware instantie meerdere en verschillende soorten kanalen kunnen bedienen.
Snelheid
Net als bij de webshop hebben we voor de Werken Bij website gekozen voor een toepassing van Nuxt voor de frontend. Omdat we zagen dat we in de praktijk veel van de technische functionaliteiten konden hergebruiken van de webshop, is de keuze gemaakt om dit in dezelfde Nuxt applicatie onder te brengen als de webshop. Hierdoor kunnen we snel schakelen op gebied van caching en wijzigingen in bijvoorbeeld de manier van routeren binnen de website.
Om de website snel te houden is binnen de Werken Bij website net als in de webshop een caching oplossing toegepast.
Binnen Friday maken we daarvoor veelal gebruik van Redis als caching oplossing. We hosten daarbij per applicatie één of meerdere Redis instanties om ons een grote controle te geven over wat we waar, wanneer en voor hoelang cachen. De toepassing van Redis helpt ons een cache strategie op maat in te zetten voor de klant.
In het geval van BUS - Industrial Tools hanteren we aparte Redis instanties voor de Webshop en de Werken Bij website, zodat een drukte op de ene website niet de andere website in de weg zit.
BUS Scan App
Het laatste onderdeel in de applicaties voor de klanten van BUS - Industrial Tools is de BUS Scan App. De BUS Scan App is een mobiele applicatie die gebruikers op een telefoon of tablet kunnen installeren, en gebruiken om onder andere snel aan voorraadbeheer te doen. Dit kan onder andere middels een barcode scanner welke geïntegreerd is in de app.
- De ontwikkeling van deze app stelde ons voor een aantal uitdagingen:
- Gebruikers moeten alleen in kunnen loggen als ze ook in de Webshop website kunnen inloggen.
- Gebruikers moeten de beschikking hebben over dezelfde producten als in de Webshop website.
- We willen op mobiel gebied een grote groep klanten kunnen bedienen.
Android / iOS
Een uitdaging in het bouwen van een app is om het aan te bieden op de twee grootste platformen voor mobiele apparatuur, Android en iOS. Daarbij wil je het liefst een opzet die nieuwe functionaliteiten tegelijkertijd voor beide platforms kan aanbieden.
Om aan deze wens te voldoen is ervoor gekozen de app te bouwen in React Native. React Native biedt de optie om 1 applicatie naar meerdere platformen uit te rollen. Het toepassen van React Native heeft ons daardoor in staat gesteld om zowel voor iOS als Android gebruikers een gelijkwaardige ervaring in functionaliteit en update snelheid aan te bieden.
Voeding
Voor de voeding van de data in de app konden we mooi inhaken op dezelfde gedachte als welke we reeds voor de webshop hadden. Headless integratie. Net als de webshop maken we in de app intensief gebruik van de API koppelingen die we in Shopware beschikbaar hebben om data op te halen en terug te sturen.
Door gebruik te maken van dezelfde Shopware instantie als de webshop zijn we gegarandeerd van dezelfde actuele producten en data als welke we in onze kanalen naar voren zien komen.
Koppelingen met bronsystemen
Tot dusver hebben we vooral gekeken naar wat de eindgebruiker ziet, maar waar komt deze data vandaan? Om de interactie met een webshop, vacature website en app te bedienen is er veel data nodig. Deze data wil je snel en gericht op kunnen halen. Om dit goed te reguleren is idealiter een laag nodig die systemen aan elkaar kan koppelen, zonder dat elk systeem een groot aantal wijzigingen in meerdere lagen teweegbrengt.
Bij BUS - Industrial Tools gebruiken wij Alumio als integratiesysteem tussen de website kant van het landschap, en de bronsystemen van BUS - Industrial Tools. Door de inzet van Alumio zijn we in staat om inzicht te houden in de data die wordt uitgewisseld tussen de systemen, en om data uit meerdere systemen te verzamelen voordat dit als eindset wordt doorgezet naar het uiteindelijke systeem.
Alumio geeft ons systemen onafhankelijk van elkaar te ontwikkelen en data uit te breiden of te muteren. Daarbij wordt er intensief gebruik gemaakt van de verschillende verbindingsmethoden welke Alumio biedt om, afhankelijk van de toepassing, data realtime of near realtime aan te bieden. Of juist om belasting van systemen op te vangen door processen in Alumio in een wachtrij op te kunnen nemen.
Het eindresultaat
Wanneer we al deze individuele inzichten combineren naar 1 geheel, dan krijgen we het onderstaande landschap als gevolg. Dat zijn uiteindelijk veel koppelingen. Maar juist door de aanpak van het per onderdeel terug redeneren wat we nodig zijn, kunnen we de overlap in benodigdheden bepalen en goed zien welke tools en technieken daarop het beste aansluiten.
DXP
Geen klant is hetzelfde, dat hebben we ook bij BUS - Industrial Tools weer ervaren. Daarom bieden wij als Friday ook geen standaard alles-in-één oplossing aan.
Binnen Friday geloven wij sterk in het principe “Het juiste gereedschap is het halve werk”. We hanteren een verscheidenheid aan frameworks, applicaties en technieken die we in kunnen zetten. Dat concept noemen wij bij Friday het Digital Experience Platform. Onze DXP gedachte stelt ons in staat om de combinatie van onderdelen te maken die voldoet aan de wensen en verwachtingen van onze klant.
Bij BUS - Industrial Tools hebben we optimaal gebruikgemaakt van het DXP om de juiste onderdelen zo effectief mogelijk aan elkaar te koppelen met een eindresultaat waar we trots op zijn!