Nu frontend JavaScript frameworks steeds populairder blijven worden, waaronder ook het nieuwe Vue.js 3, is het nóg belangrijker om op de hoogte te blijven en alle nieuwe features te kennen.
In dit artikel bekijken we Vue.js 3 en alle nieuwe features. Deze laatste toevoegingen maken Vue.js nog robuuster, waardoor het een interessant framework is voor je volgende project. In dit artikel kijken we uitgebreid naar 10 dingen die je moeten weten over Vue.js en hoe dit framework je kan helpen om schaalbare en kwalitatieve frontend toepassingen te maken.
Ben je er klaar voor? Aan de slag dan!
Wat is Vue.js?
Evan You, de maker van Vue.js zegt het zo:
“Vue.js is een flexibele oplossing. Het is alleen maar een interface laag, zodat je het als lichte feature in pagina’s kan gebruiken, in plaats van een complete SPA.”
Hij wou een frontend framework maken dat net zo krachtig is als Angular, maar ook meer lichtgewicht en flexibeler, zonder alle plugins en concepten die bij Angular komen kijken.
Het resultaat is Vue.js, momenteel één van de meest populaire frontend frameworks.
Waarom developers Vue.js gebruiken
Verschillende redenen kunnen een developer aanzetten om voor een bepaalde technologie te kiezen. Laten we dus eerst kijken waarom wij denken dat je Vue.js zou moeten leren.
Om te beginnen is Vue.js één van de meest overzichtelijke frameworks, waar je meteen mee aan de slag kan, omdat het framework gebruikt maakt van JavaScript. Als je dus enige basiskennis van JavaScript hebt, kan je ook aan de slag met Vue.js.
De Vue CLI tool in combinatie met andere frontend development tools maakt het opzetten van Vue.js een fluitje van een cent. Standaard wordt het al opgezet met wat basisfuncties, maar je kan ook code bouwen dankzij DRY (Don’t Repeat Yourself) logica en structuur.
Vue.js heeft ook ingebouwde reactiviteit. Dat betekent dat de realtime functionaliteit die zo populair is op het Angular framework nu nog makkelijker te implementeren is via Vue.js. Zo kan je bijvoorbeeld eenvoudig een simpele directive zoals v-if gebruiken in je Vue.js toepassing.
Tijd om te kijken naar de voornaamste voordelen en nadelen van Vue.js.
Voordelen en nadelen van Vue.js
Vue.js is tegenwoordig het op één na meest populaire framework. Waarom zijn developers er zo enthousiast over? En waarom kiezen sommigen juist voor iets anders?
Vue.js voordelen
Laten we eerst naar de positieve kanten van Vue.js kijken.
Superklein
Vue.js heeft een minuscule bestandsgrootte van ongeveer 18 KB, wat veel kleiner is dan de meeste andere frameworks. Deze superkleine omvang zorgt ervoor dat Vue.js een positieve impact heeft op de SEO en User Experience van je frontend toepassing.
Leesbaarheid en onderdelen van één bestand
Vue.js gebruikt een architectuur met onderdelen, waarbij grotere stukken code worden opgebroken in kleinere delen. Daarnaast is alles in Vue.js een onderdeel, en wordt elk onderdeel geschreven met HTML, CSS en JavaScript, wat de eenvoud en leesbaarheid ten goede komt.
Goed tooling systeem
Vue.js biedt standaard ondersteuning voor allerlei development tools, met nagenoeg geen configuratie. Zo ondersteunt Vue.js tools als Babel en Webpack. Daarnaast is er unit testing beschikbaar, end-to-end testinglibraries, flexibele en eenvoudig te gebruiken routingsystemen, state manager, server-side rendering (SSRO) en nog veel meer.
Eenvoudig te gebruiken
Als je Vue.js al wel eens hebt gebruikt, weet je vast al dat het erg makkelijk te gebruiken is. De aanpak van webdevelopment wordt flink gemoderniseerd, waardoor het ook voor beginners eenvoudig is om er meteen mee aan de slag te gaan.
Vue.js nadelen
Naast de voordelen, is het ook belangrijk de nadelen van Vue.js te bekijken.
Complexiteit van reactiviteit
De implementatie van two-way binding in Vue.js is een handige manier om de onderdelen te beheren. Two-way binding gaat over het delen van data tussen een component class en het bijbehorende template, en is ontwikkeld zodat data die op één plek verandert, automatisch ook op alle andere plekken wordt aangepast.
Maar er is een probleem met de werking van deze reactiviteit, aangezien alleen die delen opnieuw worden bewerkt waarvan de data geactiveerd wordt. Het kan gebeuren dat het lezen van de data niet helemaal goed gaat, dus het is nodig dat je de data zo plat mogelijk maakt. Je kan alles lezen over dit probleem en de aanpak ervan op de website van Vue.js.
Taalbarrière
Aan het begin werd Vue.js vooral gebruikt door Chinese programmeurs, met grote Chinese bedrijven zoals Xiaomi en Alibaba die het framework populair maakten en voor vraag in de arbeidsmarkt zorgden. Maar door deze adoptie door relatief veel Chinese bedrijven, zijn veel forums, discussie-groepen en andere materialen voornamelijk in het Chinees, wat beperkend is voor developers die dit niet spreken.
Dit hoeft tegenwoordig geen probleem meer te zien, aangezien Vue.js inmiddels ondersteuning in allerlei talen biedt, maar er zijn zeker meer resources beschikbaar in sommige talen dan andere.
Risico op over-flexibiliteit
Zoals eerder gezegd is Vue.js erg flexibel en eenvoudig te gebruiken. Daarom kan het snel gebeuren dat je spaghetti code krijgt, aangezien iedereen in een team een andere mening kan hebben over hoe je een probleem moet aanpakken.
Bij de voordelen en nadelen hierboven heb je vast al gemerkt dat er features in Vue.js zitten die je fijner vindt dan andere.
10 dingen die je moet weten over Vue.js
Hieronder tien dingen over Vue.js die je moeten weten, en waarom.
Computed Properties
Een computed property is één van de belangrijkste features van Vue.js. Een computed property, oftewel een eigenschap waarmee je kan rekenen, maakt het mogelijk mogelijk om eigenschappen te maken die je kan aanpassen, manipuleren en die data weer kunnen geven op een leesbare en efficiënte manier.
Dit is vooral erg handig wanneer je veel kleine methods moet herhalen voor bijvoorbeeld opmaak, het veranderen van waarden, of een groot proces dat je moet kunnen activeren in bepaalde situaties.
Computed properties helpen je om efficiënt met de logica in je template om te gaan. Teveel van dergelijke logica kost namelijk veel regels code, en maakt onderhoud en lezen van de code veel lastiger.
Stel bijvoorbeeld dat je een regel tekst wil omzetten naar hoofdletters, dan kan je dat zo doen:
<template>
<div>
<p> I love {{ value.toUpperCase() }} </p>
</div>
</template>
Wat gebeurt er als je de variabele value op 50 verschillende plekken zou moeten veranderen? Dat is meteen een hoop werk, toch? Computer properties kunnen je hierbij een hoop helpen:
<template>
<div>
<p> I love {{ value }} </p>
</div>
</template>
<script>
export default {
computed:{
value(){
return this.value.toUpperCase()
}
}
}
</script>Je kan nu gewoon toUpperCase() veranderen naar toLowerCase(), en dan zal dat op alle plekken mee veranderen.
Event Handling
Vue.js maakt de communicatie tussen een child en parent onderdelen erg makkelijk, via $emit en v-on. Hierdoor kan je de communicatie tussen onderdelen in een hiërarchie aanzienlijk makkelijker en eenvoudiger beheren.
De functie $emit kan twee parameters accepteren: een string voor de naam, en een optionele waarde die verstuurd (“emitted”) wordt.
De v-on:event-name wordt gebruikt in het child onderdeel om het verstuurde event van de parent te ontvangen:
<template>
<section>
<button @click="onClick">Add </button>
</section>
</template>
<script>
export default {
name: "AddEvent",
methods: {
onClick() {
this.$emit('add', this.data);
}
}
}
</script>Nadat je de Add knop activeert, zal de onClick method het event $emit activeren, wanneer het add event verzonden wordt naar het child onderdeel dat wacht op het add event.
Zo kan je er voor zorgen dat een onderdeel luistert naar een event:
<template>
<section>
<p v-show="showSaveMsg">This component is listening to the ADD event</p>
<add-event v-on:add="onAdd"></add-event>
</section>
</template>
<script>
export default {
data(){
return {
showSaveMsg: false
}
},
components:{
AddEvent: () => import('./AddEvent')
},
methods: {
onAdd() {
this.showSaveMsg = true;
}
}
}
</script>De bovenstaande code wacht op het add event en reageert dan door de waarde van showSaveMsg te veranderen naar true, waardoor het bericht nogmaals getoond wordt.
Lazy Loading / Async componenten
Lazy loading is één van de beste manieren om de prestaties van Vue.js te verbeteren, aangezien onderdelen asynchroon of on-demand toegevoegd en verwerkt worden, waardoor je de bestandsgrootte, HTTP request-response tijden en meer aspecten minimaliseert.
Lazy loading wordt gedaan via dynamische Webpack imports, waarbij ook code splits ondersteund worden.
Vue.js maakt lazy loading van onderdelen mogelijk, en wordt globaal bereikt met de volgende scripts:
import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue"));
Je kan het lokaal regelen met iets als onderstaande onderdeel:
<template>
<div>
<component></component>
</div>
</template>
<script>
export default {
components: {
'Component': () => import('./Component')
}
}
</script>Globale componenten
We kunnen aanzienlijke herbruikbaarheid bereiken in Vue.js met globale componenten, waarbij je een onderdeel maar één keer hoeft te registreren en vervolgens overal kan hergebruiken.
Globale onderdelen zijn een belangrijke feature en kunnen je een hoop tijd besparen ten opzichte van het telkens opnieuw registreren van onderdelen, maar je kan er ook makkelijk de mist mee ingaan, als je alle onderdelen meteen globaal registreert. Dit kan namelijk snel leiden tot grotere bestandsgrootten dan nodig, wat een slechte invloed heeft op je SEO en laadtijden van pagina’s.
Zorg er dus voor dat je globale componenten registreert die je vaker gebruikt in je project, bijvoorbeeld zo:
import Vue from "vue";
Vue.component("new-component", () => import("./componetns/NewComponent.vue"));Component van één bestand
Eén van de meest krachtige features van Vue.js is het gebruik van onderdelen, waarin je belangrijke HTML elementen, CSS en JavaScript kan uitbreiden om herbruikbare code op te nemen.
Dergelijke componenten kunnen grote projecten opsplitsen in kleinere, herbruikbare stukjes die je in het hele project kan gebruiken, waardoor je het principe van Don’t Repeat Yourself (DRY) kan nastreven.
Ook biedt het een overzichtelijke organisatie voor grotere projecten, meer herbruikbare code, en kan je alle onderdelen splitsen naar aparte .vue bestanden.
<template>
<section>
<button @click="onClick">Add</button>
</section>
</template>
<script>
export default {
name: "CustomButtom",
methods: {
onClick() {
this.$emit('add', this.data);
}
}
}
</script>
<style scoped>
button{
/** Button Styles */
}
</style>De bovenstaande scripts maken een onderdeel voor een custom knop, die we in ons hele project kunnen gebruiken. Elke component heeft bijbehorende HTML, CSS en JavaScript.
Testen
Vue.js biedt één van de meest robuuste testlibraries, waardoor unit testing met Jest en Mocha of end-to-end testing eenvoudig wordt, met bijna geen benodigde instellingen.
Het loont dus zeker de moeite om eens even naar deze tools te kijken. In het project hieronder laten we zien hoe je dit kan installeren, opzetten en testen.
Als je de aanbevolen Vue CLI tool gebruikt voor je project, kan je de volgende opdrachten uitvoeren:
vue add unit-jest //to run unit test with jest
npm install --save-dev @vue/test-utils
Na de setup, kan je onderstaande code gebruiken, waarmee je een eenvoudig onderdeel kan testen:
// Import the `mount()` method from Vue Test Utils
import { mount } from '@vue/test-utils'
// The component to test
const MessageComponent = {
template: '<p>{{ message }}</p>',
props: ['message']
}
test('displays a message', () => {
// mount() returns a wrapped Vue component we can interact with
const wrapper = mount(MessageComponent, {
propsData: {
msg: 'Welcome to our testing world'
}
})
// Assert the rendered text of the component
expect(wrapper.text()).toContain('Welcome to our testing world')
})De Vue Testing Library heeft twee mooie mogelijkheden waarmee je onderdelen kan testen: Mount en Shallow.
Als je een onderdeel in volledige isolatie wil testen, kan je de methode shallow gebruiken. Als je juist op een component met subcomponenten wil werken, waarbij je ook de tussenliggende communicatie wil testen, is de optie mount erg handig.
De krachtige Vue CLI Tool
Vue CLI is een uitstekende CLI tool en biedt Vue developers een hoop kracht. Je kan er eenvoudig geïsoleerde onderdelen mee testen. Het mooie aan Vue CLi is dat je een onderdeel volledig in isolatie kan ontwikkelen, testen, en toch toegang hebt tot hot reloading terwijl je bezig bent.
Ter demonstratie installeren we Vue CLI globaal:
npm install -g @vue/cliVervolgens kan je met de volgende opdracht elk gewenst onderdeel testen:
vue serve ./components/views/Home.vueAls je graag een bepaald onderdeel met bijvoorbeeld collega’s wil delen, kan je dat met deze opdracht doen:
vue build --target lib --name goldenRule ./components/views/HomeVue CLI biedt erg veel mogelijkheden en kan je een hoop tijd besparen, zodra je het helemaal in de vingers hebt. Wil je er mee over weten, kijk dan eens in de officiële documentatie.
Props Management
Props management is belangrijk in Vue omdat het op verschillende manieren gemaakt kan worden. Je kan props ook valideren, meerdere props aanmaken en naar wens aanpassen.
Om een nieuwe propertie te maken binnen een Vue onderdeel, kan je uit meerdere opties kiezen. Aangenomen dat het onderdeel al bestaat, dan moet je de eigenschap isAdmin toevoegen.
De verschillende manieren waarop je dit kan doen:
<template>
<section>
<component v-if="isAdmin"></component>
</section>
</template>
<script>
export default {
name: 'Component',
// One
props: {
isAdmin: {
type: Boolean,
default: false,
required: true
}
},
// Two
props: ['isAdmin'],
// Three
props: {
isAdmin: Boolean
}
}
</script>Het valideren van dergelijke eigenschappen is erg belangrijk. En gelukkig is het ook vrij eenvoudig:
// ...
// One
props: {
isAdmin: {
default: false,
required: true,
validator: function(value) {
return typeof === 'boolean';
}
}
},
// ...En als laatste is ook het aanpassen van de properties en bijbehorende waarden vrij simpel:
//...
methods: {
isAdmin() {
this.isAdmin = true;
}
}
//..
En om de waarde van de eigenschap in een parent onderdeel te bepalen:
<template>
<section>
<component :isAdmin="true"></component>
</section>
</template>Server-side Rendering (SSR)
Met alle mooie features en voordelen van Vue.js voor frontend toepassingen, is Vue.js zelf nog altijd een client-side library waarbij alleen DOM elementen weergegeven en bewerkt worden.
Server-side rendering helpt om client-side frameworks zoals Vue.js betere resultaten te laten afleveren. Crawlers van zoekmachines zien dan volledig verwerkte en weergegeven pagina’s van je website als ze op bezoek komen.
Om je website sneller te laten indexeren door bijvoorbeeld Google en Bing, moet je website een korte time-to-content score krijgen, oftewel snel laden. Server-side rendering van Vue.js kan je daarbij helpen.
Server-side rendering (SSR) is een populaire techniek voor het verwerken van een normale client-side single-page app (SPA) op de server, en dan de volledige verwerkte pagina kant-en-klaar naar de lezer te versturen.
Nadat de pagina klaargemaakt is op de server, wordt het eindproduct naar de client als antwoord gestuurd. Daardoor is elk stukje informatie dus al helemaal klaar wanneer de browser de pagina toont aan bezoekers of zoekmachines.
Het inregelen van SSR in Vue.js kan lastig zijn voor beginners. Je kan dan beter Nuxt.js gebruiken, dat al ingebouwde SSR biedt en een minder steile leercurve.
Deployment
Vue.js geeft een hoop waarschuwingen, fouten en grote bestanden tijdens de deployment, maar al deze problemen verdwijnen direct wanneer je de productie voor je implementatie aanzet. Vue.js zal automatisch de Webpack buildtools configureren, minifications, CSS extraction en purging en caching inschakelen, en runtime errors tracken.
Kinsta klanten kunnen overwegen om de ingebouwde codeminificatiefeature te gebruiken die ze rechtstreeks kunnen beheren in het MyKinsta dashboard. Hiermee kunnen ze eenvoudig automatische CSS en JavaScript minificatie inschakelen met een simpele klik.
Vue.js maakt deployment erg eenvoudig door de productieomgeving automatisch te configureren, zonder dat je als developer veel hoeft te doen.
Om je Vue.js applicatie te implementeren, kan je de algemene uitleggen volgen.
Samenvatting
In dit artikel hebben we in detail gekeken wat Vue.js is, waarom je het zou moeten gebruiken, wat voordelen en nadelen zijn, en de tien dingen die je over Vue.js moet weten.
Hopelijk weet je nu ook meer over Vue.js zodat je geweldige frontend toepassingen kan gaan bouwen.
Succes met programmeren!
En als je nog vragen of opmerkingen hebt, horen we het graag. Vraag ons alles in de reacties hieronder!
Laat een reactie achter