...
- 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 specefiek betekenen specifiek betekenen voor het hr portaal?
Aanpak en criteria
...
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
Resultaten
Hoe zit Vue.js globaal in elkaar?
...
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
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.
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
...