Wij bouwen onze websites en web applicaties met Vue.js. Vue.js is een frontend web framework. Code-on heeft gekozen om websites en web applicaties voornamelijk met Vue en Nuxt te programmeren. Daardoor kan jouw website meer dan wanneer hij op traditionelere wijze is gemaakt.

Wat is Frontend? Wat zijn Single Page Applications (SPA)?

wagtail api voorbeeld

Tot niet zo lang geleden programmeerden we MPA (multi page applications). De server was verantwoordelijk voor het aanmaken van de HTML. Dit maakte pagina's vrij statisch en moelijk interactief te krijgen. Dat zit zo. Wanneer je een URL ingeeft krijgt een server de vraag voor een pagina. Dan ga je bij een MPA applicatie of website alle HTML aangereikt krijgen via de server die deze HTML als één bestand verzendt naar jouw browser. Bij SPA (single page application) zit dat anders. Hier gaan we de HTML niet langer op de server renderen. Nee, wanneer de je bij een SPA applicatie een URL ingeeft, gaat de browser een hele hoop JavaScript binnenhalen die op zijn beurt API gaat inlezen. De browser wordt nu via de JavaScript verantwoordelijk voor het aanmaken van de HTML.

Dit klinkt ingewikkeld. Gelukkig helpen onze tools bij deze opzet. Wij doen dit namelijk met een Frontend Framework VUE.JS en het broertje hiervan NUXT.JS.

Wat zijn de voordelen van Single Page Applications?

De HTML is niet langer statisch. Voordien werd deze aangemaakt door de server, maar nu doet jouw browser dat met behulp van een API en JavaScript. Dat geeft ons als webdevelopers veel meer vrijheid om de applicatie interactief te maken. Immers heel veel van de presentatie logica zit nu in het frontend gedeelte. Dat maakt dat wij jouw website of applicatie heel wat interactiever kunnen maken.

Naast het meer interactief maken kunnen we dankzij deze technologie nu ook veel meer gebruik maken van kleine web components die op zichzelf staan. Dat maakt het onderhoud en het maken van uitbreidingen toch wel makkelijker op lange termijn.

De major frontend frameworks zijn momenteel React, Vue.js en Svelte, Angular. Wij hebben gekozen voor VUE.js en het broertje hiervan Nuxt.js .

Waarom Vue en Nuxt?

Hoewel React en Angular eerder waren, heeft Vue voor ons toch wel wat voordelen. Het is alsof React en Angular een baby maakten die Vue heet :-). Vue is snel en heel populair onder developers. Waar React een veel moeilijkere leer curve heeft, ontbreekt het ook aan een standaard set onderdelen. Vue daarentegen is een compleet framework dat heel makkelijk is aan te leren voor de frontend webdeveloper. En makkelijk aan te leren betekent, dat het ook makkelijker is te onderhouden. Bovendien is Vue ook nog eens het snelste framework. Het heeft alle goede aspecten van de voorlopers overgenomen.

Wat is Nuxt.js? (Server side rendering)

Nuxt.js is Vue met extra's, die o.a. gericht zijn op SSR (Server Side Rendering). Dit is voornamelijk belangrijk voor de SEO van de website. Google is namelijk niet zo goed in het lezen van JavaScript interacties. Daarom moeten we de eerste pagina die je bezoekt terug op de oudere wijze renderen en op traditionele wijze aan de browser geven. Op het moment dat de browser dan die pagina ontvangen heeft, start de frontend technologie zoals met Vue te werken. Dit samen met een paar andere handige extra's is Nuxt.js.

Kost webdevelopment meer met Vue.js?

Ja en nee. Ontwikkelen met Vue is een andere aanpak dan bij traditionele websites en web applicaties. De kosten hangen eigenlijk sterk af van wat je ermee gaat doen. Doe je het net zo statisch als de vroegere websites, dan hoeft dat uiteraard niet meer te kosten. Echter de verleiding is er om veel meer te bouwen. Al die interacties op een pagina kosten uiteraard programmeurs uren. Het betekent ook dat er meer fout kan gaan en er meer getest moet worden. Maar als je het net zo simpel houdt als de oude MPA technieken, hoeft het ontwikkelen niet meer te kosten. Met als voordeel dat je applicatie veel sneller gaat zijn en klaar is voor de toekomst...!

Programmeren met Vue en Nuxt is voor ons een vat vol mogelijkheden en ideeën die we kunnen uitvoeren.

onno.png
Onno Timmerman Zaakvoerder