In het verleden werkten alle websites eigenlijk grotendeels op dezelfde manier: de bezoeker vraagt een pagina op en de server verwerkt het verzoek en geeft een HTML pagina terug. Zodra een bezoeker op een link klikt om naar een andere pagina te navigeren, begint deze cyclus weer van voor af aan. Opnieuw verwerkt de server het verzoek en de nieuwe pagina wordt geladen.

Herlaad enkel wat nodig is

Hoewel deze aanpak prima werkt, is het niet erg efficient. Wanneer je een website bekijkt zal je zien dat sommige onderdelen op alle pagina’s terugkomen. Denk bijvoorbeeld aan het menu, het bedrijfslogo of het blok onderaan de pagina’s waarin de contactgegevens staan.

Daarom is het tegenwoordig gebruikelijker om slechts dat gedeelte van de pagina te herladen dat nodig is om de actie van de gebruiker af te handelen. Dit zorgt ervoor dat pagina’s sneller laden en dit zorgt voor een betere gebruikservaring van de bezoekers.

Single page application

Wanneer we dit concept verder doortrekken komen we bij de definitie van een single page application (of kortweg, een SPA). Bij een SPA verwerkt de server de eerste keer dat de website of webapp wordt geopend het verzoek en geeft vervolgens de pagina weer. Wanneer de bezoeker nu door de website bladert wordt de pagina nooit meer zichtbaar herladen. Dit geeft de bezoeker het gevoel dat de website veel sneller en soepeler werkt.

Op de achtergrond wordt er echter nog steeds met de server gecommuniceerd, maar zoals in het voorbeeld waar we mee begonnen is dit enkel om op de achtergrond verzoeken te verwerken en af te handelen.

Gebruiksvriendelijkheid

Een single page application wordt gebouwd in Javascript. Het gemakkelijkste is om een Javascript framework te gebruiken (zoals bijvoorbeeld Vue) omdat dit out-of-the-box SPA ondersteuning biedt.

Bij het ontwikkelen van een SPA is het vanzelfsprekend om de gebruiksvriendelijkheid hoge prioriteit te geven. Immers, eerder pasten we Javascript toe om webapplicaties te voorzien van gebruiksgemak voor de bezoekers en nu ontwikkelen we de gehele applicatie in deze programmeertaal.

SPA: een nieuwe manier van programmeren

PLint-sites heeft onlangs een eerste SPA gelanceerd voor het project Solo Cooking. Dit is een project dat zich richt op mensen die vaak alleen eten en koken. We hebben een uitgebreide collectie recepten verzameld en een website gebouwd waar men deze recepten kan bekijken en inspiratie kan opdoen voor het koken.

We hebben deze website ontwikkeld met het Javascript framework Vue dat er heel erg op gericht is om SPA’s te bouwen.

SPA en SEO

Uiteraard is het voor een publieke website, die het vooral moet hebben van bezoekers die de website vinden via Google, van belang dat de SEO in orde is. In webdevelopment land is er echter nog wel wat onduidelijkheid over de mogelijkheid om een SPA goed te laten scoren in de zoekmachines. Hoewel het argument dat de content niet snel genoeg geladen kan worden om door de Google bot geïndexeerd te worden nu wel is ontkracht, is het mogelijk dat indexatie van een SPA toch minder snel gaat dan een traditionele website. Hier zijn diverse oplossingen en die zijn we met het Solo Cooking project nu zelf aan het onderzoeken.

Wordt vervolgd!

Wil je ondertussen zelf een SPA laten ontwikkelen? Laat het ons weten en neem contact met ons op. We bespreken graag vrijblijvend de mogelijkheden.