Kaj Rietberg

Mountainbike en Front-end enthousiast

Mijn beeld van het JavaScript framework Vue

Datum geplaatst:

Een Vue instance is de root van de applicatie. Deze wordt gemaakt door een opties object er aan te koppelen. Hierdoor heeft de instance verschillende mogelijkheden om data te tonen en acties te ondergaan. Middels de el optie koppel je de instance aan een HTML element. De el krijgt het id of class van het HTML element.

Een van de opties van de instance is de data property. Dit is de data die je wilt tonen in je HTML. Dit kan data zijn die jezelf toevoegt in de data property of die je ophaalt vanuit een API. Middels een JavaScript expression kan je de data tonen in de HTML. DE data bevat dus de variabele waarden die je wilt tonen in je HTML template.

Aan de Vue instance kan je ook een methods property toevoegen waarin je JavaScript methods kan toevoegen die bijvoorbeeld op een v-on:click uitgevoerd wordt. Dit zorgt dus voor het dynamisch maken van je website.

Daarnaast is er nog een computed property waarmee je bijvoorbeeld verschillende onderdelen kan samenvoegen tot 1 titel. Voordeel van computed properties is dat ze gecached worden.

Bij componenten heb je ook nog props, deze zorgen er voor dat het component weet welke data vanuit een hoger gelegen component doorgegeven worden.

Vue directives

  • v-bind plakt een attribute, zoals src, aan een expression. Zo kan je dit ook doen voor class, title, href, alt, etc. Bij src kan je gebruiken v-bind:src=. Dat kan je afkorten naar :src=.
  • v-if reageert er op of iets true is en anders wordt de v-else-if of uiteindelijk de v-else getoond.
  • v-show toont de data als het true is en anders komt er een display: none; op.
  • v-for toont data uit een array om er een lijst van te maken. Het is dan wel handig om een v-bind:key te doen zodat de applicatie weet om welke het gaat.
  • v-on:naarwathierstaat luistert naar wat achter de : staat. Bijvoorbeeld v-on:click.
  • Data kan je ook binden aan een class of een style attribute
  • v-model zorgt voor een 2-wegs data binding. Hierdoor kan data gekoppeld worden aan een template en andersom.

Components

Componenten bouw je om te hergebruiken. Zo maak je iets 1x en kan je het op meerdere plekken in je applicatie aanroepen. In een component is de data property een functie, hierdoor blijft de data binnen het component, het data object wordt ge-returned. Via props wordt data vanuit de parent naar het child (component) gebracht. De props worden benoemd in het component zodat deze weet wat die kan verwachten.

Vue project

Om een Vue project te starten kan je gebruik maken van de Vue CLI of de Vue UI tools. De laatste is een UI getoont via de webbrowser die je een project laat maken met daarbij de functionaliteiten die je graag wilt hebben. Deze kan in het Nederlands.

Naast het opstarten van een project met bovenstaande kan je ook Vue aanroepen in je HTML pagina en kan je werken met Vue.

Vue router

Vue router zorgt er voor dat je de juiste pagina kan bezoeken in een Vue web applicatie.

Virtual DOM

Virtual DOM is een beschrijving van alles wat op dit moment in de DOM zichtbaar zou moeten zijn. In applicaties die erg veel DOM wijzigingen doen is dat handig omdat niet alles telkens opnieuw gerenderd hoeft te worden in je DOM. De virtual DOM wordt telkens bijgehouden bij data wijzigingen en dan wordt gekeken of de echte DOM verschillen heeft met de virtual DOM die de echte DOM beschrijft. En die verschillen worden dan bijgewerkt in de echte DOM. Met dank aan Joel Kuijten voor de omschrijving.

Vue werkt met een Virtual DOM omdat het naar het idee van de makers sneller is dan manipulaties direct op de DOM.

Vue en Accessibility

Vue bestaat voor een groot deel uit HTML elementen, dus gebruik de juiste semantische HTML tags. Gebruik je webdev tools om te kijken of de accessibility van je website klopt. Daar test je site met een screenreader en ga er door heen met toetsenbord zodat je zeker weet of je het goed gedaan hebt.

Vue en SEO

Search Engine Optimization wordt gebruikt om een web-app of website hoog in de hoogmachine te laten eindigen. Hierdoor vinden mensen de app of site makkelijker. Een search bot van de zoekmachine scant een site en slaat deze informatie op in een database van de zoekmachine. Om er voor te zorgen dat een bot dit zo doet zodat dit het beste bij jouw site past en je de juiste bezoekers krijgt zijn er een aantal regels te volgen. Ik ga niet in op deze regels, hierover is meer dan genoeg geschreven o.a. kort bij Snipcart. Maar belangrijk bij het gebruik van een framework als Vue is dat je er aandacht voor hebt omdat het kan dat er nog geen html op je pagina te vinden is op het moment dat de bot op de site komt en dan wordt er geen info opgeslagen over jouw website.

Je kan er voor kiezen om gebruik te maken van Server Side Rendering waardoor de HTMl al klaar staat als de bot er over heen gaat. Ipv Server Side Rendering kan je ook gebruik maken van Pre-rendering. Maak je gebruik van webpack dan kan je de Prerendering SPA Plugin gebruiken. Daarnaast kan je ook gebruik maken van bijvoorbeeld een Vue framework als Nuxt JS. Deze heeft ingebouwd dat je de regels voor een goede SEO makkelijk kan implementeren, je kan het doen middels Server Side Rendering of Pre-rendering.

Links

Wil je reageren op dit bericht, hit me up on Linkedin of mail mij kaj@kajrietberg.nl.

Ik ben . Een Front-end enthousiast in Nederland. Ik bouw toekomstbestendige en onderhoudsvriendelijke websites en applicaties met HTML, CSS en JavaScript. Datavisualisaties is een onderwerp waar mijn interesse naar uitgaat.