Vue.js - for folk flest

Vue.js er en av svært mange JavaScript-rammeverk/biblioteker som har dukket opp de siste årene for å gjøre utviklingen av god frontend-kode mer problemfri og oversiktlig. I hovedsak så tilbyr disse rammeverkene ekstra funksjonalitet til klientsiden som ikke er innebygd, og gode konsepter for modularitet og organisering av kode. Behovet for, og nytteverdien av, rammeverkene kommer av at en del klassiske serverside-oppgaver nå også kan utføres på frontend. Eksempler på dette er «routing» og bundling av statiske templates, tilstandsendringer og at en god del forretningslogikk nå skrives på frontend. Dette reduserer byrden på serveren og fører til raskere og mer smidige webapplikasjoner med gode brukeropplevelser.


Vertica har vært storbrukere av AngularJS, men vi vurderer nå en overgang til et mer moderne rammeverk. I den anledning har vi sett oss ut Vue.js, som er et relativt ferskt, men stadig mer populært tilskudd til JS-verden (første release i 2014). Jeg har gjennom den siste tiden brukt litt tid på å sette meg inn i det og få et overblikk over både «the good and the bad». Her skriver jeg litt om hvorfor jeg anser Vue som et aktuelt rammeverk og sammenligner Vue med «konkurrentene» uten å gå dypt inn i det tekniske.

Først er det kanskje relevant å zoome ut litt og se på det større landskapet av JS-biblioteker og rammeverk der ute. Det finnes såpass mange at det er vanskelig å ha helt kontrollen på hvem som er mest aktuelle i dag.

Kort oppsummert, her er noen av de største rammeverkene i dag:

  • React.js – JS-bibliotek, kjent for modellen med at «alt er JavaScript». JavaScript og HTML blandes i et eget komponentspråk JSX. For tiden det raskest voksende og mest populære.
  • Angular –  svært populært rammeverk med lang fartstid. De siste versjoner kjører på TypeScript
  • Diverse middels store som Ember.js, Backbone.js og Meteor.js med til dels… liknende bruksområder

Både Angular og React har en stor finansiell backing. AngularJS og de påfølgende versjonene Angular/Angular2 (++) er vedlikeholdt av Google-teamet, mens React.js kommer fra Facebook.

Vue.js er på sin side relativt nytt (første release i 2014) og uten noen tilsvarende kjempeaktører bak seg. Vue har derimot hatt en sterk vekst den siste tiden, spesielt etter lansering av Vue 2. Og interessen er stor i utviklermiljøet:

Hentet fra https://stateofjs.com/2017/front-end/results/

Så hva er Vue?

Vue er et rammeverk for JavaScript, som forenkler prosessen med å lage webapplikasjoner. Det følger MVVM (Model-View-ViewModel)-arkitekturen.

Vue har følgende kjennetegnende egenskaper:

  • Deklarativ rendering av data i DOM med reaktivitetet (databinding tar for seg oppdatering av DOM)
  • Et komponent-basert system som skiller ut funksjonalitet i delkomponenter (gjør det enkelt å sette opp en helt egen struktur) med dataflyt på tvers av disse

Den grunnleggende enheten i en Vue-applikasjon er Vue-instansen. Når man oppretter en Vue-instans fester den til seg et objekt som inneholder f. eks datamodell, templates, metoder osv. 

"Hello World" i Vue.js

Hvorfor Vue?

Etter min mening er det flere gode grunner til å vurdere Vue fremfor andre rammeverk. Eller, kanskje å anvende Vue i ditt prosjekt sammen med andre ting?

