Projecten
2017

3D configurator — codebase verbeteren

Refactor van grote delen van de codebase voor leesbaarheid, performance en complexe 3D-berekeningen.

Angular 5TypeScriptWebGLHTML5 CanvasSpring BootJava 8

Een 3D-configurator stelt klanten in staat om in een browser een product visueel samen te stellen, met directe feedback in een interactieve 3D-omgeving. Klinkt prachtig, en is het ook — totdat je in de codebase duikt die over jaren is gegroeid onder voortdurend verschuivende eisen. Op dat moment kwam ik in dit project binnen.

Mijn opdracht was niet zozeer 'nieuwe features' maar 'maak het weer werkbaar'. Grote delen van de codebase moesten leesbaarder en performanter worden, zodat het team weer met vertrouwen wijzigingen kon doorvoeren en de configurator op realistische datasets soepel bleef draaien.

Refactoren in een levende codebase betekent in de praktijk: kleine, veilige stappen, met goede tests als vangnet en met heel duidelijke afspraken over wat in deze sprint wel en niet wijzigt. Ik heb componentgrenzen verlegd, gedeelde state opgeschoond, dode code verwijderd en zware berekeningen losgekoppeld van rendering. Dat laatste gaf direct merkbare winst in vloeiendheid.

Het inhoudelijk meest interessante stuk was collision detection tussen 3D-elementen in een WebGL-omgeving. In een puur component-gedreven canvassituatie binnen Angular betekent dat: scenegraph-achtig denken in een framework dat daar van huis uit niet voor is gemaakt. We moesten zorgvuldig zijn met wanneer berekeningen plaatsvonden, hoe resultaten werden gecached en hoe we voorkwamen dat een rerender van een onschuldig component een hele 3D-stage opnieuw zou doorrekenen.

Voor de berekeningen zelf moest ik mij weer verdiepen in lineaire algebra, bounding volumes en spatial partitioning. Het is bevredigend werk: een goed gekozen datastructuur kan een berekening die eerst meetbaar haperde terugbrengen tot iets wat de gebruiker simpelweg niet meer opmerkt.

Wat dit project me opleverde, naast diepere kennis van WebGL en complexe Angular-componenten, was vooral een sterker gevoel voor wanneer een refactor stopt 'goed genoeg' te zijn en wanneer je doorpakt om écht orde op zaken te stellen. Bij een lang lopende codebase is dat verschil vaak de grens tussen blijven hangen en weer vooruit kunnen.

Meer werk

Andere projecten