De wereld van (web)development staat niet stil. Niet alleen worden er steeds meer tools en softwaretechnologieën ontwikkeld om applicaties en websites te bouwen, ook worden deze tools steeds verder geoptimaliseerd. Hierdoor ontstaan nieuwe technologieën. Een hiervan is Vue.js. In dit artikel leggen we je uit wat het is en waarom het zo populair is.

Wat je in dit artikel kunt verwachten:

• Wat is Vue?
• Wat is het verschil tussen JavaScript en Vue.js?
• Wat zijn de voordelen van Vue.js?
• Wat zijn de uitdagingen van Vue?
• Software laten ontwikkelen met Vue

Wat is Vue?

Vue (uitgesproken als ‘view’) is een front-end framework dat het bouwen van een website of applicatie vergemakkelijkt. Het is een van de nieuwere ontwikkelingen, die het ontwikkelproces van applicaties niet alleen sneller maakt, maar ook gebruiksvriendelijker.

Een framework maakt het mogelijk om steeds vanuit een basis te starten. Webdevelopers hoeven een website of applicatie dus niet langer vanaf nul op te zetten, maar kunnen deze met een framework, vanaf een basis, uitbouwen.

Vue is gebaseerd op de scripttaal JavaScript en wordt daarom Vue.js genoemd. Het framework toont op een eenvoudigere manier de inhoud dynamisch en is daarom erg gebruiksvriendelijk. Vue.js wordt vaak gebruikt om Single Page Applications (SPA) te schrijven. Het framework wordt zeer breed ondersteund en heeft een perfecte integratie met het Laravel framework.

Wat is het verschil tussen JavaScript en Vue.js?

JavaScript is een programmeertaal en maakt specifieke functies op een webpagina functioneel en interactief. Het script wordt hierbij als code gedownload naar de browser van de bezoeker en wordt daar uitgevoerd (‘client-side’ script-taal). Als JavaScript is uitgeschakeld in je browser, kan het zijn dat de inhoud of functionaliteit van de webpagina wordt beperkt. Vue.js is een front-end JavaScript framework dat helpt om de code beter te organiseren. Dus: JavaScript zorgt voor de functionaliteit op een webpagina en Vue.js helpt de JavaScript-code beter te organiseren.

Om bezig te gaan met Vue.js is het belangrijk dat je al enige kennis hebt van JavaScript. Met name de volgende onderwerpen zijn belangrijk om te begrijpen:

• Algemeen begrip van hoe code wordt uitgevoerd in JS (execution context, stack, event looping, hoisting).
• Hoe scopes werken.
• Dat JavaScript een ’losjes getypte taal’ is
• Hoe coercion werkt: het proces van het converteren van waarde van het en type naar het andere (zoals string naar number, object naar boolean etc.).
• Operator precedence en associativity.
• Value en reference in JavaScript
• Hoe het trefwoord “this” zich in verschillende omgevingen gedraagt.
• Wat closures zijn.
• Prototypical inheritance.
• Functie constructors en het sleutelwoord “new”.

Wat zijn de voordelen van Vue.js?

Vue helpt developers om dynamische, interactieve websites, applicaties en platformen te creëren. Hieronder staan de belangrijkste voordelen van het JavaScript framework Vue.

1. Eenvoudig coderen

Waar de JavaScript code vaak lang en onoverzichtelijk is, maakt Vue.js het coderen eenvoudiger. Dit komt door JavaScript, HTML en CSS in één component zitten. Daarnaast wordt de code steeds in een vaste volgorde geschreven, waardoor de kans op fouten kleiner wordt. Doordat Vue.js veel lijkt op het schrijven van normale JavaScript code en normale HTML gebruikt voor templates, is het snel te leren. Hierdoor kunnen ook junior developers makkelijk instappen. 

2. Snellere ontwikkeling

Doordat Vue het coderen sneller en gebruiksvriendelijker maakt, kunnen websites en applicaties sneller worden ontwikkeld. 

3. Veel documentatie

Aangezien Vue steeds populairder is geworden, is er veel documentatie aanwezig over het framework. Zo is er een handboek geschreven die zo gedetailleerd is dat je al binnen enkele minuten aan de slag kunt. 

3. Meteen beginnen

Het JavaScript framework heeft een klein formaat, namelijk slechts 18 tot 21 KB. Hierdoor kan het framework snel gedownload worden. Erg handig wanneer je er meteen mee wilt starten. 

4. Integratie met Laravel framework

Vue.js en Laravel werken goed samen. Dat komt doordat Vue.js een front-end framework is en Laravel een back-end framework. Het Vue framework is onderdeel van alle officiële Laravel projecten, waardoor de integratie zeer goed is en ontwikkelingen op elkaar worden afgestemd. 

5. Voor meerdere projecten

Een andere reden waarom developers graag met Vue.js werken is vanwege de aanpasbare architectuur. Het framework heeft voor alles componenten, die eenvoudig opnieuw gebruikt kunnen worden voor andere projecten.

Laravel

Laravel is al een aantal keer voorbij gekomen in dit artikel. Dit komt omdat Vue.js en Laravel goed samenwerken. Laravel is een PHP framework waarmee developers makkelijker en sneller kunnen programmeren. Het schrijven van code gaat namelijk een stuk eenvoudiger, doordat je ingebouwde functies kunt gebruiken. Laravel is gebaseerd op de MVC-structuur: Model, View en Controller. Deze structuur scheidt de data, de data van de logica en de voorkant van de applicatie. Met Laravel wordt data makkelijker uitgelezen uit de database. Bovendien kun je eenvoudig een model aanroepen en daarmee specifieke informatie ophalen, waardoor de code overzichtelijk blijft. Lees hier meer over Laravel. 

Uitdaging

Zoals gezegd werkt Vue aan de client-side en wordt de data op een later moment opgehaald en in de browser verwerkt. Dit kan negatieve invloed hebben op de SEO, omdat de Google crawler de data niet ziet. Een oplossing voor deze uitdaging is server side rendering (SRR). Met SRR wordt de content opgehaald van de server en grondig geïndexeerd door zoekmachines. Aangezien SSR ook complexiteit toevoegt, waardoor de development tijd langer wordt, is het belangrijk dat je alleen de noodzakelijke pagina’s implementeert. Een andere manier om het probleem met SEO te verbeteren is pre-rendering, waarmee de website wordt gegenereerd in statische bestanden die kunnen worden ingezet in elke hosting.  

Software laten ontwikkelen?

Lundo ontwikkelt softwareplatformen met gebruik van Vue. We hebben al diverse mooie applicaties ontwikkeld met gebruik van Laravel en Vue.js. Ben jij geïnteresseerd in maatwerksoftware? Ons team van developers denkt graag met je mee over de mogelijkheden voor jouw business. 

Neem contact op  Lees meer over Lundo