Statische Front-end site: hogere kwaliteit en meer werkplezier

Op het vlak van ons werkproces zijn we erg leergierig en dagen we onszelf graag uit. Zo hebben we voor onze klanten een statische front-end-site geïntroduceerd. Wij leggen graag uit wat dit is en wat de voordelen hiervan zijn. 

Front- en back-end

Eerst iets over de techniek achter een website. Een site wordt opgebouwd met een deel front-end code (HTML, CSS en JavaScript) en een deel back-end code (C# ). Front-end is voor de voorkant, wat zich in browser afspeelt. Back-end is voor de achterkant: de server en de database. Vergelijk het met een auto: de front-end is alles wat je ziet, bijv. het buitenwerk of het stuur waar je aan draait. De back-end zorgt ervoor dat die zichtbare onderdelen ook daadwerkelijk iets doen, dat de auto bijv. kan rijden en sturen.

Statische front-end site

Beiden zijn dus essentieel voor een website, daarom is bij elke stap van de OTAP-methodiek (zie OTAP-principe onderaan) die wij volgen, zowel front- als back-end code nodig. Maar parallel aan het OTAP-proces, kun je ook al ergens de front-end tonen, puur ter demonstratie: een statische front-end site. Hier worden de onderdelen getoond met dummy data. Je kunt er zelf nog niets aanpassen of inrichten, alleen kijken naar de losse onderdelen (components), maar ook hoe die onderdelen een geheel gaan vormen op een pagina. Zeg maar: een niet-werkende auto, waar je al wel in kunt zitten. Je kunt aan het dashboard voelen en draaien aan het stuur, maar er gebeurt nog niks. 

Zo’n statische site biedt interessante voordelen:

• Kortere feedback-loop. Hoe eerder de designer en klant al tijdens het bouwen feedback kunnen geven hoe beter. De front-end kan direct op de statische site worden getoond, nog voordat de back-end is gemaakt en alles is klaargezet op de testomgeving.
• Een-op-een-vergelijking met design. Door de statische site op dezelfde manier en met dezelfde dummy-teksten op te bouwen als het design in Figma, kan beter worden gecontroleerd of het design gevolgd is.
• Automatisch worden Lighthouse tests uitgevoerd voor alle pagina’s op de statische site. Dit geeft in een vroeg stadium inzicht in verbeterpunten op het gebied van performance, toegankelijkheid en SEO. Lees in onze andere blog meer over waarom front-end performance steeds belangrijker wordt. 
• Geautomatiseerde tests kunnen eerder worden uitgeschreven door onze testers. Zij kunnen dit namelijk al doen op basis van de HTML op de statische site.
• Inzicht in waar een probleem zich bevindt: heeft dit te maken met integratie met de back-end code en het CMS of gaat het op de statische site ook al mis?

Hogere kwaliteit en meer werkplezier

Na zo’n anderhalf jaar werken met een statische omgeving weten wij in ieder geval zeker: dit willen we niet meer kwijt. Want naast de beschreven kwaliteitsverbetering, biedt het ons ook gewoon meer werkplezier en maakt het de samenwerking met elkaar en onze klanten een stuk soepeler! 

OTAP-principe:

Zoals meer bedrijven werken we bij Aviva volgens het OTAP-principe: een ontwikkelaar werkt aan een klantwebsite op zijn eigen computer, zijn Ontwikkelomgeving. Vervolgens wordt een versie van deze website met het achterliggende CMS (of eigenlijk DXP) beschikbaar gemaakt op een test-url: de Testomgeving. Hier wordt met automatische en handmatige tests door zowel onze testers als door de klant gecontroleerd of de kwaliteit goed is en of aan alle wensen is voldaan. Na eventuele verbeteringen wordt een versie (een release) op de Acceptatieomgeving gezet voor de laatste controle-stap. Deze omgeving lijkt qua inrichting zoveel mogelijk op de productie-omgeving en maakt daardoor een goede laatste check mogelijk. Indien door de klant goed bevonden, wordt deze laatste release naar de Productieomgeving “uitgerold”: de nieuwste versie staat live. Dit OTAP-proces zorgt ervoor dat je in control bent. Je houdt de kwaliteit hoog door te testen of alles naar wens is en geen bugs in de software zitten.