Vue.js Onderzoek

1. Inleiding

Voor het hr portaal is het van belang dat gebruikers, in dit geval werknemers en werkgevers, met het hr systeem kunnen werken. Hiervoor zal aan de hand van Vue.js een frontend worden opgezet. In dit onderzoek wordt onderzocht wat Vue.js voor het hr portaal kan betekenen, wat de voordelen zijn ten opzichte van andere javascript frameworks en hoe het zich verhoudt tot talen zoals php.

Het is van groot belang dat voor het JDI hr portaal het juiste javascript framework gebruikt wordt. Dit omdat het framework grote impact heeft op hoe efficiënt & responsive het portaal zal runnen, en hoe veel werk er nodig zal zijn vanuit de developers om alle frontend onderdelen te bouwen.

2. Doelstelling

De doelstelling van dit onderzoek is om uit te vinden wat vue.js kan betekenen voor het hr portaal en om de voordelen ten opzicht van andere frameworks en talen zoals php in kaart te brengen. Ook dient dit onderzoek als een introductie van Vue.js in de zin dat er zal worden onderzocht welke features van Vue.js er gebruikt kunnen worden, en hoe Vue.js werkt.

3. Onderzoeksvragen

Om goed onderzoek te kunnen doen naar het Vue.js javascript framework, wordt eerst een aantal vragen opgesteld. Deze vragen vormen een goede richtlijn voor wat er in dit document wordt onderzocht. Als al deze onderzoeksvragen beantwoord zijn zal er een goed beeld zijn van Vue.js.

3.1. Hoofdvraag

De hoofdvraag bij dit onderzoek luidt als volgt;

Hoe werkt Vue.js en hoe kan het worden gebruikt om de frontend van het hr portaal te bouwen?

3.2. Deelvragen

Hierbij zijn de volgende onderzoeksvragen van belang;

Hoe zit Vue.js globaal in elkaar?
Wat zijn voordelen van Vue.js ten opzichte van andere frameworks?
Hoe verhoudt Vue.js zich tegenover talen zoals Php?
Wat kan Vue.js specifiek betekenen voor het hr portaal?

4. Aanpak en criteria

4.1. Onderzoek aanpak

Dit onderzoek zal voornamelijk worden uitgevoerd aan de hand van internetbronnen. De website van Vue.js zelf is een bron waar vooral goed de features van Vue.js naar voren komen. Deze bron zal voor een objectieve vergelijking minder goed zijn omdat Vue.js zelf biased is. Daarnaast zijn er veel websites, blogs en videos beschikbaar om meer over Vue.js te leren. Eerst is in de voorgaande hoofdstukken nagedacht over de vragen die dit onderzoek moet beantwoorden. Vervolgens zal in de resultaten aan de hand van de verschillende internetbronnen een duidelijk beeld worden gegeven van Vue.js.

4.2. Criteria waaraan vue.js moet voldoen

Om een goed hr portaal op te leveren zijn een aantal features essentieel. Features die in het gekozen front-end framework beschikbaar moeten zijn, zodat de developers hiervan gebruik kunnen maken. De voornaamste criteria zijn;

Het framework moet snel en makkelijk te leren zijn, in verband met de beperkte projecttijd.
Het framework moet goed geoptimaliseerd zijn, dit houdt in dat het snel en lightweight moet zijn (in vergelijking tot andere front-end frameworks).
Het framework moet de mogelijkheid bieden om herbruikbare componenten te bouwen (bijvoorbeeld voor buttons, labels, headers, etc).
Het framework moet een makkelijke manier bieden om een bepaalde flow op te bouwen, bijvoorbeeld aan de hand if-else constructies te bouwen.
Het framework moet het voor developers makkelijk maken om inzicht te krijgen in hoe het portaal werkt. Bijvoorbeeld, als er veel functionaliteit wordt toegevoegd aan het portaal moet dit makkelijk in overzichtelijke componenten opgedeeld kunnen worden met leesbare code.

