Wat begon als een simpele websitebouwer voor nieuwbouwprojecten, groeide uit tot een volwaardig platform voor complete aanbodwebsites. De omslag begon met één module: het aanbodblok. Die bouwden en implementeerden we vanaf de grond op, zonder de bestaande werkwijze te verstoren. Daarna migreerden we het hele platform van Nuxt 2 naar Nuxt 3, met als resultaat: 400% snellere laadtijden, meer flexibiliteit, en een moderne basis voor toekomstige groei.
Aareon ontwikkelt digitale producten voor de vastgoedsector. Een van hun belangrijkste producten is Market Suite: een platform waarmee projectontwikkelaars en makelaars zelf websites kunnen maken voor nieuwbouwprojecten.
Oorspronkelijk was het de bedoeling dat Market Suite zou uitgroeien tot een platform waarin ook aanbod geïntegreerd kon worden. In de eerste versie was deze functionaliteit echter nog niet geïmplementeerd. De focus lag toen op het snel en eenvoudig lanceren van losse projectwebsites. De basis was dus gelegd, maar de technische uitbreiding naar een volwaardige aanbodmodule moest nog gerealiseerd worden.
Het Market Suite platform was gebouwd op Nuxt 2, een framework dat eind 2023 officieel end-of-life ging. Tegelijkertijd voldeed de bestaande structuur niet aan de vraag naar complexe aanbodweergave.
De uitdaging was dus tweeledig:
Hoe voeg je een volledig nieuwe module toe aan een bestaand platform zonder alles om te gooien?
Hoe migreer je datzelfde platform naar een modernere technische basis zonder klanten of snelheid te verliezen?
Daarbij was het belangrijk dat de gebruikers van MarketSuite zelf niets hoefden te veranderen in hun werkwijze. Alles moest vertrouwd blijven, maar tegelijk beter presteren.
We ontwierpen en implementeerden een nieuwe module waarmee klanten niet alleen projectpagina’s konden aanmaken, maar ook complete aanbodwebsites. Denk aan:
Favorieten.
Zoekfilters.
Zoekprofielen.
Objectdetails.
Door deze module is het platform geëvolueerd van simpele website builder naar volwaardige vastgoedoplossing. Het is inmiddels de kernfunctie van MarketSuite geworden.
Toen duidelijk werd dat Nuxt 2 niet langer ondersteund zou worden, hebben we het volledige platform gemigreerd naar Nuxt 3:
We creëerden een compleet nieuwe projectstructuur.
Alle componenten zijn opnieuw opgebouwd of herschreven.
Oude plug-ins zijn vervangen door moderne composition functions.
Vite is geïmplementeerd als build-tool voor snellere ontwikkeling.
Het resultaat: een platform dat 400% sneller laadt en veel stabieler draait.
Websites die gebouwd zijn op het Market Suite platform zijn:
MVA.nl
amsterdamwoont.nl
zuidoostwoont.nl
De resultaten spreken voor zich: een viervoudige snelheidswinst en een codebase die tien keer schoner is. Maar we laten liever de cijfers voor zich spreken:
Eigenschap | Nuxt 2 | Nuxt 3 | Verbetering |
|---|---|---|---|
Ingeladen assets | 6,2 MB | 3,9 MB | 1,6× minder datagebruik |
Laadtijd | 7,47 s | 1,60 s | 4,6× sneller |
Layout stabiliteit | 0,443 | 0,002 | 221× minder visuele verschuivingen |
Code duplicatie | 8,3% | 0,8% | 4× minder duplicatie |
Codekwaliteit (smells) | 191 | 40 | 10× schonere code |
Code duplicatie: Hoeveel code op meerdere plekken voorkomt. Minder duplicatie = makkelijker onderhoud.
Codekwaliteit (code smells): Aantal signalen van onlogische of rommelige code. Minder smells = betere leesbaarheid en minder fouten.
Ingeladen assets: Hoeveel MB aan bestanden wordt geladen. Minder assets = snellere site en minder dataverbruik.
Laadtijd (snelheid): Tijd tot de site volledig bruikbaar is. Sneller = betere gebruikerservaring en hogere conversie.
Layout stabiliteit (CLS): Hoeveel de layout verspringt bij laden. Minder shifts = rustigere en betrouwbaardere weergave.