Vue & Nuxt webdesign voor jouw frontend project

Wij bouwen onze websites en web applicaties soms 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)?

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 moeilijk 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 web development meer met Vue.js?

Ons ervaren team heeft gewerkt met zowel Vue.js en Nuxt.js als met HTMX en Alpine.js. Hoewel we erg houden van Vue.js + Nuxt hebben we geconstateerd dat de benodigde ontwikkeltijd voor projecten met zowel een Django-backend als een Vue.js-frontend doorgaans met 20% a 40% toeneemt. Dit komt voornamelijk doordat we de code op meerdere plekken moeten creëren en onderhouden. Dikwijls moeten er minstens 2 developers werken aan 1 project. Daarnaast merken wij dat het onderhoud van deze applicaties meer werk is dan bij het normale MPA ontwikkelen.

Echter, met de inzet van HTMX en Alpine.js, of zelfs pure JavaScript, kunnen we vaak vergelijkbare resultaten bereiken. Dit heeft ons doen realiseren dat de technologiekeuze inderdaad sterk afhankelijk is van de complexiteit van het project. Voor sommige projecten is de voorkeur voor Vue.js en Nuxt.js duidelijk, maar er zijn ook veel situaties waarin HTMX een aantrekkelijk alternatief kan zijn.

We hebben ook geconstateerd dat het kiezen van de juiste technologie niet alleen een kwestie is van ontwikkeltijd en code-onderhoud. Andere factoren, zoals de prestaties van de applicatie, de gebruikerservaring en in het bijzonder de schaalbaarheid, spelen een cruciale rol. Met name schaalbaarheid is een belangrijke overweging bij het kiezen tussen client-side en server-side rendering technologieën, aangezien dit de capaciteit van de applicatie om te groeien en te presteren onder verhoogde belasting beïnvloedt.

Daarom moeten we bij elk project zorgvuldig de voor- en nadelen van elke technologie afwegen. Soms betekent dit dat we de extra tijd nemen om Vue.js en Nuxt.js te implementeren, terwijl we in andere gevallen de voorkeur geven aan de eenvoud en efficiëntie van HTMX en Alpine.js

Dus wanneer je diensten van een web development bedrijf zoekt neem dan zeker in de twee mogelijkheden in overweging. We kunnen hier uitgebreid over spreken.

MPA strikes back!

Wil je weten wat HTMX is?