Vue.js – Et oppgjør med frontend-frykten

Det er i kodebobla jeg trives best. Etter 8 år som fullstack-utvikler var jeg likevel i ferd med å gli vekk fra frontend. Rammeverket Vue.js ble redningen. 

Av: Sverre Skuland, seniorkonsulent i Webstep

Jeg har aldri sett på meg selv som redd for å ta i frontend-kode. Som et resultat av dette har jeg fått mulighet til å jobbe i hele stacken. Både i backend, hvor jeg trives best, samt i mange forskjellige frontend-rammeverk. Angular, Angular.js, React, Svelte, jQuery, you name it. Derfor var det en liten overraskelse da jeg tok meg selv i å trekke meg bort fra frontend. Det er på backend jeg har utviklet meg mest de siste årene. Derfor er det også der jeg har klart å jobbe mest effektivt, og som konsulent er effektiv kvalitet helt sentralt.

Jeg tror de fleste vil være enig i at farten på utviklingen i frontend-økosystemet har vært utfordrende å følge med på. Til tross for at jeg har hatt mulighet til å jobbe med verktøyene har det føltes komfortabelt å skyve oppgavene over på kolleger, som har bedre innsikt og dermed kan løse oppgavene mer effektivt.

Det var frem til jeg, i forbindelse med oppstart i et nytt oppdrag, bestemte meg for å ta et oppgjør med denne frontend-frykten og lære meg Vue.js, skikkelig.

En naturlig utvidelse av tradisjonell webutvikling

Vue.js er et frontend-rammeverk som kan sammenliknes med React og Angular. Det er komponentbasert og bygget med full støtte for TypeScript (f.o.m. versjon 3.0). Vue skiller seg ut fra sine konkurrenter ved å være utviklet av en kjernegruppe frivillige utviklere mens React og Angular vedlikeholdes av henholdsvis Facebook og Google.

Som verktøy har Vue rykte på seg for å være lett å lære. Jeg syns det er vanskelig å ta stilling til dette utsagnet på vegne av alle utviklere i hele verden, men det stemmer godt overens med min opplevelse. Det føles som en naturlig, men samtidig mektig utvidelse av tradisjonell webutvikling. Syntaks for HTML, styling, og JavaScript er grunnleggende uforandret. Man får dog et fleksibelt og velfungerende tilskudd i markup-koden i form av direktiver for å gjøre HTMLen dynamisk basert på en reaktiv datamodell.

Kom i gang

Den offisielle dokumentasjonen til Vue anbefaler at man starter med et oppsett bestående av Visual Studio Code og utvidelsen “Volar”. WebStorm fra JetBrains fungerer også utmerket. For å sette opp et prosjekt trenger man kun å kjøre følgende på kommandolinje:

npm init vue@latest

(Forutsetter at man har npm av nyere versjon installert)

Man møtes da av en enkel oppstartsprosess. Deretter settes det opp et grunnleggende mal-prosjekt som demonstrerer mange av de mest sentrale og mest brukte konseptene som rammeverket byr på.

Man kan for eksempel umiddelbart merke seg at en komponent i Vue.js har tre seksjoner; <script />, <template />, og <style />. Vue-komponenter har altså en helt tydelig “separation of concerns”. I praksis er ingen av disse egentlig påkrevd, så det er helt mulig å ha komponenter uten script, style, og til og med uten markup (template). Alt etter hva behovet er. Styling kan forøvrig “scopes” til komponenten ved å legge på attributten “scoped” i style taggen. Dette gjør at man unngår krysskontaminering av stilsetting på tvers av komponenter.

Integrert og fokusert

Innebygde HTML-elementer som <input />, <textarea /> og <select />, kan binde verdiene sine opp ved hjelp av v-model-direktivet. Dette er et mønster for toveis-binding av tilstand i koden. Med det samme mønsteret håndterer man tilstand mellom sine egenutviklede komponenter. Denne filosofien er gjennomgående i Vue. Man forholder seg til sine egenutviklede komponenter på samme måte som alle andre DOM-elementer. Dette gjør at man føler seg umiddelbart komfortabel dersom man allerede har kunnskap om tradisjonell web-utvikling.

Vue-teamet har i de siste oppdateringene fokusert på å fjerne mye unødvendig boilerplate-kode. Man trenger for eksempel ikke å registrere en komponent før man tar den i bruk i markup. Det eneste man må gjøre er å importere .vue-filen hvor komponenten er definert, via en modul-import, så kan den brukes som en en hvilken som helst annen HTML-tag i templaten din. Trimming av denne typen boilerplate gjør at man som utvikler kan fokusere på koden som betyr noe.

Men hva med React?

Dersom man skal velge seg et verktøy for å bygge seg en app, er det kanskje fristende å velge React, da den for øyeblikket troner på toppen av listen over mest brukte frontend-rammeverk. Man kommer ikke unna at det finnes rikelig med kompetanse på React i markedet. Men det finnes flere gode grunner til å tenke seg om før man umiddelbart hopper på trenden. Ønsker man for eksempel å skrive JSX-kode? Kanskje ikke. Å hive seg rett ut på JSX-syntaks for noen som ikke er stødige på webutvikling kan bli en utfordring. I tillegg blir man underlagt Facebooks regime, noe som kanskje ikke er så fristende for alle.

Vue holder oss også mer i hånden når det kommer til valg av infrastruktur som tilstandshåndtering (Pinia), routing (Vue Router), testing (Vitest, Cypress) samt kodekvalitet og formatering (Prettier, ESLint). Velger man React må man oppsøke og ta stilling til valg av tilsvarende infrastruktur på egenhånd.

Perfekt for dem som starter på (nesten) bar bakke

Vue blir et utmerket valg dersom man som person, avdeling eller selskap føler seg litt akterutseilt på frontend. Om man for første gang skal begi seg ut på frontend på web, eller skal oppgradere fra en teknologi som for eksempel Angular.JS, jQuery, Knockout, Durandal e.l. så er Vue.js det perfekte alternativet. Utviklere vil kjapt kunne tilegne seg kunnskapen som trengs, og føle seg hjemme i verktøyet. Sammenlignet med andre frontend-rammeverk mener jeg at Vue.js også har den beste dokumentasjonen. Her er det mye gull å hente.

Så for dem som er som meg, og føler at frontend er litt skremmende, er Vue et utmerket springbrett for å komme seg opp og frem på web. Det har også god oppdrift i tech-miljøer rundt om i verden. Bruken øker kraftig internasjonalt, og i Stack Overflows årlige utviklerundersøkelse for 2021 havnet Vue.js på andreplass blant rammeverkene som utviklere ønsker å jobbe med.

Ønsker du å ta et oppgjør med din frontend-frykt, hvorfor ikke bruke Vue.js som ditt utgangspunkt?

Innlegget ble først publisert i Kode24, 2. mai 2022