Single Page Applications

Zoals de cursusnaam zegt gaan we in dit opleidingsonderdeel dieper ingaan op web frameworks. We gaan voornamelijk kijken naar het meest gebruikte Single Page Applications framework namelijk React.js (door facebook). Er zijn nog vele andere SPA-frameworks zoals Angular (door Google) en Vue.js. Deze frameworks laten het toe om eenvoudig uitgebreidere applicaties te maken dan met gewone JavaScript en jQuery.

Voordat we verder gaan met SPAs, gaan we even terug in de tijd voordat SPAs bestonden. In het verleden werden pagina's nog volledig opgebouwd op de server zelf. Zo had je bijvoorbeeld PHP of node.js in combinatie met Express en een view framework (zie webontwikkeling). In deze traditionele aanpak bezocht de gebruiker een URL om een pagina in te laden en werd het opbouwen van de pagina voornamelijk op de server zelf gedaan. Elke nieuwe pagina die de gebruiker wou bezoeken had dus ook een nieuwe GET request nodig. JavaScript werd toen voornamelijk gebruikt voor simpele animaties en interacties of geavanceerde styling die niet met CSS alleen te doen was. Hiervoor was de JavaScript library jQuery uiterst geschikt.

Bij single page applicaties gebeurt dit op een hele andere manier. De focus wordt verlegd van de server naar de client. De gebruiker bezoekt maar 1 URL en krijgt maar 1 HTML-bestand terug met bijbehorende JavaScript files. Nadat deze allemaal ingeladen zijn wordt de pagina getoond aan de gebruiker en worden alle andere pagina's volledig opgebouwd vanuit JavaScript. Alles voor het tonen van pagina's zit dus volledig vervat in die gedownloade JavaScript bestanden. Uiteraard hebben deze pagina's nog externe data nodig. Deze worden volledig via API calls (via AJAX) vanuit de client naar een server uitgevoerd. Als je bijvoorbeeld een lijst van boeken zou willen tonen vanuit je SPA, zal deze een API call doen naar de boeken API en zal het renderen (opbouwen) van de pagina volledig in je browser verlopen via JavaScript.