Een aantal maanden geleden is Nuxt 3 uitgekomen en inmiddels zijn we al volop aan de slag met Nuxt 3 in onze nieuwe projecten. Maar wat is dat nou, Nuxt 3? En wat zijn de voordelen ervan?
Een webapplicatie is opgebouwd uit drie verschillende lagen: structuur, styling en logica. De structuur van de webapplicatie wordt bepaald met HTML, de opmaak van de pagina wordt bepaald door CSS en de logica wordt uitgevoerd in Javascript. Om het ontwikkelen zo soepel en gestandaardiseerd mogelijk te maken wordt er vaak gebruik gemaakt van een framework. Hierdoor wordt het schrijven en onderhouden van de broncode gestandaardiseerd en beschikt de ontwikkelaar over meerdere hulpmiddelen.
De afgelopen jaren heeft CODE14 haar applicaties ontwikkeld met het Nuxt 2 framework, dat gebouwd is boven op het populaire Vue.js framework. Vue.js heeft zich in de loop van de jaren door ontwikkeld en is enige tijd geleden met Vue 3 uitgekomen. In navolging daarop heeft Nuxt zich ook ontwikkeld en de nieuwe versie van het framework uitgebracht: Nuxt 3.
Als organisatie probeert CODE14 met de nieuwste technologieën te ontwikkelen en daarom hebben we de ontwikkeling van Nuxt 3 dan ook op de voet gevolgd. Door het gebruik van Nuxt 3 kunnen ontwikkelaars profiteren van een aantal voordelen. In dit artikel ga ik voornamelijk in op de voordelen van onder andere Typescript, Vite en Hybrid rendering.
De ontwikkeling in de drie verschillende lagen (HTML, CSS en Javascript) gaat sneller dan dat de browsers van de eindgebruikers ondersteunen. Door zogeheten ‘bundlers’, die vaak gepaard gaan met een framework, is de ontwikkelaar vrij om gebruik te maken van de nieuwste technieken.
Nuxt 3 maakt voor het omzetten naar voor de browser leesbare code, gebruik van Vite. Hierdoor kunnen de ontwikkelaars gebruik maken van de nieuwste technieken zoals bijvoorbeeld Typescript. Bovendien is Vite sneller dan zijn voorganger.
Een van de nieuwere ontwikkelingen de laatste tijd is de verschuiving van Javascript naar Typescript. Tijdens het schrijven van Javascript wordt de ontwikkelaar weinig geholpen door programma's bij schrijven van de code.
Met Typescript kan de ontwikkelaar aangeven wat de datastructuur is waarmee gewerkt wordt, waardoor tijdens het ontwikkelen eventuele foutmeldingen boven water komen. Hierdoor kunnen ontwikkelaars van te voren deze bugs afvangen, wat resulteert in minder bugs op de live omgeving.
Bij het opstarten van een nieuwe applicatie is er altijd een overweging die van belang is: statische webpagina’s of server-side rendering. Hierover heeft collega Jordy ook een keer een Techspec opgenomen! Bij een statische applicatie wordt tijdens het bundelen elke pagina langsgelopen en opgeslagen als bestand. Hierdoor is het inladen van de pagina voor de eindgebruiker erg snel, wat ook bevordelijk is voor de SEO scores.
Echter wordt de pagina enkel geüpdatet bij het bundelen/uitrollen van de applicatie, niet ideaal dus wanneer de content regelmatig verandert. Denk hierbij aan prijzen, productbeschrijvingen of blog artikelen.
Wanneer de content regelmatig verandert wordt er gekozen voor server-side rendering. Dit houdt in dat de webpagina wordt gemaakt op het moment dat deze wordt opgevraagd in plaats van dat deze al klaar staat. Hierdoor is de content altijd up-to-date en kun je zelfs persoonsgebonden content tonen, maar is het inladen van de pagina wel langzamer. Met Nuxt 3 zit je niet meer gebonden aan één van de twee opties en kun je zelfs per pagina bepalen welke statisch beschikbaar moet zijn en welke op het moment van aanvragen moet worden gemaakt.
Kortom, voor ons als front-end ontwikkelaars dus hele fijne toevoegingen die ons werk net wat makkelijker maken! Wil jij nou ook werken met de allernieuwste technieken als front-end developer? We zijn nog op zoek naar nieuwe collega's! Check vooral eens de vacatures.
