Romke van der Meulen

Een tijdje geleden hebben we een nieuwe versie van ons klantportaal MyVevida live gezet. Deze update is het resultaat van meer dan twee jaar werk, waarin we MyVevida hebben omgebouwd naar een Single Page App. Nu die klus eindelijk is geklaard, wil ik even de tijd nemen om te vertellen hoe we zover zijn gekomen. Ik ben namelijk best trots. Niet alleen op het eindproduct, maar vooral ook op hoe we het hele proces hebben aangepakt.

Wat voor app zei je?

Een Single Page App is een website waarbij je een set HTML en JavaScript downloadt zodra je de website bezoekt. Daarna worden alle pagina’s en gegevens direct in je browser opgebouwd. Gmail is hiervan een bekend voorbeeld, net als ons webmail programma. Dat verschilt van standaard websites, waarbij de pagina en gegevens worden opgebouwd op een server en daarna naar je browser worden opgestuurd.

Een Single Page App heeft aan het begin meer tijd nodig om te laden, maar is daarna enorm snel omdat je kunt navigeren zonder telkens hele pagina’s van de server op te vragen. Een Single Page App is dus enorm geschikt voor websites die zich gedragen als een soort desktopprogramma, waarbij je werkt met veel gegevens en functies. Een standaard website is beter in het communiceren van informatie, aangezien de bezoeker niet lang hoeft te wachten voordat de eerste pagina wordt getoond.

Onze aanpak

Aan het begin van het proces stonden we voor een keuze: bouwen we in één keer een compleet nieuwe versie van MyVevida in JavaScript of vervangen we stukje bij beetje alle onderdelen van MyVevida, waarbij de oude en nieuwe versies naast elkaar werken?

We kozen er uiteindelijk voor om onderdelen stapsgewijs te vervangen en tussendoor live te zetten. Dit had als voordeel dat eventuele bugs sneller werden gevonden en we altijd bij konden blijven met aanpassingen en fixes aan de code die nog niet was omgebouwd. Er zijn bovendien veel risico’s als je een website in een keer probeert om te bouwen: het project wordt snel te groot, kost te veel tijd, en mislukt hierdoor soms faliekant. Dat zie je vaak gebeuren bij ICT-projecten bij de overheid (en bij de overheid begint het nu ook te dagen dat stapsgewijs ombouwen een veel veiligere aanpak is).

Nu hadden we een JavaScript framework nodig dat ons zou ondersteunen bij dit stapsgewijs ombouwen. Na een vergelijking van diverse JavaScript frameworks viel onze keuze op Aurelia. Dit framework maakt het simpel om losse onderdelen op een pagina met JavaScript te bouwen terwijl de rest van de pagina nog gewoon van de server komt.

En toen waren we er klaar voor. We begonnen onderdelen om te bouwen: het overzicht van FTP-gebruikers, het overzicht van databases, van e-mailadressen, enzovoort. Soms werden meerdere onderdelen tegelijk live gezet, soms een enkele. Heel soms kregen we te horen dat er een bug bestond in de nieuwe versie en losten we dat direct op, maar verder was er weinig verschil. Het enige wat onze klanten misschien merkten is dat de JavaScript-versies van onderdelen wat meer tijd nodig hadden om te laden dan de rest van de pagina. Om dat duidelijk te maken heeft Tim van het Vevida logo een animatie gemaakt die we weergeven terwijl een onderdeel aan het laden is:

Een animatie van het Vevida logo

Trots op ons werk

Nu hebben we dus elk onderdeel vervangen en de laatste stap gezet om te zorgen dat MyVevida helemaal in je browser draait. We hebben rustig de tijd genomen om zorgvuldig te werk te gaan. En het resultaat mag er dan ook zijn.

De kwaliteit van de code is sterk verbeterd ten opzichte van de oude versie. Ik ben bijzonder trots op de enorme test suite die we tijdens het ontwikkelen hebben geschreven. Zoals uit mijn eerdere posts over Protractor en Karma wel blijkt is dat niet zonder vallen of opstaan gegaan. Maar nu is de hele test suite stabiel en dekt het alle code die we hebben geschreven.

Een grafiek die laat zien dat het totaal aantal tests over de loop van het project gestegen is tot bijna 800 tests

De X-as toont de voortschrijdende ontwikkelversies, de Y-as het totaal aantal tests (blauw voor geslaagde tests, rood voor mislukte, geel voor genegeerd)

Ook ben ik trots op de moderne technieken die we tijdens het ontwikkelen hebben aangeleerd en toegepast. De nieuwe versie van MyVevida gebruikt allerlei hippe ES6 JavaScript en nieuwe HTML uit de Living HTML Standard. Het is een interessant proces geweest om te leren hoe je deze nieuwste technieken kunt gebruiken en toch oudere browsers kunt ondersteunen. Helaas gebruikt een behoorlijk deel van onze gebruikers nog steeds Internet Explorer, al wordt deze browser al een tijdje niet meer verder ontwikkeld en is end-of-life voor Internet Explorer aangekondigd.

Maar waar ik bovenal trots op ben is hoe weinig ernstige bugs er zijn opgetreden. Het is bijna onvermijdelijk dat je als ontwikkelaar dingen over het hoofd ziet wanneer je nieuwe functies bouwt of bestaande functies aanpast. Maar tijdens het gehele proces waarin MyVevida werd omgebouwd is de website nooit onbruikbaar geweest. Voor het volledig ombouwen van een applicatie is dat best indrukwekkend.

En nu?

Nu kunnen we eindelijk profiteren van de voordelen die een moderne Single Page App ons biedt. Zo is het nu een stuk makkelijker om de toegankelijkheid en de usability van MyVevida te verbeteren, aangezien we complete controle over de HTML en JavaScript hebben. Daar gaan we de komende tijd in investeren. Verder ontwikkelen we ook nieuwe functies waarover ik jullie nog even in spanning houd. Er staan in elk geval weer mooie dingen aan te komen.

Romke van der Meulen Code-goochelaar

“Ik ben developer bij Vevida. Elke dag leer ik nieuwe dingen over het ontwikkelen van webapps, en ik houd ervan die kennis weer te delen met anderen.”