Op tutorialspoint (https://www.tutorialspoint.com/vuejs/vuejs_overview.htm) is een goed artikel over de features van Vue.js. Aan de hand van dit artikel kunnen we bovenstaande criteria nagaan. Voor criteria 1 is gezegt dat Vue.js makkelijk en snel te leren moet zijn. Uit het artikel in tutorialspoint komt naar voren dat het Vue.js framework makkelijk te leren is, en daardoor ook heel populair is geworden. Voor dit onderzoek is ook gekeken om data te krijgen over Vue gebruikers die ervaring hebben met andere frameworks. In deze reddit thread (https://www.reddit.com/r/vuejs/comments/kren4e/how_hard_is_vuejs_to_learn/) komt naar voren dat gebruikers die ervaring hebben met meerdere frameworks over het algemeen zeer te spreken zijn over de leerbaarheid van Vue.js. Ook zijn er al libraries beschikbaar zoals Vuetify (https://vuetifyjs.com/en/) waar al heel veel standaard componenten in zitten.

Een simpele google search laat zien dat Vue.js ook relatief lightweight is. Om precies te zijn is het 33.30KB. Hierover meer informatie in hoofdstuk 5.2.1. Verder is het in Vue inderdaad mogelijk om herbruikbare componenten te bouwen: 'Components are one of the important features of VueJS that helps create custom elements, which can be reused in HTML.' (https://www.tutorialspoint.com/vuejs/vuejs_overview.htm). Hierover meer in hoofdstuk 5.1.

Om een flow op te bouwen in Vue js zijn verschillende tools beschikbaar zoals event handling en de v-if en v-else constructies.

Tenslotte voor het laatste criteria; Vue moet kunnen worden opgedeeld in overzichtelijke componenten met leesbare code. Dit slaat een beetje terug op het stuk over herbruikbare componenten, omdat dit het voor developers automatisch makkelijker maakt om code op te delen in een goede folder structuur en hierdoor het overzicht te behouden. Verder bestaat een Vue component uit drie hoofdonderdelen:

Deze structuur komt in alle componenten terug, waardoor het makkelijk is om terug te vinden welke logica waar staat. Binnen deze structuur hoeven echter niet alle onderdelen in ieder component te zitten, er kan bijvoorbeeld een component bestaan zonder custom styling die dus geen gebruik maakt van de <style>.

In het kort; de template geeft een overzicht van hoe de uiteindelijke markup van dit component eruit moet komen te zien gebasseerd op de interne staat van het component. Het script houdt de logica van het component, en hieronder vallen dingen als de properties en de state van een component. Ten slotte de style, dit is waar de css staat voor de opmaak van het component.

https://snipcart.com/blog/vue-component-example-tutorial

5. Resultaten

5.1. Hoe zit Vue.js globaal in elkaar?

Vue.js is een javascript framework voor het bouwen van user-interfaces. Bij Vue.js kunnen aan de hand van componenten pagina's opgebouwd worden. Dit betekend dat verschillende onderdelen van iedere pagina los uitgewerkt kunnen worden. En deze componenten kunnen ook over meerdere pagina's worden hergebruikt. Bijvoorbeeld een knop die tussen twee pagina's schakelt, kan op beide pagina's voorkomen en op die manier hoeft de code niet dubbel geschreven te worden. Een groot voordeel van deze component-based setup is ook dat ieder component los geüpdatet kan worden, waardoor het laden en navigeren door de pagina's een stuk efficiënter verloopt. Vue.js gebruikt zogenaamde Declarative Rendering, wat ervoor zorgt dat pagina's reactive zijn, dit houdt in dat de componenten alleen veranderen als de data van het component veranderd.

5.2. Wat zijn voordelen van Vue.js ten opzichte van andere frameworks?

Hier volgt een vergelijkend onderzoek tussen Vue, Angular en React.

5.2.1. Algemene vergelijking

Ten eerste is een groot voordeel van Vue.js dat het lightweight is, dit betekend dat je ten opzichte van andere frameworks minder code aan je project hoeft toe te voegen. Ter vergelijking; Vue.js heeft een groote van 33.30KB (google: vue js size). React is 109KB, en Angular js is de grootste met 167KB.

Hieronder een kort overzicht van de geschiedenis van Vue, ten opzichte van Angular en React (https://www.codeinwp.com/blog/angular-vs-vue-vs-react/):

Hieruit komt naar voren dat Vue van de drie de nieuwste is, en dat het bijvoorbeeld wordt gebruikt door grote sites zoals Alibaba en GitLab.

5.2.2. Licensie

https://nl.wikipedia.org/wiki/MIT-licentie

Alle onderzochte frameworks gebruiken dezelfde licensie, namelijk de Mit Licensie. Dit betekend dat, tenzij er wordt gekozen om geen van deze frameworks te gebruiken, de de licensie eigenlijk geen rol zal spelen.

De MIT Licensie is een standaard licensie voor opensource software. Zolang er een beschrijving van de MIT Licensie en een copyright notice worden toegevoegd kan MIT software eigenlijk in alle applicaties worden gebruikt (https://en.wikipedia.org/wiki/MIT_License#:~:text=The%20MIT%20License%20is%20a,%2C%20therefore%2C%20high%20license%20compatibility).

5.2.3. Populariteit

React is lange tijd het grootste, meest populaire framework geweest van de drie (tot ongeveer 2018). Rond 2018 was Vue snel aan het groeien en inmiddels heeft het een kleine voorsprong op React wat betreft populariteit. Angular was net als Vue minder populair dan React, maar is in tegenstelling tot Vue de laatste jaren een beetje achtergebleven in populariteit. Het grote voordeel hiervan is dat een populair framework (in dit geval Vue), ook een grote community en veel resources beschikbaar heeft. Dus als developers die gebruik maken van Vue meer willen leren, of ergens niet uitkomen kan dit makkelijk met andere developers worden overlegd.

Samenvattend zitten de grootste voordelen hem in het feit dat Vue lightweight is en een grote community heeft.

5.3. Hoe verhoudt Vue.js zich tegenover talen zoals Php?

Het grote verschil tussen Vue.js en Php is dat Vue zich puur bezighoudt met de front-end van een applicatie. Dit betekend dat Vue gebruikt wordt om de interface te bouwen waarmee gebruikers een bestaande backend bereiken. Php aan de andere kant is eigenlijk een combinatie van zowel de front-end als de backend. Php kan niet zoals Vue in de browser zelf reageren op input van de gebruiker. Een groot voordeel van het gebruik van Vue is dat deze splitsing van de front- en backend zorgt dat meerdere front-ends dezelfde backend kunnen gebruiken. Zo kan dezelfde pagina op verschillende platforms worden gebruikt zonder de backend opnieuw te hoeven maken. Ook maakt Vue gebruik van componenten en states waardoor kleine onderdelen van de pagina (bijvoorbeeld de gebruikersinformatie) los van elkaar geüpdatet kunnen worden. Bij Php is het zo dat als er informatie zoals de gebruikersgegevens wordt geüpdatet, de hele pagina, inclusief onderdelen die hier niet mee te maken hebben, moet worden herladen.

https://www.reddit.com/r/webdev/comments/7owx1a/why_use_vuejs_reactjs_angularjs_instead_of_php/

https://forum.vuejs.org/t/vue-vs-php/81553/4

https://v2.vuejs.org/v2/guide/comparison.html?redirect=true

5.4. Wat kan Vue.js specifiek betekenen voor het hr portaal?

Vue.js kan binnen het hr portaal gebruikt worden voor het bouwen van de front-end. Zoals in hoofdstuk 4.2 is benoemt, zijn een aantal features van belang voor het front-end; het moet snel en makkelijk te leren zijn, lightweight zijn, herbruikbare componenten hebben, ontwikkelaars moeten makkelijk de pagina flow kunnen opzetten en de code moet goed opgedeeld kunnen zijn in leesbare stukken code. Aangezien deze criteria allemaal voor Vue.js zijn uitgewerkt in hoofdstuk 4.2 zal hier in dit hoofdstuk niet verder op ingegaan worden, het komt erop neer dat Vue.js aan al deze vereisten voldoet. Wat belangrijk is, is dat Vue.js een tool is waarmee er voor de spring boot backend van het hr portaal een interface gemaakt kan worden voor gebruikers. Denk hierbij aan een authenticatie interface, een werkplek overzicht, een verlof aanvraag interface, een reiskosten overzicht, etc. Deze Vue interface maakt gebruik van de backend API.

6. Conclusie

Om antwoord te geven op de centrale vraag binnen dit onderzoek, Hoe werkt Vue.js en hoe kan het worden gebruikt om de frontend van het hr portaal te bouwen?; Zoals in de eerste deelvraag beschreven, is Vue.js een javascript framework voor het bouwen van front-end user interfaces. Bij Vue.js kunnen aan de hand van componenten pagina's opgebouwd worden en deze componenten kunnen over meerdere pagina's worden hergebruikt. Vue.js gebruikt Declarative Rendering, wat ervoor zorgt dat pagina's reactive zijn, dit houdt in dat de componenten alleen veranderen als de data van het component veranderd.

Vue.js zal gebruikt worden om een front-end te maken die de link vormt tussen de backend en de eindgebruikers van het hr portaal. Zoals in hoofdstuk 5.2 beschreven is Vue.js lightweight, wat betekend dat het ten opzichte van andere frameworks minder code aan een project toevoegt. In de laatste paar jaar heeft Vue andere frameworks zoals React en Angular ingehaald wat betreft populariteit, dit zorgt ervoor dat er een grote community omheen is ontstaan waardoor het voor ontwikkelaars makkelijker is geworden om informatie over het framework te vinden.

https://www.tutorialspoint.com/vuejs/vuejs_overview.htm

https://learnvue.co/

https://vuejs.org/guide/introduction.html#what-is-vue

https://www.jesuisundev.com/en/understand-vuejs-in-5-minutes/

https://vueschool.io/articles/vuejs-tutorials/how-to-structure-a-large-scale-vue-js-application/