Det mange trekker frem, selv om det kanskje ikke alene er en god nok grunn til å velge Vue, er simplisiteten. Vue er fremfor alt enkelt å ta i bruk og lære, og med støtte av en utmerket dokumentasjon så er det sjeldent nødvendig å oppsøke andre fora for å få hjelp. I tillegg, har man bakgrunn som enten Angular- eller React-utvikler, vil man kjenne seg igjen i mye. Databinding med tekstinterpolasjon minner sterkt om Angular. I tillegg har Vue på lik måte som i Angular direktiver. «v-for»-direktivet i Vue brukes på samme måte som «ng-repeat» i Angular for å rendre en liste, og det er bare et av mange eksempler.

Komponent-oppdelingen har også mye til felles med React. Vue kan brukes sammen med JSX dersom man ønsker det. For min egen del liker jeg å separere HTML og JavaScript.

Så langt synes jeg derimot Vue har vært enklere å lære seg og jeg setter pris på at det legges mindre føringer på struktur. Til sammenlikning kan noen oppfatte Angular som litt spissere i kantene her. Der Angular (i hvert fall versjon 1) ber deg dele opp koden i kontrollere, services og andre forhåndsdefinerte strukturer kan alt i Vue føres tilbake Vue-instans og de komponentene man selv utformer.

Både Angular og React er også kjent for en litt brattere læringskurve. Fordelen med Angular sin fremgangsmåte er derimot at man får en god oppdeling av kode basert på funksjonalitet. Mye pga Angular sin innebygde støtte for dependency-injections.  Dette er et behov ved utvikling av større single page-applications, og er en av årsakene til at Angular er såpass utbredt i store prosjekter. Ikke nødvendigvis gitt at modularitet er noe som mangler i Vue, men friheten er større.

«I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?» - Evan You, utvikleren av Vue.js

(Evan You jobbet tidligere i Angular-teamet, så det er ikke tilfeldig at det er mange likheter med Angular)

En annen ting er at Vue er raskt. Det kan vises i en benchmark-performance, der responstiden til Vue sammenlignes med andre rammeverk:

Figur hentet fra Evan You (https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8)

Resultatene er basert på denne dataen fra Stefan Krause

Det som vises i grafen er et totalmål av responstiden på en rekke standard-operasjoner i nettleseren, der en lavere score er mer gunstig.

Størrelsen på kildekoden er også imponerende liten. Vue 2.0 alene uten biblioteker tar opp kun 23 kb. Forskjellene er ikke er markante når man sammenligner med «konkurrenter» som React og Angular, men verdt å merke seg.

Illustrasjonen er hentet fra https://blog.xebia.fr/2016/11/22/vue-js-vue-js-un-challengeur-de-poids/

Hvor stor betydning disse resultatene har i det store bildet kan kanskje diskuteres, men de viser i hvert fall at Vue ikke kommer til kort når det gjelder ytelse.

Vue er for den saks skyld også helt ok å bruke sammen med andre ting. Det er designet for å kunne implementeres etter frie rammer, og kan fint benyttes i delkomponenter av en allerede eksisterende applikasjon uten å kreve mye omorganisering. Man kan f. eks bruke Vue til å utforme grensesnittet (Vue har et stort bibliotek til grensensitt-komponenter og animasjoner) og etterlate modellen og API-interaksjon til Angular eller React om man så skulle ønske. Vue har ikke noen standard måte å definere hvordan man skal håndtere server-kommunikasjon, men det finnes moduler som f. eks Vue-resource og andre Ajax-plugins som gjør dette helt uproblematisk. Axios er også et populært alternativ.

Kom i gang med Vue

Dersom du er nysgjerrig på å lære mer om Vue anbefaler å jeg gå igjennom det som står i VueJS.org og lese dokumentasjonen. Det kreves forholdsvis lite før du kan få sett opp en enkel applikasjon. Du kan også følge brukeren Vuemastery på Twitter, som pleier å legge ut tutorials og tips til bruk av Vue. For å få en mer «full-fledged» applikasjon oppe og går anbefales følgende tilleggspakker:

  • Vuex
  • Vue-router
  • Vue-resource

Her finner du en liste over flere ressurser.

God koding!