Front-end udvikler og certificeret Hubspot CMS developer
Siden 2016 har Vue udviklet sig til at være en ny stor spiller inden for moderne JavaScript frameworks, hvor Angular og React tidligere har været de mest foretrukne. Vue beskriver sig selv som et progressiv JavaScript framework og kan bl.a. bruges til at lave moderne single-page applications også kaldet SPA.
Moderne JavaScripts frameworks
De mest populære moderne JavaScript frameworks har de sidste par år været Angular, React og Vue. En måde hvor man kan få et indtryk af populariteten af de forskellige frameworks, er at se på antallet af downloads frameworket via den populære package manager NPM. Hvis man ser på udviklingen af downloads af NPM packages, er Vue blevet mere og mere populær og er ca. lige så populær som Angular.
Angular
I documentation til Angular, beskrives frameworket som et application design framework, og en udviklingsplatform til at udvikle effektive og sofistikerede SPA’s. Udviklingen af frameworket er ledet af Google, og selve frameworket har generelt en meget mere fastlåst struktur i forhold til React og Vue.
React
JavaScript frameworket React er det mest populære af de tre frameworks. Det vedligeholdes bl.a. af Facebook, og beskriver sig selv meget simpelt, som et JavaScript bibliotek til at bygge user interfaces med. React sætter generelt meget få grænser, og man skal fra starten selv finde en måde hvorpå et udviklingsprojekt skal struktureres. Derudover er den funktionelle JavaScript kode og den strukturelle template markup i React blandet meget mere sammen end i de andre to framework, hvilket kan gøre koden i React mere uoverskueligt.
Vue
Som tidligere nævnt beskrives Vue i introduktionen som et progressive framework til at bygge user interfaces med. Vue er startet af Evan You og havde sin første release i februar 2014. Der er generelt mere struktur i framwork’et i forhold til React, men den er ikke lige så fastlåst som i Angular. Fx er den funktionelle JavaScript kode og template markup strukturen mere opdelt, hvilket er med til at gøre koden i Vue mere overskuelig. Generelt har Vue taget mange af de bedste ting fra både React og Angular.
Single-Page Application (SPA)
En single-page application kører på brugerens enhed i den browser hvor den tilgås, og stræber efter at efterligne brugen af et normalt program/app, der er installeret på din enhed. Dette gør, at hver side der tilgås ikke behøver at blive genindlæst, og at der opstår så lidt ventetid som muligt. Der hentes kun en side, og alt andet indhold hentes via JavaScript. Til opbygning af en SPA bruges typisk et af de førnævnte frameworks Angular, React eller Vue.
I modsætningen SPA er multiple-page application også kaldet MPA, den klassiske måde at udvikle på. I en multiple-page application indlæses hver enkelt side igen, når indholdet ændres.
Fordele og ulemper ved SPA
Inden man begynder at udvikle sin nye SPA, er det vigtig at vide hvilke fordele og ulemper der er ved denne måde at udvikle på.
Hastighed
Hastighed er en af de vigtigste grunde til at vælge at bruge SPA i forbindelse med et udviklingsprojekt. Som tidligere nævnt er det muligt at få SPA til at loade hurtigere end en klassisks MPA, da det ikke er nødvendigt at hente alt indhold på ny, hver gang en side skal opdateres med data.
Coupling
En anden fordel ved at udvikle en SPA er at front-end og back-end kan udvikles hver for sig. En SPA bruger API’er til at hente data, som kan vises i front-end, hvorimod at i en MPA er front-end og back-end mere afhængige af hinanden, og alt kode ligger normalt under et projekt.
Search Engine Optimization
En af de største ulemper ved en SPA, er at de ikke er så SEO venlige som en MPA. Dette skyldes hovedsageligt at en SPA køres via JavaScript, som de fleste søgemaskiner ikke understøtter. I en MPA kan hver enkelt side optimeres til hver deres keyword, og meta tags kan inkluderes på hver enkelt side, hvilket påvirker rangeringen hos Google positivt.
Sikkerhed
Som udgangspunkt vil en SPA kræve mindre tid at sikre, da det kun er hvert data endpoint, som skal beskyttes. Derimod vil den være mere udsat i forbindelse med hackerangreb end en MPA, da den hovedsageligt består af JavaScript kode, som ikke kompileres.
Udviklingsprocessen
En af fordelene i udviklingsprocessen ved en SPA, er at den samme kode kan genbruges flere steder. Derudover kan front-end kode og back-end kode adskilles og udvikles samtidig, hvilkes er med til at øge hastigheden på hele udviklingsprocessen.
Server-Side rendering af Single-Page Application (SSR)
Som tidligere nævnt køres en SPA i browseren, og alt indhold der vises på siden, bliver genereret i browseren. Det er dog også muligt at generere det meste af indholdet som HTML på serveren, og sende det direkte til browseren, hvorefter browseren kan opdaterer indholdet yderligere, afhængig af hvilken side der vises. Denne måde kaldes server-side rendering som forkortes SSR.
Nuxt
På deres hjemmeside kalder Nuxt sig for “The Intuitive Vue Framework”. Nuxt gør det muligt nemt og hurtigt at kører sit Vue udviklingsprojekt som SSR, og er den mest populære tilstand at kører Nuxt på. I SSR tilstand, sørger en Node.js server for at levere HTML til browseren, baseret på de Vue components der er oprettet i udviklingsprojektet. Ved at bruge Nuxt i SSR tilstand vil applikationen fungerer bedre SEO mæssigt, og brugeroplevelsen vil blive forbedret i forhold til en traditionel Vue SPA.
Hvorfor vælge Vue / Nuxt?
Vue / Nuxt er et oplagt valg i forbindelse med udvikling af et headless CMS. En af fordelene ved et headless CMS, er at ens website kan loade hurtigere end med et normalt CMS vil være i stand til. Samtidig kan man opdele back-end og front-end funktionaliteten, så de fungere mere uafhængig af hinanden.
