Webapps optimaliseren met React

Veel van onze developers zitten als consultant op project. Ferme projecten ook, en daar doen ze ferme dingen. Dat geldt ook voor Bjarne Verdonck die als React developer bij Ypto werkt, de IT-afdeling achter de schermen van NMBS. Hij optimaliseert er verschillende webapplicaties, en heeft daar zo zijn eigen aanpak voor om het efficiënt te laten verlopen. Een korte dive-in in Bjarne’s werkomgeving React!

Bjarne Verdonck (React webdeveloper): “Als webdeveloper specialiseer ik in React, een front-end framework waarmee je user interfaces kan schrijven in Javascript. Eerder werkte ik bij Ypto op het eDrive-project, een applicatie voor data die toepassing heeft op treinbestuurders, waar ook vier andere RMDY-developers op werken. Nu werk ik op de “Assist” applicatie, een tool voor NMBS-agenten die aanvragen opvolgen van onder meer rolstoelgebruikers en groepsreservaties.”

Efficiënter aan de slag met de Assist app

Reizigers met een beperking kunnen sinds begin dit jaar via de Assist applicatie hun reis op voorhand aangeven bij NMBS, inclusief een mogelijke hulpvraag. Ook grote(re) groepen van vb. scholen of jeugdverenigingen kunnen een reservatie boeken, dat verloopt via de website.

Deze twee soorten aanvragen volgt NMBS op via hun eigen interne versie van de Assist applicatie. Voorheen verliep dat via een webapplicatie die zowel mobiel als op desktop kon gebruikt worden. Maar bij de optimalisaties van de back-end, werd er ook gekozen voor een gloednieuwe interne mobiele app voor de mensen ‘in het veld’.

De webapplicatie blijft echter behouden voor opvolging in de kantoren van onder meer het afdrukken van de reservatiestickers.

“De webapplicatie bestaat dus al, gekoppeld aan een back-end. Alleen draaien er te veel acties in de applicatie zelf, waardoor die log en traag werkt. Veel van de berekeningen zouden in de back-end zelf moeten gebeuren – en dus wordt er nu geïnvesteerd in een nieuwe back-endomgeving die zoveel mogelijk berekeningen weghaalt van de front-end. Die back-end schrijft RMDY-collega Luis en ik implementeer die in de juiste web-appomgeving.”

“Van die optimalisaties merkt de eindgebruiker niets, gezien dat een aparte applicatie is. De NMBS-agenten merken het zeker wel want dankzij de nieuwe back-end gaat alles veel sneller en vlotter!”

Bjarne Verdonck, React Developer bij RMDY

Hoe optimaliseer je in React?

Om de webapp te optimaliseren en de structuur van de nieuwe back-end te implementeren, gebruikt Bjarne het framework React. Hij bekijkt de bestaande code, ziet waar het beter en efficiënter kan en ‘koppelt’ die dan met de nieuwe back-end. 

Bjarne: “De efficiëntie van performantie zit in het zo duidelijk mogelijk code (her)schrijven. Zo heb je veel componenten die bij elke datawijziging opnieuw renderen en getoond worden in de front-end. Bijvoorbeeld: als een achternaam van een reservatie gewijzigd wordt, wordt nu heel de reservatie inclusief bevestigingsnummer, data, aantal personen, … opnieuw gerenderd. Die gegevens altijd opnieuw laden, maakt de app net zo traag. Door componenten uit elkaar te halen en een nieuwe structuur te implementeren, rendert in dit geval enkel nog de component van de achternaam bij een aanpassing aan dat veld. Resultaat? Minder grote rendering en dus snellere laadtijd.

En hoe doe je dat dan concreet?

Bjarne: “Momenteel staat de volledige applicatie lokaal op mijn computer, die verbinding kan maken met de testomgeving. Ik heb dus volledig ‘vrij spel’ om te coderen, optimaliseren en dingen uit te testen zonder enig gevolg voor andere developers of de productieomgeving. Dat doe ik in het front-end framework React, wat de mogelijkheid geeft om het visuele, alle interactie met knoppen, hoe lijsten eruitzien, … te kunnen schrijven in Javascript en Typescript. Zonder React zou je dat in HTML of CSS moeten schrijven, achteraf nog Javascript bij toevoegen voor de effectieve data en acties – het is een heel gedoe.”

“Concreet bekijk ik eerst wat de huidige code allemaal doet, wat weg kan of in een andere component kan en of er dan problemen ontstaan (dependencies tussen code). Ik ga dus code lezen, ontcijferen, optimaliseren en structureren en dàn start ik aan de implementatie van de nieuwe back-endomgeving. Een werkje dat best even duurt, maar een immense invloed heeft op de performantie en werking van de webapp.”

Wat maakt React zo leuk?

Bjarne: “Het toffe aan React is dat je zelf je structuur kan kiezen, in tegenstelling tot bijvoorbeeld Angular. Bij React werk je veel vrijer: er zijn wat zaken voorgemaakt maar je moet je niet houden aan een vast structuur. Dat vind ik een van de leukste manieren om te werken. Zo kan je in het team, per project goede afspraken maken en het meest efficiënt werken met een structuur waar je je comfortabel bij voelt.”

“Voor dit project heb ik zelf een structuur opgesteld waarvan ik merk dat die gewoon echt goed werkt. Zo heb ik bijvoorbeeld alle visuele componenten en interactiecomponenten opgesplitst – wat lang niet altijd het geval is. Zo kan je bij een bug gemakkelijker in het juiste mapje zoeken, is er per component (“mapje”) ook minder code te doorzoeken en verlies je dus minder tijd.

React binnen RMDY

Bjarne: “Ik vind React een top framework! Bij RMDY zijn er nu ook 2 nieuwe React-developers en onze interne CV-tool zal binnenkort herschreven worden in React. Ook zijn we bezig met een RMDY tech radar te schrijven in React (Next.js).

Thanks voor de verheldering Bjarne!
We kijken uit naar de verdere resultaten van de optimalisaties. 😉

Heb je ook code die wat opkuiswerk kan gebruiken?
Hit us up. 👇

Stuur ons een mailtje en
let’s talk