Veel van onze moderne applicaties hebben allemaal een ding gemeen, een visuele interface waar gebruikers mee communiceren. Maar wat vaak nog veel interessanter is, is het verhaal wat op de achtergrond wordt verteld.
In deze wereld zwerft er heel veel "onzichtbare" code of software rond, van simpele contact gegevens communiceren via email tot aan complexe automatische incasso's uitvoeren en microservices die berekeningen maken voor welk product weer ingekocht moet worden op basis van een algoritme. Dit allemaal zonder dat we het merken of dit direct via een design zichtbaar is.

 

Backend en Frontend

Tijdens een kijkje onder de "microscoop" om het maar zo te zeggen kom je al snel twee termen tegen. De "backend" en de "frontend". Stiekem staat het al in de naam want de backend zorgt voor de logica aan de achterkant en de frontend op de voorkant.

Dit verschil kan je als harde scheidingslijn zien maar in de praktijk blijkt dit iets grijzer, hier zo meteen meer over.
Met de backend bedoelen we eigenlijk alles wat achter een website of app hangt. Dit zijn dingen zoals de database, de server en de logica van de (web)app. Een database heeft bijvoorbeeld als functie het op slaan van je raad het al... Data! Dit zijn dingen zoals login gegevens, factuur gegevens tot aan je GPS coördinaten van je Strava PR/ beste segment.

Eigenlijk is het tegenwoordig bijna vanzelf sprekend om een backend te hebben.
Er gebeurt hier namelijk veel van de magie, denk aan de beveiliging, het opslaan van data en de verbinding van functie naar functie. De backend is in de praktijk onzichtbaar voor eindgebruikers. Desondanks is het een enorm belangrijk onderdeel voor de werking en beveiliging van een website of app. Zonder backend blijft er een mooi plaatje over maar dan wel zonder functies.

Terwijl de backend niet zichtbaar is staat de frontend in tegenstelling recht in de spotlight! Met frontend bedoelen we alles waar de gebruiker mee communiceert/ wat de gebruiker ziet. Van de knoppen en web pagina's tot aan de checkbox voor het akkoord gaan met de voorwaarden. Zelfs de winkelwagen en afbeeldingen behoren tot de frontend. De frontend is dus zichtbaar maar door de technologieen die worden gebruikt is het niet mogelijk om complexe logica uit te voeren. Dit komt omdat het niet direct kan communiceren met bijv. een database.

Tegenwoordig is de lijn iets onduidelijker door bijvoorbeeld de Client side SPA's (Single Page Applications). Deze applicaties zijn volledig aan de kant van de bezoeker ingeladen, er komt dus na de eerste verbinding geen extra verbinding meer van de server. Vervolgens door middel van fetch requests komt er nieuwe data van uit de database binnen. Je zou kunnen zeggen dat een SPA dus ook een backend functie heeft. Om toch een grens te trekken is in dit geval functie van de backend nog steeds apart, de database is nu de backend want hier wordt nog steeds alle data in opgeslagen. Daarnaast communiceert de SPA niet direct met de database maar zit een extra (verborgen, backend) laag tussen, dit heeft ook weer een deftige term die je misschien wel eens hebt gehoord. A.P.I. Om dit blog overzichtelijk te houden slaan wij die even over.

 

Op naar een praktisch voorbeeld

Dit verhaal is tot dus verre vrij abstract. Laten we het in een praktisch voorbeeld plaatsen, de auto! Als je een auto ziet, er in stapt en het stuur aanraakt kan je nog niet direct rijden, dus dan spreken wij over de frontend van de auto. Wat er op de achtergrond gebeurd is dat de motor draait tijdens het gas geven, de wielen bewegen tijdens het sturen en de boordcomputer in de gaten houdt of ABS ingeschakeld moet worden. Hoewel verantwoordelijk voor het rijden, onzichtbaar en enorm belangrijk zou een auto met alleen een backend niet praktisch zijn. Voor het sturen zul je bijvoorbeeld zelf de wielen moeten draaien en de ABS? Dat ben jij. Omgekeerd geld dit ook voor een auto met alleen een frontend. Ziet er mooi uit, maar door het ontbreken van een motor rijdt deze niet, misschien door het duwen krijg je de auto vooruit maar daarnaast zit je stuur ook niet gekoppeld aan je wielen.

 

Een echt stukje backend werk, de motor! Als je aan het rijden bent krijg je naast het toerental en evt. geluid er weinig van mee. Je zou kunnen zeggen dat dit een "onzichtbaar" deel is van je auto.

 

Inmiddels niet meer zo onzichtbaar

Het geheim van de onzichtbare code is bekend! Nu weet je wat het verschil is tussen de front en backend. Maar, wat kan je met deze kennis doen? Een goed voorbeeld is beter communiceren met het team van developers. Tijdens de ontwikkeling wordt er namelijk duidelijk onderscheid gemaakt tussen de twee "kanten". Wil je bijvoorbeeld iets in de database regelen dan is dit een aanpassing in de backend.
Terwijl een kleur veranderen juist weer werk is voor de frontend. Door in meetings hier open en transparant over te communiceren komen jij en het ontwikkelingsteam meer te weten over wat je precies voor aanpassing wilt, is het bijvoorbeeld echt alleen de kleur wijzigen (frontend) of moet dit alleen gebeuren als een betaling mislukt (frontend en backend). Een duidelijker afgesproken ontwikkelingsdoel zorgt voor minder verwarring en discussies. Minder verwarring en discussies zorgt uiteindelijk voor minder minder aanpassingen en zo ook een verhoogde ontwikkelingssnelheid. Alleen maar voordelen dus! Denk volgende keer eens voor de grap na over wat er allemaal gebeurt op het moment dat je een tikkie betaald. (Hint: Is het "bedankt" scherm wat je ziet alleen een aanpassing aan de frontend of hangt hier ook een backend verificatie aanvast?)