Voor Open Olifant hebben we een asset management webapplicatie ontwikkeld (in Java Springboot en VUE.js) waarmee gebruikers, zoals woningbouwverenigingen, vastgoedeigenaren of serviceproviders, gedetailleerd kunnen filteren op data. Naarmate de functionaliteit werd uitgebreid met steeds meer filters, ontstonden echter prestatieproblemen die een effectieve oplossing vereisten. In dit artikel delen we de strategische en technische stappen die we hebben genomen om de applicatie weer optimaal te laten presteren.

Schermafbeelding met alle filters die tegelijkertijd op de activiteitenpagina worden toegepast: A. gebruiker bedrijf, B. onderhoudsbedrijf, C. activa type, D: datumbereik, E: activiteit categorie, F: activiteitstype, G. zoekreeks, H. paginanummering

Frontend Optimalisaties: snellere API-reacties met caching

Om de prestaties van de VUE.js frontend te verbeteren, hebben we cachingtechnieken geïmplementeerd door gebruik te maken van de axios-cache-interceptor module. Hiermee werden opgehaalde gegevens tijdelijk opgeslagen in de browsercache, gemarkeerd als 'Fresh'. Dit stelt de applicatie in staat om data snel uit de cache op te halen zonder netwerkverkeer, waardoor de gebruiker direct toegang heeft tot recente informatie.

Na enkele minuten worden deze gegevens als ‘Stale’ gemarkeerd. Op dat moment toont de applicatie de verouderde gegevens. Dit terwijl op de achtergrond nieuwe data wordt opgehaald, de pagina automatisch wordt ververst en de cache wordt bijgewerkt. 

Na een periode van twee dagen worden de gegevens als ‘Expired’ beschouwd en automatisch opnieuw opgehaald bij het netwerk. Dit slimme cachebeheer bood de applicatie niet alleen een responsieve ervaring, maar leverde ook een flinke winst op in laadsnelheid.

Backend optimalisaties: data-efficiëntie en slimme query’s

Om de prestaties van de backend te verbeteren, analyseerden we eerst de knelpunten in de database en API-calls. Via de monitoringstool ‘Sentry’ kregen we inzicht in de traagste query’s en met ‘JMeter’ hebben we testplannen opgesteld voor 100 gelijktijdige gebruikers. Dit gaf ons de nodige inzichten om de volgende optimalisaties door te voeren:

  • Optimalisatie van de database: we voegden indexen toe aan veel gebruikte tabellen en optimaliseerden datatypes. Met name bij tekstkolommen om zoekopdrachten te versnellen. Dit resulteerde direct in snellere reacties bij complexe filterfuncties.
    ‍
  • Efficiëntie van authenticatie: we ontdekten dat een logmethode in de authenticatielogica veel tijd kostte wanneer honderden aanvragen tegelijk binnenkwamen. Door de overstap naar een cache-service werd deze bottleneck aanzienlijk verminderd.
    ‍
  • Vervangen van Modelmapper: de model-mapping-bibliotheek bleek inefficiënt bij grote hoeveelheden data. Door over te stappen naar Mapstruct, een andere, lichtere mappingstructuur, behaalden we een prestatieverbetering van bijna 50% bij dataverzoeken.
    ‍
  • Slimme filtering: onze filters stonden gebruikers toe om gegevens te sorteren op jaar- en datumbereik. Door soms direct naar het jaar te filteren in plaats van een datumbereik te hanteren, konden we aanzienlijk tijd winnen: zeker voor historische data. Het toevoegen van een jaarindex leverde een extra versnelling op.
    ‍
  • Herstructurering van entiteiten en oplossing van N+1-query probleem: relaties tussen entiteiten werden herzien en onnodige koppelingen werden verwijderd. Het N+1-query probleem, waarbij ‘lazy loading’ soms voor vertragingen zorgde, werd aangepakt door dit type alleen toe te passen op essentiële attributen.
    ‍
  • Slimme rapportage-oplossingen: in plaats van voor elke rapportaanvraag de volledige live-database te doorzoeken, creëerden we een ‘Lookup table’ voor specifieke gegevens, wat het aantal vereiste bewerkingen verminderde.
    ‍
  • Inzet van native queries: enkele op maat gemaakte service-aanroepen werden vanuit Hibernate omgezet naar native queries om zo het aantal joins te beperken, wat de reactietijd van met name tellingen drastisch versnelde.

Resultaten en Conclusie

Onze optimalisaties hebben aanzienlijke prestatiewinsten opgeleverd: ruim 50% van de API-calls werd met meer dan 80% versneld. De activiteiten- en analysepagina's boekten zelfs een verbetering van meer dan 90%.

Deze combinatie van frontend, backend en database-optimalisaties heeft geleid tot een vlottere en efficiëntere gebruikerservaring. Het project toont de waarde van een doordachte aanpak waarbij zowel technische verbeteringen als de gebruikerservaring centraal staan. En het benadrukt het belang van grondige monitoring en slimme keuzes in architectuur en databeheer.

Ervaar jij performance problemen met je applicatie?

Neem dan contact met ons op via telefoonnummer 085-00 473 57 of stuur een e-mail aan info@wearebold.digital.

Toon contactformulier

Vraag nu de whitepaper aan via onderstaand formulier

Bedankt voor jouw bericht!
Oops! Something went wrong while submitting the form.